Access dark/light state in the preview

[eric-burel]

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

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:

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]

This is duplicate of #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.