Feature: dark mode docs - #4914
Conversation
vitaut
left a comment
There was a problem hiding this comment.
Thanks for the PR.
Could you make the syntax highlighting follow the selected color scheme as well? We currently load Highlight.js's default.min.css unconditionally, which is a light theme, so code blocks will remain light in dark mode.
It would be good to add dark-mode highlighting styles scoped to [data-md-color-scheme="slate"] (and keep the current styles for the default scheme).
Added syntax highlighting and CSS for dark mode mkdocs.
vitaut
left a comment
There was a problem hiding this comment.
Thanks. Could we avoid adding a separate dark.css? The current file is essentially a copy of Highlight.js's Atom One Dark theme, which also brings in third-party licensing concerns.
I think a cleaner approach would be to keep the palette change in mkdocs.yml and add a small set of Highlight.js overrides to fmt.css that use MkDocs Material's existing code color variables. That way the highlighting follows the selected light/dark scheme without maintaining a separate hard-coded theme.
Syntax highlighting has now been added using material theme defaults. Kept the banner Ukraine blue by using .root > *.
|
I noticed that using material theme would have kept the banner from being blue like the Ukraine flag so I also provided override for theme on banner. |
vitaut
left a comment
There was a problem hiding this comment.
Thanks, this is much cleaner. Two remaining issues:
dark.cssis still listed inextra_css, but the file has been removed. Please remove that entry as well.- Could you make the Highlight.js overrides cover all of the color rules from
default.min.css? A few selectors such as.hljs-subst,.hljs-template-tag,.hljs-section,.hljs-deletionand.hljs-codestill inherit hard-coded colors from the light theme, so they can have poor contrast in dark mode.
Using the Material code color variables for those as well should make the highlighting fully scheme-independent.
|
Thank you for your patience, I have learned about hljs and done both. |
|
Merged, thanks |


Added dark mode by editing mkdocs.yml at request of #4913.