-
-
Notifications
You must be signed in to change notification settings - Fork 134
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ability to switch themes? #271
Comments
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. |
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. |
sorry for that, |
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. 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 |
We are closer to shipping this: code-hike/lighter#25 |
🚀 Issue was released in |
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 thenext.config.js
file.Example:
Trying to achieve something like this:
Kapture.2022-08-18.at.14.57.39.mp4
The text was updated successfully, but these errors were encountered: