Support dark mode toggle for SVGs and highlight.js #4925
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Syntax highlighting already works with automatic preferences, but has not played well with neither default (no dark mode) settings, nor worked with the manual scheme toggle. (See also speced#4871.) This fixes that using CSS (so that default behavior works without JS). SVG behavior is by default based on user-agent preferences, and has therefore also not played well with the manual toggle. With this change, that is now handled by setting `color-scheme: light` or `dark` on the body element, based on the sidebar-provided manual scheme toggle. If no meta element indicating dark color-scheme support is present, light mode is set on the body. This instructs SVGs to render in light mode when embedded in documents with no dark mode support, even when the user agent indicates dark mode. (The `color-scheme` CSS property can of course still be set to other values for various sections in a document, if so desired.) A darkmode example document is also added, containing syntax-highlighted code and embedding an SVG document supporting light/dark color-scheme preferences.
This was referenced Apr 2, 2025
|
Is there anything I can to to help out with this? |
|
Sorry for the delay in review. I've some concerns:
I don't feel too comfortable with the approach here of Regardless, I'd suggest removing the Updated branch so the Netlify PR preview works. |
✅ Deploy Preview for respec-pr ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Syntax highlighting already works with automatic preferences, but has not played well with neither default (no dark mode) settings, nor worked with the manual scheme toggle. (See also #4871.)
This fixes that using CSS (so that default behavior works without JS).
SVG behavior is by default based on user-agent preferences, and has therefore also not played well with the manual toggle. With this change, that is now handled by setting
color-scheme: lightordarkon the body element, based on the sidebar-provided manual scheme toggle.If no meta element indicating dark color-scheme support is present, light mode is set on the body. This instructs SVGs to render in light mode when embedded in documents with no dark mode support, even when the user agent indicates dark mode. (The
color-schemeCSS property can of course still be set to other values for various sections in a document, if so desired.)A darkmode example document is also added, containing syntax-highlighted code and embedding an SVG document supporting light/dark color-scheme preferences.