[Request] Auto use dark/light theme depending on prefers-color-scheme

Thank you so much for the awesome library!!!

Is your request related to a specific problem you’re having? The custom download contains many light and dark themes, however it doesn’t seem to take the CSS media query prefers-color-scheme into account.

The solution you’d prefer / feature you’d like to see added… In my ideal world, websites would feature both a light theme and a dark theme. The user wouldn’t need to explicitly choose in each site, because websites would infer this information from the user preference at the browser level or at the OS level. This is what “prefers-color-scheme” does.

Was this considered for highlight.js? I’d love to see such a nice UX feature.

Any alternative solutions you considered… The CSS media queries don’t make it obvious how to fetch an alternative CSS file when “prefers-color-scheme” is “dark”. This would save a few kB, but may also incur at least 1 additional round-trip to the server.

However, the CSS of each highlight.js theme is very samll (~1kB) so I’m okay with bundling 1 light theme and 1 dark theme together, and use only 1 of the 2 at any given time. This is how my build script manually bundles them:

echo -e "@media (prefers-color-scheme: light) {\n  " > bundle_theme.css
cat css/hljs/default.min.css >> bundle_theme.css
echo -e "\n}\n@media (prefers-color-scheme: dark) {\n  " >> bundle_theme.css
cat css/hljs/dark.min.css >> bundle_theme.css
echo -e "\n}" >> bundle_theme.css

Additional context… I recently implemented the dark theme of Programming-Idioms.org, which required first to move away from the abandoned library code-prettify.

[joshgoebel]

I think we’ll draw a line in the sand and say a first-party theme (for our purposes) is a singular set of colors - if a theme has both a light and dark variant - that is two themes, two CSS files, etc.

This is historically how it’s been done, and our theme previewer also assumes such. Changing this would mean:

• We’d need to pair all our existing paired themes (to be consistent).
• But we still have to provide singular options too… making the list longer and longer.
• We’d have no easy way to pair Base16 schemes.
• We’d need extra work/programming for the theme previewer to be able to show these themes

I’m not seeing a strong value proposition here - and it’s also possible someone might want to choose entirely different themes for light and dark mode (rather than a set)… so leaving the power in their hands seems best. This is trivial for implementors to do, and that’s what’s important.

[Deleplace]

Thanks all for this great discussion. It is indeed not very hard for users to implement the auto-selection themselves, either with conditional include (saving kB) or with a media query inside a custom-made bundled CSS (saving latency).