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. |


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