Skip to content

Commit d7114b5

Browse files
LessUpLessUp
committed
fix(pages): add proper light/dark mode support for Git Pages theme
- Define separate CSS variables for light and dark themes - Use :root for light mode, [data-theme="dark"] for dark mode - Add prefers-color-scheme media query for system preference fallback - Fix syntax highlighting colors for both modes (VS Code dark vs standard light) - Fix table zebra striping for light mode visibility - Remove incorrect color_scheme setting from _config.yml Users can now toggle between modes via the nav bar button, and all content is readable in both themes.
1 parent 7af6a94 commit d7114b5

2 files changed

Lines changed: 160 additions & 27 deletions

File tree

‎_config.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
remote_theme: just-the-docs/just-the-docs@v0.8.2
22

3+
# Theme settings
4+
# Dark/light mode toggle is available by default in the nav bar
5+
# Custom colors are defined in _sass/custom/custom.scss
6+
37
plugins:
48
- jekyll-remote-theme
59
- jekyll-seo-tag

‎_sass/custom/custom.scss‎

Lines changed: 156 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,92 @@
66
// ============================================
77
// COLOR VARIABLES (NVIDIA + Dark Tech Theme)
88
// ============================================
9+
10+
// Primary brand color - NVIDIA Green
11+
$nvidia-green: #76B900;
12+
$nvidia-green-light: #8FD917;
13+
$nvidia-green-dark: #5A8F00;
14+
15+
// Accent colors
16+
$tech-teal: #00D4AA;
17+
$tech-blue: #00A8E8;
18+
$tech-purple: #9D4EDD;
19+
$tech-orange: #FF8500;
20+
21+
// ============================================
22+
// LIGHT THEME (default)
23+
// ============================================
924
:root {
10-
// Primary brand color - NVIDIA Green
11-
--nvidia-green: #76B900;
12-
--nvidia-green-light: #8FD917;
13-
--nvidia-green-dark: #5A8F00;
14-
15-
// Accent colors
16-
--tech-teal: #00D4AA;
17-
--tech-blue: #00A8E8;
18-
--tech-purple: #9D4EDD;
19-
--tech-orange: #FF8500;
20-
25+
// Backgrounds - light mode
26+
--bg-primary: #FFFFFF;
27+
--bg-secondary: #F6F8FA;
28+
--bg-tertiary: #EAEEF2;
29+
--bg-elevated: #FFFFFF;
30+
31+
// Text colors - light mode
32+
--text-primary: #1F2328;
33+
--text-secondary: #57606A;
34+
--text-muted: #8B949E;
35+
36+
// Border colors - light mode
37+
--border-subtle: #D0D7DE;
38+
--border-default: #EAEEF2;
39+
40+
// Brand colors (same for both modes)
41+
--nvidia-green: #{$nvidia-green};
42+
--nvidia-green-light: #{$nvidia-green-light};
43+
--nvidia-green-dark: #{$nvidia-green-dark};
44+
--tech-teal: #{$tech-teal};
45+
--tech-blue: #{$tech-blue};
46+
--tech-purple: #{$tech-purple};
47+
--tech-orange: #{$tech-orange};
48+
49+
// Code block colors - light mode
50+
--code-bg: #F6F8FA;
51+
--code-text: #1F2328;
52+
}
53+
54+
// ============================================
55+
// DARK THEME
56+
// ============================================
57+
[data-theme="dark"],
58+
html[data-theme="dark"] {
2159
// Dark theme backgrounds
2260
--bg-primary: #0D1117;
2361
--bg-secondary: #161B22;
2462
--bg-tertiary: #21262D;
2563
--bg-elevated: #1C2128;
26-
27-
// Text colors
64+
65+
// Text colors - dark mode
2866
--text-primary: #E6EDF3;
2967
--text-secondary: #8B949E;
3068
--text-muted: #6E7681;
31-
32-
// Border colors
69+
70+
// Border colors - dark mode
3371
--border-subtle: #30363D;
3472
--border-default: #21262D;
73+
74+
// Code block colors - dark mode
75+
--code-bg: #161B22;
76+
--code-text: #E6EDF3;
77+
}
78+
79+
// Fallback: Also apply dark theme at :root for backwards compatibility
80+
// This ensures dark styles work even without data-theme attribute
81+
@media (prefers-color-scheme: dark) {
82+
:root:not([data-theme="light"]) {
83+
--bg-primary: #0D1117;
84+
--bg-secondary: #161B22;
85+
--bg-tertiary: #21262D;
86+
--bg-elevated: #1C2128;
87+
--text-primary: #E6EDF3;
88+
--text-secondary: #8B949E;
89+
--text-muted: #6E7681;
90+
--border-subtle: #30363D;
91+
--border-default: #21262D;
92+
--code-bg: #161B22;
93+
--code-text: #E6EDF3;
94+
}
3595
}
3696

3797
// ============================================
@@ -159,18 +219,72 @@ code {
159219
margin-right: 1rem !important;
160220
}
161221

