Pass themes option to Shiki?

[Karl Horky]

Similar to #17 (customization of the Slide container style), it would be nice to also be able to customize the Shiki themes array option, so that a different highlighter can be used:

remdx/packages/vite-plugin-remdx/index.ts

Lines 142 to 147 in fa5802d

     themes: [ 
       `${ 
         basename(root) === 'remdx' 
           ? `/packages/vite-plugin-remdx/` 
           : `/node_modules/@nkzw/vite-plugin-remdx/` 
       }lib/licht`, 

Maybe it makes sense as an option for @nkzw/vite-plugin-remdx?

[Karl Horky]

Workaround

Currently, I am using patch-package to patch the node_modules/@nkzw/vite-plugin-remdx/lib/licht.json file to include the theme that I want from the tm-themes package

[Christoph Nakazawa]

Yes, providing the themes as a plugin option to vite-plugin-remdx makes sense. Happy to merge a PR for that.

Keep in mind that the licht.json colors are not actually used directly! It's a bit hacky, but they get swapped for CSS variables named like this: https://github.com/nkzw-tech/remdx/blob/main/packages/vite-plugin-remdx/lib/ColorReplacements.tsx#L4-L46

With this, you can simply define your theme in CSS and overwrite the defaults: https://github.com/nkzw-tech/remdx/blob/main/packages/remdx/style.css#L29-L142

This way your slide deck will look great in light and dark mode.

[Karl Horky]

Keep in mind that the licht.json colors are not actually used directly! It's a bit hacky, but they get swapped for CSS variables named like this: main/packages/vite-plugin-remdx/lib/ColorReplacements.tsx#L4-L46

With this, you can simply define your theme in CSS and overwrite the defaults: main/packages/remdx/style.css#L29-L142

This way your slide deck will look great in light and dark mode.

Ah, interesting, mapping the literal colors to CSS variables 🤔 Is it desirable to rework this a bit to make this less hacky? (or at least reducing the indirection)

Eg. what about using something like light-dark()?

[Karl Horky]

Yes, providing the themes as a plugin option to vite-plugin-remdx makes sense. Happy to merge a PR for that.

Ok, I'll try to a PR for this. Should this also include new entries to packages/vite-plugin-remdx/lib/ColorReplacements.tsx?

[Christoph Nakazawa]

Ah, interesting, mapping the literal colors to CSS variables 🤔 Is it desirable to rework this a bit to make this less hacky? (or at least reducing the indirection)

A proper fix to expose CSS variable directly should happen in Shiki itself. It doesn't really make sense to swap out one approach for another imho.

Ok, I'll try to a PR for this. Should this also include new entries to packages/vite-plugin-remdx/lib/ColorReplacements.tsx?

Yes.

[Karl Horky]

cc @antfu would exposing CSS variables from Shiki make sense as a feature?

If I'm understanding correctly, this would enable light and dark mode syntax highlighting (in this case for ReMDX)

[Anthony Fu]

Are you talking about https://shiki.style/guide/theme-colors#css-variables-theme? It's already possible.

Just note that using CSS variables is a approximate approach (you won't get as accurate result as normal themes).