From 113b80d965dfed2957495313e30c82fa4ec8c884 Mon Sep 17 00:00:00 2001 From: ilike314272 Date: Thu, 3 Sep 2026 02:34:22 -0400 Subject: [PATCH 1/3] Dark mode docs --- support/mkdocs.yml | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/support/mkdocs.yml b/support/mkdocs.yml index 17034cd1ffce..1a0229481999 100644 --- a/support/mkdocs.yml +++ b/support/mkdocs.yml @@ -10,6 +10,17 @@ theme: - navigation.tabs - navigation.top - toc.integrate + palette: + - media: "(prefers-color-scheme: light)" + scheme: default + toggle: + icon: material/brightness-7 + name: Switch to dark mode + - media: "(prefers-color-scheme: dark)" + scheme: slate + toggle: + icon: material/brightness-4 + name: Switch to light mode extra_javascript: - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js From 73774f1942dfac5d29edf00e4147a38ac0cc0f6d Mon Sep 17 00:00:00 2001 From: leandrinian Date: Fri, 4 Sep 2026 13:36:39 -0400 Subject: [PATCH 2/3] fix: Dark mode syntax highlighting Added syntax highlighting and CSS for dark mode mkdocs. --- doc/dark.css | 79 ++++++++++++++++++++++++++++++++++++++++++++++ support/mkdocs.yml | 2 ++ 2 files changed, 81 insertions(+) create mode 100644 doc/dark.css diff --git a/doc/dark.css b/doc/dark.css new file mode 100644 index 000000000000..17fcfa11d199 --- /dev/null +++ b/doc/dark.css @@ -0,0 +1,79 @@ +/* DARK MODE SETTINGS */ + +[data-md-color-scheme="slate"] .hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #abb2bf; + background: #282c34; +} + +[data-md-color-scheme="slate"] .hljs-comment, +[data-md-color-scheme="slate"] .hljs-quote { + color: #5c6370; + font-style: italic; +} + +[data-md-color-scheme="slate"] .hljs-doctag, +[data-md-color-scheme="slate"] .hljs-keyword, +[data-md-color-scheme="slate"] .hljs-formula { + color: #c678dd; +} + +[data-md-color-scheme="slate"] .hljs-section, +[data-md-color-scheme="slate"] .hljs-name, +[data-md-color-scheme="slate"] .hljs-selector-tag, +[data-md-color-scheme="slate"] .hljs-deletion, +[data-md-color-scheme="slate"] .hljs-subst { + color: #e06c75; +} + +[data-md-color-scheme="slate"] .hljs-literal { + color: #56b6c2; +} + +[data-md-color-scheme="slate"] .hljs-string, +[data-md-color-scheme="slate"] .hljs-regexp, +[data-md-color-scheme="slate"] .hljs-addition, +[data-md-color-scheme="slate"] .hljs-attribute, +[data-md-color-scheme="slate"] .hljs-meta-string { + color: #98c379; +} + +[data-md-color-scheme="slate"] .hljs-built_in, +[data-md-color-scheme="slate"] .hljs-class .hljs-title { + color: #e6c07b; +} + +[data-md-color-scheme="slate"] .hljs-attr, +[data-md-color-scheme="slate"] .hljs-variable, +[data-md-color-scheme="slate"] .hljs-template-variable, +[data-md-color-scheme="slate"] .hljs-type, +[data-md-color-scheme="slate"] .hljs-selector-class, +[data-md-color-scheme="slate"] .hljs-selector-attr, +[data-md-color-scheme="slate"] .hljs-selector-pseudo, +[data-md-color-scheme="slate"] .hljs-number { + color: #d19a66; +} + +[data-md-color-scheme="slate"] .hljs-symbol, +[data-md-color-scheme="slate"] .hljs-bullet, +[data-md-color-scheme="slate"] .hljs-link, +[data-md-color-scheme="slate"] .hljs-meta, +[data-md-color-scheme="slate"] .hljs-selector-id, +[data-md-color-scheme="slate"] .hljs-title { + color: #61aeee; +} + +[data-md-color-scheme="slate"] .hljs-emphasis { + font-style: italic; +} + +[data-md-color-scheme="slate"] .hljs-strong { + font-weight: bold; +} + +[data-md-color-scheme="slate"] .hljs-link { + text-decoration: underline; +} + diff --git a/support/mkdocs.yml b/support/mkdocs.yml index 1a0229481999..063aec2c9a5b 100644 --- a/support/mkdocs.yml +++ b/support/mkdocs.yml @@ -29,6 +29,8 @@ extra_javascript: extra_css: - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css - fmt.css + - dark.css + markdown_extensions: - pymdownx.highlight: From 9af6c3d3fb2ab7fc3b23836ec671628d06439d73 Mon Sep 17 00:00:00 2001 From: leandrinian Date: Sat, 5 Sep 2026 12:23:31 -0400 Subject: [PATCH 3/3] fix: use material theme Syntax highlighting has now been added using material theme defaults. Kept the banner Ukraine blue by using .root > *. --- doc/dark.css | 79 ---------------------------------------------------- doc/fmt.css | 50 ++++++++++++++++++++++++++++++++- 2 files changed, 49 insertions(+), 80 deletions(-) delete mode 100644 doc/dark.css diff --git a/doc/dark.css b/doc/dark.css deleted file mode 100644 index 17fcfa11d199..000000000000 --- a/doc/dark.css +++ /dev/null @@ -1,79 +0,0 @@ -/* DARK MODE SETTINGS */ - -[data-md-color-scheme="slate"] .hljs { - display: block; - overflow-x: auto; - padding: 0.5em; - color: #abb2bf; - background: #282c34; -} - -[data-md-color-scheme="slate"] .hljs-comment, -[data-md-color-scheme="slate"] .hljs-quote { - color: #5c6370; - font-style: italic; -} - -[data-md-color-scheme="slate"] .hljs-doctag, -[data-md-color-scheme="slate"] .hljs-keyword, -[data-md-color-scheme="slate"] .hljs-formula { - color: #c678dd; -} - -[data-md-color-scheme="slate"] .hljs-section, -[data-md-color-scheme="slate"] .hljs-name, -[data-md-color-scheme="slate"] .hljs-selector-tag, -[data-md-color-scheme="slate"] .hljs-deletion, -[data-md-color-scheme="slate"] .hljs-subst { - color: #e06c75; -} - -[data-md-color-scheme="slate"] .hljs-literal { - color: #56b6c2; -} - -[data-md-color-scheme="slate"] .hljs-string, -[data-md-color-scheme="slate"] .hljs-regexp, -[data-md-color-scheme="slate"] .hljs-addition, -[data-md-color-scheme="slate"] .hljs-attribute, -[data-md-color-scheme="slate"] .hljs-meta-string { - color: #98c379; -} - -[data-md-color-scheme="slate"] .hljs-built_in, -[data-md-color-scheme="slate"] .hljs-class .hljs-title { - color: #e6c07b; -} - -[data-md-color-scheme="slate"] .hljs-attr, -[data-md-color-scheme="slate"] .hljs-variable, -[data-md-color-scheme="slate"] .hljs-template-variable, -[data-md-color-scheme="slate"] .hljs-type, -[data-md-color-scheme="slate"] .hljs-selector-class, -[data-md-color-scheme="slate"] .hljs-selector-attr, -[data-md-color-scheme="slate"] .hljs-selector-pseudo, -[data-md-color-scheme="slate"] .hljs-number { - color: #d19a66; -} - -[data-md-color-scheme="slate"] .hljs-symbol, -[data-md-color-scheme="slate"] .hljs-bullet, -[data-md-color-scheme="slate"] .hljs-link, -[data-md-color-scheme="slate"] .hljs-meta, -[data-md-color-scheme="slate"] .hljs-selector-id, -[data-md-color-scheme="slate"] .hljs-title { - color: #61aeee; -} - -[data-md-color-scheme="slate"] .hljs-emphasis { - font-style: italic; -} - -[data-md-color-scheme="slate"] .hljs-strong { - font-weight: bold; -} - -[data-md-color-scheme="slate"] .hljs-link { - text-decoration: underline; -} - diff --git a/doc/fmt.css b/doc/fmt.css index 75463865582e..ef260889ce64 100644 --- a/doc/fmt.css +++ b/doc/fmt.css @@ -1,4 +1,4 @@ -:root { +:root > * { --md-primary-fg-color: #0050D0; } @@ -60,3 +60,51 @@ code.decl > div { white-space: normal; /* Allow text wrapping on smaller screens */ } } + +/* HLJS Overrides for Material Theme */ + +.hljs { + color: var(--md-code-fg-color); + background: var(--md-code-bg-color); +} +.hljs-comment, +.hljs-quote { + color: var(--md-code-hl-comment-color); +} +.hljs-doctag, +.hljs-keyword, +.hljs-formula { + color: var(--md-code-hl-keyword-color); +} +.hljs-string, +.hljs-regexp, +.hljs-addition, +.hljs-attribute, +.hljs-meta-string { + color: var(--md-code-hl-string-color); +} +.hljs-number, +.hljs-literal { + color: var(--md-code-hl-number-color); +} +.hljs-built_in, +.hljs-class .hljs-title { + color: var(--md-code-hl-function-color); +} +.hljs-symbol, +.hljs-bullet, +.hljs-link, +.hljs-meta, +.hljs-selector-id, +.hljs-title { + color: var(--md-code-hl-special-color); +} +.hljs-attr, +.hljs-variable, +.hljs-template-variable, +.hljs-type, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: var(--md-code-hl-constant-color); +}