search

stackblitz / tutorialkit

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API
https://tutorialkit.dev
MIT License
507 stars 49 forks source link

Access dark/light state in the preview #312

Closed eric-burel closed 2 months ago

eric-burel commented 2 months ago

Is your feature request related to a problem?

The application preview stays in light mode when tutorial kit is switched to dark mode, which is not super aesthetic image

Describe the solution you'd like.

Transfer the dark/light param to the container preview.

Describe alternatives you've considered.

I think this issue has been solved by SvelteKit team, as I see they pass a query string parameter to the webcontainer URL: image

In the learn sveltekit tutorial codebase, they have a script tag that seem to handle this parameter and apply a class to the preview document: https://github.com/sveltejs/learn.svelte.dev/blob/main/content/tutorial/common/src/app.html

Leading to a great UX when switching from light to dark mode, as the preview theme also changes and not only the tutorial UI.

The missing piece is: how do we pass a query param with the current theme to the webcontainer?

Additional context

No response

AriPerkkio commented 2 months ago

This is duplicate of https://github.com/stackblitz/tutorialkit/issues/247, let's move discussion there.

Adding the value of theme in iframe's URL as query parameter would allow users to capture it from location.search, but we are planning to add better support for this. @Nemikolh had some good ideas regarding this.