Dark/Light code highlight themes

[antfu]

Is your feature request related to a problem? Please describe

I personally would prefer to use light code highlight in light mode and dark code in dark mode. Since light/dark mode is essentially a thing we need to consider for the modern web, I think it makes sense to support the built-in capability of having different syntax highlighting on light/dark mode.

Reference: https://github.com/antfu/markdown-it-shiki#dark-mode

[Tahul]

That is an excellent idea, we actually had that support back when we made queries to Shiki from the ProseCode component instead of doing it from the parser.

I'm wondering what kind of impact it would have on parsing to support multiple color schemes. (cc @farnabaz)

As for now a workaround would be to use the 'css-variables' theme from Shiki that can support this usecase.

[antfu]

Yeah, the css variables theme is one solution but it might not be flexible enough. In markdown-it-shiki we rendered two shiki output with a wrapper to display and hide them based on the theme. Have to do this way since it's SSG, but in Nuxt content it might be possible to do it more dynamic and efficient?

[farnabaz]

Instead of inlining styles in token spans, we can generate a small css code at the end of document so support dark/light code highlighting.

.token { ... }
.dark .token { *** }

The only think is this approach affects build time, because of secondary shiki highlighter