Skip to content

Feature: dark mode docs - #4914

Open
ilike314272 wants to merge 3 commits into
fmtlib:mainfrom
ilike314272:feat-docs-dark-mode-4913
Open

Feature: dark mode docs#4914
ilike314272 wants to merge 3 commits into
fmtlib:mainfrom
ilike314272:feat-docs-dark-mode-4913

Conversation

@ilike314272

Copy link
Copy Markdown

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

@vitaut vitaut left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Author

New dark.css commit adds syntax highlighting that looks more pleasing than copying light mode css
image
image

@ilike314272
ilike314272 requested a review from vitaut September 4, 2026 20:34

@vitaut vitaut left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 > *.
@ilike314272
ilike314272 requested a review from vitaut September 5, 2026 16:24
@ilike314272

Copy link
Copy Markdown
Author

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. dark.css removed and replaced it with .hjls overrides at bottom of fmt.css. Thank you for reviewing, I am learning from it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants