Skip to content

Feature: dark mode docs - #4914

Merged
vitaut merged 5 commits into
fmtlib:mainfrom
ilike314272:feat-docs-dark-mode-4913
Sep 9, 2026
Merged

Feature: dark mode docs#4914
vitaut merged 5 commits into
fmtlib:mainfrom
ilike314272:feat-docs-dark-mode-4913

Conversation

@ilike314272

Copy link
Copy Markdown
Contributor

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

@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, this is much cleaner. Two remaining issues:

  • dark.css is still listed in extra_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-deletion and .hljs-code still 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.

@ilike314272
ilike314272 requested a review from vitaut September 9, 2026 01:36
@ilike314272

Copy link
Copy Markdown
Contributor Author

Thank you for your patience, I have learned about hljs and done both.

@vitaut
vitaut merged commit 8dc5d3f into fmtlib:main Sep 9, 2026
47 checks passed
@vitaut

vitaut commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

Merged, thanks

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