Skip to content

feat: Add dark mode support and CSS improvements #15753

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 15 commits into from
Dec 4, 2025
+905 −57
Merged

feat: Add dark mode support and CSS improvements #15753

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
2c63266
feat: Add dark mode support and CSS improvements
White-Devil2839 Nov 18, 2025
f48de5b
Merge branch 'master' into master
vkarpov15 Nov 25, 2025
49200a1
Fix: Requested changes
White-Devil2839 Nov 26, 2025
3f5e6e9
Update docs/api_split.pug
vkarpov15 Dec 3, 2025
dc35cfa
Update API CSS link in api_split.pug
vkarpov15 Dec 3, 2025
fddbf21
Change logo text color and adjust theme toggle position
vkarpov15 Dec 3, 2025
8af7b0b
Remove cache-busting query parameters from CSS links
vkarpov15 Dec 3, 2025
72150d3
Adjust theme toggle button position
vkarpov15 Dec 3, 2025
17d3adf
Refactor theme toggle functions for improved clarity
vkarpov15 Dec 4, 2025
8144b3f
Refactor theme styles for dark and light modes
vkarpov15 Dec 4, 2025
5bbe4ad
Refactor dark mode styles for syntax highlighting
vkarpov15 Dec 4, 2025
032ac69
Refactor theme toggle logic for body class
vkarpov15 Dec 4, 2025
68757db
Update docs/css/github.css
vkarpov15 Dec 4, 2025
3398f0c
Update docs/css/mongoose5.css
vkarpov15 Dec 4, 2025
e2464af
Update docs/js/theme-toggle.js
vkarpov15 Dec 4, 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
103 changes: 102 additions & 1 deletion docs/css/api.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,28 @@
height: 100%;
padding-bottom: 10px;
overflow-y: auto;
background-color: var(--menu-bg, #fafafa);
border-left: 1px solid var(--border-color, #ddd);
scrollbar-width: thin;
scrollbar-color: var(--border-color, #ddd) var(--menu-bg, #fafafa);
transition: background-color 0.3s ease, border-color 0.3s ease;
}

.api-nav::-webkit-scrollbar {
width: 8px;
}

.api-nav::-webkit-scrollbar-track {
background: var(--menu-bg, #fafafa);
}

.api-nav::-webkit-scrollbar-thumb {
background-color: var(--border-color, #ddd);
border-radius: 4px;
}

.api-nav::-webkit-scrollbar-thumb:hover {
background-color: var(--text-muted, #777);
}

.api-nav .nav-item-title {
Expand All @@ -24,7 +46,18 @@
}

.api-nav a {
color: #777;
color: var(--text-muted, #777);
transition: color 0.2s ease;
}

.api-nav a:hover {
color: var(--link-color, #0971B2);
}

.api-nav a:focus-visible {
outline: 3px solid var(--focus-ring, #0971B2);
outline-offset: 2px;
border-radius: 2px;
}

.api-nav .nav-item-sub {
Expand Down Expand Up @@ -54,12 +87,47 @@
margin-top: 3em;
}

/* Responsive API navigation */
@media (max-width: 1785px) {
.api-nav {
display: none;
}
}

/* Tablet: Show API nav as collapsible sidebar */
@media (min-width: 1400px) and (max-width: 1785px) {
.api-nav {
display: block;
left: auto;
right: 0;
width: 280px;
z-index: 10;
}
}

/* Mobile: API nav as bottom sheet or hidden */
@media (max-width: 1400px) {
.api-nav {
display: none;
}

/* Optionally show as bottom sheet on mobile */
.api-nav.mobile-open {
display: block;
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: auto;
height: 50vh;
width: 100%;
border-left: none;
border-top: 1px solid var(--border-color, #ddd);
border-radius: 8px 8px 0 0;
box-shadow: 0 -2px 8px var(--shadow, rgba(0, 0, 0, 0.1));
}
}

ul {
margin-top: -10px;
}
Expand Down Expand Up @@ -166,4 +234,37 @@ hr.separate-api {

.deprecated {
color: #ff0000;
font-weight: 600;
}

/* Accessibility improvements */
.method-type:focus-visible,
.api-nav .nav-item-title:focus-visible {
outline: 3px solid var(--focus-ring, #0971B2);
outline-offset: 2px;
border-radius: 2px;
}

/* 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);
}

.api-nav a {
color: var(--text-muted, #888);
}

.api-nav a:hover {
color: var(--link-color, #4a9eff);
}

.native-ad {
background-color: var(--bg-secondary, #2d2d2d);
}

.native-ad a {
color: var(--text-primary, #e0e0e0);
}
}
208 changes: 192 additions & 16 deletions docs/css/github.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,45 @@
code {
background-color: #eee;
padding: 2px 4px;
background-color: var(--code-bg, #eee);
padding: 2px 6px;
font-size: 0.9em;
color: #800;
color: var(--link-color, #800);
border-radius: 4px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
transition: background-color 0.3s ease, color 0.3s ease;
}

pre code {
background-color: transparent;
padding: 0;
font-size: 1em;
color: #222;
color: var(--code-text, #222);
}

pre {
display: block;
padding: 9.5px;
margin: 10px 0 10px;
padding: 12px 16px;
margin: 16px 0;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
line-height: 1.6;
color: var(--code-text, #333);
word-break: break-word;
overflow-wrap: break-word;
overflow-x: auto;
background-color: var(--code-bg, #f5f5f5);
border: 1px solid var(--border-color, #ccc);
border-radius: 6px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
box-shadow: 0 1px 3px var(--shadow, rgba(0, 0, 0, 0.1));
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Improve code block copy functionality */
pre {
position: relative;
}

pre:hover {
box-shadow: 0 2px 6px var(--shadow, rgba(0, 0, 0, 0.15));
}

/*
Expand All @@ -38,9 +52,10 @@ github.com style (c) Vasily Polovnyov <[email protected]>
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;
color: var(--code-text, #333);
background: var(--code-bg, #f8f8f8);
-webkit-text-size-adjust: none;
transition: background-color 0.3s ease, color 0.3s ease;
}

.hljs-comment,
Expand Down Expand Up @@ -152,3 +167,164 @@ github.com style (c) Vasily Polovnyov <[email protected]>
.hljs-chunk {
color: #aaa;
}

/* Dark mode support for syntax highlighting */
.code-theme-dark code {
background-color: var(--code-bg, #2d2d2d);
color: var(--link-color, #4a9eff);
}

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

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

.code-theme-dark .hljs-comment,
.code-theme-dark .diff .hljs-header,
.code-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 {
color: #569cd6;
font-weight: bold;
}

.code-theme-dark .hljs-number,
.code-theme-dark .hljs-hexcolor,
.code-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 {
color: #ce9178;
}

.code-theme-dark .hljs-title,
.code-theme-dark .hljs-id,
.code-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 {
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 {
color: #569cd6;
font-weight: normal;
}

.code-theme-dark .hljs-attribute,
.code-theme-dark .hljs-variable,
.code-theme-dark .lisp .hljs-body {
color: #9cdcfe;
}

.code-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 {
color: #c586c0;
}

.code-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 {
color: #808080;
font-weight: bold;
}

.code-theme-dark .hljs-deletion {
background: #5a1d1d;
color: #f48771;
}

.code-theme-dark .hljs-addition {
background: #1e3a1e;
color: #b5cea8;
}

.code-theme-dark .diff .hljs-change {
background: #2d4d2d;
color: #4ec9b0;
}

.code-theme-dark .hljs-chunk {
color: #808080;
}

/* Accessibility: Ensure sufficient contrast for code */
code,
pre,
.hljs {
/* WCAG AA compliant contrast ratios */
min-height: 1.5em;
}

/* Improve code block readability on small screens */
@media (max-width: 768px) {
pre {
font-size: 12px;
padding: 10px;
margin: 12px 0;
}

code {
font-size: 0.85em;
padding: 2px 4px;
}
}

/* Print styles for code blocks */
@media print {
pre {
border: 1px solid #ccc;
page-break-inside: avoid;
background: #f5f5f5;
color: #000;
}

code {
background: #f0f0f0;
color: #000;
}
}
Loading