Skip to content

docs: improve colors on dark mode #15879

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vkarpov15 merged 14 commits into from
Dec 12, 2025
+341 −249
Merged

docs: improve colors on dark mode #15879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b76ee2d
feat: improve colors on dark mode
AbdelrahmanHafez Dec 8, 2025
1f9b6ac
chore: use higher contrast color for dark mode
AbdelrahmanHafez Dec 8, 2025
015b0a4
refactor: parameterize colors instead of using hard-coded values
AbdelrahmanHafez Dec 8, 2025
36d4f47
refactor: consolidate css properties into one single source of truth
AbdelrahmanHafez Dec 8, 2025
48dc3c8
Initial plan
Copilot Dec 8, 2025
75bafd7
refactor: remove all CSS variable fallbacks for consistency
Copilot Dec 8, 2025
9b47a50
Merge pull request #15880 from Automattic/copilot/sub-pr-15879
AbdelrahmanHafez Dec 8, 2025
925c0cd
Update docs/css/mongoose5.css
AbdelrahmanHafez Dec 8, 2025
d5276cc
fix: address PR feedback, use svg logo instead of image
AbdelrahmanHafez Dec 8, 2025
64b1960
fix: fix line-height in home page intro code
AbdelrahmanHafez Dec 8, 2025
01bc484
chore: delete mongoose image logos
AbdelrahmanHafez Dec 8, 2025
fb18877
fix(docs): fix wrong theme flashing on page reload
AbdelrahmanHafez Dec 8, 2025
a93d778
fix(docs): fix SVG logo size to match original logo size
AbdelrahmanHafez Dec 9, 2025
0a676c8
quick color fixes
vkarpov15 Dec 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 32 additions & 15 deletions docs/css/api.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,24 +247,41 @@ hr.separate-api {

/* Dark mode support for API page */
@media (prefers-color-scheme: dark) {
.api-nav {
background-color: var(--menu-bg, #252525);
border-left-color: var(--border-color, #444);
:root:not([data-theme="light"]) .api-nav {
background-color: var(--menu-bg);
border-left-color: var(--border-color);
}

.api-nav a {
color: var(--text-muted, #888);
:root:not([data-theme="light"]) .api-nav a {
color: var(--text-muted);
}

.api-nav a:hover {
color: var(--link-color, #4a9eff);
:root:not([data-theme="light"]) .api-nav a:hover {
color: var(--link-color);
}

.native-ad {
background-color: var(--bg-secondary, #2d2d2d);
:root:not([data-theme="light"]) .native-ad {
background-color: var(--bg-secondary);
}

.native-ad a {
color: var(--text-primary, #e0e0e0);
:root:not([data-theme="light"]) .native-ad a {
color: var(--text-primary);
}
}

[data-theme="dark"] .api-nav {
background-color: var(--menu-bg);
border-left-color: var(--border-color);
}

[data-theme="dark"] .api-nav a {
color: var(--text-muted);
}

[data-theme="dark"] .api-nav a:hover {
color: var(--link-color);
}

[data-theme="dark"] .native-ad {
background-color: var(--bg-secondary);
}

[data-theme="dark"] .native-ad a {
color: var(--text-primary);
}
141 changes: 80 additions & 61 deletions docs/css/github.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ pre code {
padding: 0;
font-size: 1em;
color: var(--code-text, #222);
line-height: 1.6;
display: block;
}

pre {
Expand Down Expand Up @@ -56,6 +58,7 @@ github.com style (c) Vasily Polovnyov <[email protected]>
background: var(--code-bg, #f8f8f8);
-webkit-text-size-adjust: none;
transition: background-color 0.3s ease, color 0.3s ease;
line-height: 1.6;
}

.hljs-comment,
Expand Down Expand Up @@ -169,126 +172,142 @@ github.com style (c) Vasily Polovnyov <[email protected]>
}

/* Dark mode support for syntax highlighting */
.code-theme-dark code {
background-color: var(--code-bg, #2d2d2d);
color: var(--link-color, #4a9eff);
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) code {
background-color: var(--code-bg);
color: var(--link-color);
}
:root:not([data-theme="light"]) pre {
background-color: var(--code-bg);
border-color: var(--border-color);
color: var(--code-text);
}
:root:not([data-theme="light"]) .hljs {
background: var(--code-bg);
color: var(--code-text);
}
}

[data-theme="dark"] code {
background-color: var(--code-bg);
color: var(--link-color);
}

.code-theme-dark pre {
background-color: var(--code-bg, #2d2d2d);
border-color: var(--border-color, #444);
color: var(--code-text, #e0e0e0);
[data-theme="dark"] pre {
background-color: var(--code-bg);
border-color: var(--border-color);
color: var(--code-text);
}

.code-theme-dark .hljs {
background: var(--code-bg, #2d2d2d);
color: var(--code-text, #e0e0e0);
[data-theme="dark"] .hljs {
background: var(--code-bg);
color: var(--code-text);
}

.code-theme-dark .hljs-comment,
.code-theme-dark .diff .hljs-header,
.code-theme-dark .hljs-javadoc {
[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .diff .hljs-header,
[data-theme="dark"] .hljs-javadoc {
color: #6a9955;
}

.code-theme-dark .hljs-keyword,
.code-theme-dark .css .rule .hljs-keyword,
.code-theme-dark .hljs-winutils,
.code-theme-dark .nginx .hljs-title,
.code-theme-dark .hljs-subst,
.code-theme-dark .hljs-request,
.code-theme-dark .hljs-status {
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .css .rule .hljs-keyword,
[data-theme="dark"] .hljs-winutils,
[data-theme="dark"] .nginx .hljs-title,
[data-theme="dark"] .hljs-subst,
[data-theme="dark"] .hljs-request,
[data-theme="dark"] .hljs-status {
color: #569cd6;
font-weight: bold;
}

.code-theme-dark .hljs-number,
.code-theme-dark .hljs-hexcolor,
.code-theme-dark .ruby .hljs-constant {
[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-hexcolor,
[data-theme="dark"] .ruby .hljs-constant {
color: #b5cea8;
}

.code-theme-dark .hljs-string,
.code-theme-dark .hljs-tag .hljs-value,
.code-theme-dark .hljs-phpdoc,
.code-theme-dark .hljs-dartdoc,
.code-theme-dark .tex .hljs-formula {
[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-tag .hljs-value,
[data-theme="dark"] .hljs-phpdoc,
[data-theme="dark"] .hljs-dartdoc,
[data-theme="dark"] .tex .hljs-formula {
color: #ce9178;
}

.code-theme-dark .hljs-title,
.code-theme-dark .hljs-id,
.code-theme-dark .scss .hljs-preprocessor {
[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-id,
[data-theme="dark"] .scss .hljs-preprocessor {
color: #d7ba7d;
font-weight: bold;
}

.code-theme-dark .hljs-class .hljs-title,
.code-theme-dark .hljs-type,
.code-theme-dark .vhdl .hljs-literal,
.code-theme-dark .tex .hljs-command {
[data-theme="dark"] .hljs-class .hljs-title,
[data-theme="dark"] .hljs-type,
[data-theme="dark"] .vhdl .hljs-literal,
[data-theme="dark"] .tex .hljs-command {
color: #4ec9b0;
font-weight: bold;
}

.code-theme-dark .hljs-tag,
.code-theme-dark .hljs-tag .hljs-title,
.code-theme-dark .hljs-rules .hljs-property,
.code-theme-dark .django .hljs-tag .hljs-keyword {
[data-theme="dark"] .hljs-tag,
[data-theme="dark"] .hljs-tag .hljs-title,
[data-theme="dark"] .hljs-rules .hljs-property,
[data-theme="dark"] .django .hljs-tag .hljs-keyword {
color: #569cd6;
font-weight: normal;
}

.code-theme-dark .hljs-attribute,
.code-theme-dark .hljs-variable,
.code-theme-dark .lisp .hljs-body {
[data-theme="dark"] .hljs-attribute,
[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .lisp .hljs-body {
color: #9cdcfe;
}

.code-theme-dark .hljs-regexp {
[data-theme="dark"] .hljs-regexp {
color: #d16969;
}

.code-theme-dark .hljs-symbol,
.code-theme-dark .ruby .hljs-symbol .hljs-string,
.code-theme-dark .lisp .hljs-keyword,
.code-theme-dark .clojure .hljs-keyword,
.code-theme-dark .scheme .hljs-keyword,
.code-theme-dark .tex .hljs-special,
.code-theme-dark .hljs-prompt {
[data-theme="dark"] .hljs-symbol,
[data-theme="dark"] .ruby .hljs-symbol .hljs-string,
[data-theme="dark"] .lisp .hljs-keyword,
[data-theme="dark"] .clojure .hljs-keyword,
[data-theme="dark"] .scheme .hljs-keyword,
[data-theme="dark"] .tex .hljs-special,
[data-theme="dark"] .hljs-prompt {
color: #c586c0;
}

.code-theme-dark .hljs-built_in {
[data-theme="dark"] .hljs-built_in {
color: #4fc1ff;
}

.code-theme-dark .hljs-preprocessor,
.code-theme-dark .hljs-pragma,
.code-theme-dark .hljs-pi,
.code-theme-dark .hljs-doctype,
.code-theme-dark .hljs-shebang,
.code-theme-dark .hljs-cdata {
[data-theme="dark"] .hljs-preprocessor,
[data-theme="dark"] .hljs-pragma,
[data-theme="dark"] .hljs-pi,
[data-theme="dark"] .hljs-doctype,
[data-theme="dark"] .hljs-shebang,
[data-theme="dark"] .hljs-cdata {
color: #808080;
font-weight: bold;
}

.code-theme-dark .hljs-deletion {
[data-theme="dark"] .hljs-deletion {
background: #5a1d1d;
color: #f48771;
}

.code-theme-dark .hljs-addition {
[data-theme="dark"] .hljs-addition {
background: #1e3a1e;
color: #b5cea8;
}

.code-theme-dark .diff .hljs-change {
[data-theme="dark"] .diff .hljs-change {
background: #2d4d2d;
color: #4ec9b0;
}

.code-theme-dark .hljs-chunk {
[data-theme="dark"] .hljs-chunk {
color: #808080;
}

Expand Down
Loading