Add a small tutorial to switch between multiple themes

[Serpentarius13]

Clear and concise description of the problem

Right now there is a reproduction on how to do it and it is possible to read between the lines and use source maps, but I think a clear tutorial would be nice

Suggested solution

Write a small step-by-step tutorial on how to switch between multiple themes

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Contributes

• If this feature request is accepted, I am willing to submit a PR to fix this issue

[fuma-nama]

Is the guide at https://shiki.style/guide/dual-themes useful for you?

Oh I see what you meant, yes I think it would be a good idea too.

[antfu]

PR welcome if you want to help, thanks!

[Serpentarius13]

PR welcome if you want to help, thanks!

Can you please give me a heads-up? What version of the repo is actually used in production documentation? There's an example block on website:

Which is nowhere to be found in the markdown file on main branch:

With it, a token would be generated like:

<span style="--shiki-dark:#D8DEE9;--shiki-light:#2E3440">console</span>

In that case, the generated HTML would have no style out of the box, you need to add your own CSS to control the colors.

It's also possible to control the theme in CSS variables. For more, refer to the great research and examples by [@mayank99](https://github.com/mayank99) in [this issue #6](https://github.com/antfu/shikiji/issues/6).

[fuma-nama]

it exists, you can work on the main branch

[Serpentarius13]

it exists, you can work on the main branch

But how is it added? Is there some magic in the rendering code?

[fuma-nama]

Hmm what do you mean? It's on the main branch

[Serpentarius13]

Hmm what do you mean? It's on the main branch

I'm completely blind! Was looking at a block head. Here's the PR :) #823