How do you have themes responsively update based on user-theme changes?

[NullVoxPopuli]

I have this site, which uses shiki: https://ember-primitives.pages.dev/3-ui/avatar.md

but, the shiki theme, only loads the dark/light theme that matches the user theme at the time of page load.

you have to refresh the page after changing the theme to get the updated shiki theme.

here is the code I use for that:

import rehypeShikiFromHighlighter from '@shikijs/rehype/core';
import { getHighlighterCore } from 'shiki/core';
import getWasm from 'shiki/wasm';

/* ... */

    const highlighter = await getHighlighterCore({
      themes: [
        import('shiki/themes/github-dark.mjs'), 
        import('shiki/themes/github-light.mjs'),
      ],
      langs: [
        /* ... */
      ],
      loadWasm: getWasm,
    });

    // rehype plugins
        [
          rehypeShikiFromHighlighter,
          highlighter,
          {
            defaultColor: colorScheme.current === 'dark' ? 'dark' : 'light',
            themes: {
              light: 'github-light',
              dark: 'github-dark',
            },
          },
        ],
    // ...

so, if the themes have hard-coded hex values, rather than CSS variables, I could see how this problem would manifest.

Are there themes that, by default, use css variables? Or should I be expected to override all the color tokens with css vars myself, manually?

Thanks!!

[NullVoxPopuli]

Ah, I figured it out, thanks to the docs:
https://shiki.matsu.io/guide/dual-themes#class-based-dark-mode

My final code:

html[style*="color-scheme: dark"] {
  .shiki,
  .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
  }
}

html[style*="color-scheme: light"] {
  .shiki,
  .shiki span {
    color: var(--shiki-light) !important;
    background-color: var(--shiki-light-bg) !important;
  }
}

Results:

Screencast.from.2024-05-05.20-14-21.mp4