162-
// Syntax highlighting - customized for CUDA
222+
// Syntax highlighting - CUDA optimized with light/dark support
223+
// Dark mode syntax colors (default for code blocks)
224+
$code-comment-dark: #6A9955;
225+
$code-keyword-dark: #569CD6;
226+
$code-string-dark: #CE9178;
227+
$code-number-dark: #B5CEA8;
228+
$code-function-dark: #DCDCAA;
229+
$code-punctuation-dark: #D4D4D4;
230+
$code-preprocessor-dark: #9CDCFE;
231+
$code-type-dark: #4EC9B0;
232+
$code-variable-dark: #9CDCFE;
233+
234+
// Light mode syntax colors
235+
$code-comment-light: #008000;
236+
$code-keyword-light: #0000FF;
237+
$code-string-light: #A31515;
238+
$code-number-light: #098658;
239+
$code-function-light: #795E26;
240+
$code-punctuation-light: #333333;
241+
$code-preprocessor-light: #AF00DB;
242+
$code-type-light: #267F99;
243+
$code-variable-light: #001080;
244+
163245
.highlight {
164-
.c, .cm, .c1, .cp { color: #6A9955; } // Comments
165-
.k, .kc, .kd, .kn, .kr { color: #569CD6; } // Keywords
166-
.s, .sb, .sc, .sd, .s2 { color: #CE9178; } // Strings
167-
.mi, .mf, .mh, .il { color: #B5CEA8; } // Numbers
168-
.n, .nf, .fm { color: #DCDCAA; } // Functions
169-
.p { color: #D4D4D4; } // Punctuation
170-
.o { color: #D4D4D4; } // Operators
171-
.cpp, .cpf { color: #9CDCFE; } // Preprocessor
172-
.kt, .nc { color: #4EC9B0; } // Types/Classes
173-
.nv { color: #9CDCFE; } // Variables
246+
// Dark mode syntax (default)
247+
.c, .cm, .c1, .cp { color: $code-comment-dark; }
248+
.k, .kc, .kd, .kn, .kr { color: $code-keyword-dark; }
249+
.s, .sb, .sc, .sd, .s2 { color: $code-string-dark; }
250+
.mi, .mf, .mh, .il { color: $code-number-dark; }
251+
.n, .nf, .fm { color: $code-function-dark; }
252+
.p { color: $code-punctuation-dark; }
253+
.o { color: $code-punctuation-dark; }
254+
.cpp, .cpf { color: $code-preprocessor-dark; }
255+
.kt, .nc { color: $code-type-dark; }
256+
.nv { color: $code-variable-dark; }
257+
}
258+
259+
// Light mode syntax highlighting
260+
[data-theme="light"] .highlight,
261+
html[data-theme="light"] .highlight {
262+
.c, .cm, .c1, .cp { color: $code-comment-light; }
263+
.k, .kc, .kd, .kn, .kr { color: $code-keyword-light; }
264+
.s, .sb, .sc, .sd, .s2 { color: $code-string-light; }
265+
.mi, .mf, .mh, .il { color: $code-number-light; }
266+
.n, .nf, .fm { color: $code-function-light; }
267+
.p { color: $code-punctuation-light; }
268+
.o { color: $code-punctuation-light; }
269+
.cpp, .cpf { color: $code-preprocessor-light; }
270+
.kt, .nc { color: $code-type-light; }
271+
.nv { color: $code-variable-light; }
272+
}
273+
274+
// System preference light mode
275+
@media (prefers-color-scheme: light) {
276+
:root:not([data-theme="dark"]) .highlight {
277+
.c, .cm, .c1, .cp { color: $code-comment-light; }
278+
.k, .kc, .kd, .kn, .kr { color: $code-keyword-light; }
279+
.s, .sb, .sc, .sd, .s2 { color: $code-string-light; }
280+
.mi, .mf, .mh, .il { color: $code-number-light; }
281+
.n, .nf, .fm { color: $code-function-light; }
282+
.p { color: $code-punctuation-light; }
283+
.o { color: $code-punctuation-light; }
284+
.cpp, .cpf { color: $code-preprocessor-light; }
285+
.kt, .nc { color: $code-type-light; }
286+
.nv { color: $code-variable-light; }
287+
}
174288
}
175289

176290
// Copy code button
@@ -215,7 +329,22 @@ table {
215329
}
216330

217331
tr:nth-child(even) {
218-
background-color: rgba(255, 255, 255, 0.02) !important;
332+
background-color: rgba(128, 128, 128, 0.05) !important;
333+
}
334+
335+
// Dark mode: darker stripe
336+
[data-theme="dark"] & {
337+
tr:nth-child(even) {
338+
background-color: rgba(255, 255, 255, 0.02) !important;
339+
}
340+
}
341+
342+
@media (prefers-color-scheme: dark) {
343+
:root:not([data-theme="light"]) & {
344+
tr:nth-child(even) {
345+
background-color: rgba(255, 255, 255, 0.02) !important;
346+
}
347+
}
219348
}
220349

221350
tr:hover {

0 commit comments

Comments
 (0)