search

akiran / react-highlight

React component for syntax highlighting
https://react-highlight.neostack.com/
MIT License
767 stars 87 forks source link

Dark mode #84

Open gjhltn opened 2 years ago

gjhltn commented 2 years ago

I need to use a different syntax stylesheet in dark vs light mode. How can I achieve this? As far as I can tell, it's not possible? If so this seems like important missing functionality??

The way to do this using highlight is hacky - switching link tags - and is essentially impossible to arrange with a bundler. It would be great if there was an easy way to scope the css to a tag for instance...

Thanks

miko007 commented 2 years ago

you basically just import a dark color scheme in your sass via:

@import "~highlight.js/styles/monokai.css";

for example.

gjhltn commented 2 years ago

Thanks for helping. My question was more how to switch between the different styles. Does sass let you import a css file conditionally into a media query scope? If so great but sass isn't part of everybody's stack, and as far as I can see it's not easy at all to arrange with my stack - webpack and styled components. Having an external stylesheet at all is a already inconvenient enough but is understandable, but having two and trying to get them to switch is I think nontrivial?

If there was a way to configure the component with a stylesheet to use in light mode and one in dark (and perhaps for other preferences) that would I think be a really helpful feature,

miko007 commented 2 years ago

in that case, you would need to do some of this magic: https://github.com/highlightjs/highlight.js/blob/main/demo/demo.js

gjhltn commented 2 years ago

Very much appreciate this thank you. This is pretty much the solution I was describing in my original post but it's very helpful indeed to confirm that it's not crazy! Many thanks indeed. Have a great weekend.