Ability to switch themes?

[stursby]

Hey there! First off wanted to say thank you for this awesome lib!

I'm wondering if there's a good way to switch themes on the fly? (ie: icon that switches between light/dark theme)

Right now it seems like I can only pass one theme in the next.config.js file.

Example:

const theme = require("shiki/themes/min-light.json");

...

const withMDX = require("@next/mdx")({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [[remarkCodeHike, { theme, lineNumbers: true }]],
  },
});

Trying to achieve something like this:

https://user-images.githubusercontent.com/527849/185483722-800b3305-f0b9-4835-9fc9-5c90e726e6ec.mp4

[pomber]

I'm wondering if there's a good way to switch themes on the fly? (ie: icon that switches between light/dark theme)

Not right now. The syntax highlighting is done at build time, so it's not possible to change the theme during run-time.

But I want to add some way of passing a couple of themes in the config (build-time) and provide some way to switch between them during run-time.

[sdorra]

I found a way which uses the shiki css-variables theme plus some more css-variables: https://sdorra.dev/posts/2023-01-12-ch-dark-mode

This approach works with code hike until version 0.8.0. Version 0.8.0 no longer uses shiki but lighter. Perhaps a mechanism similar to the one from shiki could be added to lighter.

[pomber]

sorry for that, the idea is to support multiple themes in code hike soon (not with CSS variables)

[hipstersmoothie]

I integrated this in my shiki retype plugin.

https://github.com/hipstersmoothie/rehype-shiki-reloaded

The gist of it from the docs:

this plugin will generate 2 code blocks, one for light mode and one for dark mode. It's up to you how to switch between these, either by media query, className or a combination of those.

Here is how you would use a media query to hide and show the appropriate block.

.syntax-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .syntax-light {
    display: none;
  }

  .syntax-dark {
    display: block;
  }
}

---

You could pretty easily add an arbitrary amount of themes and it would work well too. The css would have to change to fit the need of the user.

---

Edit: I see that the project has moved away from shiki a tool you built. can't wait for this. my #1 feature request right now

[pomber]

We are closer to shipping this: https://github.com/code-hike/lighter/pull/25

[github-actions[bot]]

:rocket: Issue was released in v0.9.0-next.0 :rocket: