Skip to content

Commit d84e021

Browse files
samarJ19styfle
samarJ19
and
styfle
authored
chore(docs): prevent theme flash by respecting system preference on initial load (#3840)
* fix:system pref fix * fix: fixes demo page light mode error * Update docs/demo/demo.js Co-authored-by: Steven <[email protected]> * Update docs/js/index.js Co-authored-by: Steven <[email protected]> * Update docs/demo/demo.js Co-authored-by: Steven <[email protected]> --------- Co-authored-by: Steven <[email protected]>
1 parent c25dcf9 commit d84e021

File tree

6 files changed

+342
-201
lines changed

6 files changed

+342
-201
lines changed

‎docs/_document.html‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,38 @@
99
<script>
1010
(function () {
1111
try {
12-
var theme = localStorage.getItem("theme");
12+
var STORAGE_KEY = "theme-preference";
13+
var LEGACY_KEY = "theme";
14+
var stored = localStorage.getItem(STORAGE_KEY) || localStorage.getItem(LEGACY_KEY);
15+
var preference = stored === "dark" || stored === "light" || stored === "system" ? stored : "system";
1316
var prefersDark =
1417
window.matchMedia &&
1518
window.matchMedia("(prefers-color-scheme: dark)").matches;
16-
if (theme === "dark" || (!theme && prefersDark)) {
19+
var shouldUseDark = prefersDark;
20+
21+
if (preference === "dark") {
22+
shouldUseDark = true;
23+
} else if (preference === "light") {
24+
shouldUseDark = false;
25+
}
26+
27+
if (shouldUseDark) {
1728
document.documentElement.classList.add("dark");
29+
} else {
30+
document.documentElement.classList.remove("dark");
31+
}
32+
33+
document.documentElement.setAttribute("data-theme-preference", preference);
34+
document.documentElement.setAttribute(
35+
"data-theme",
36+
shouldUseDark ? "dark" : "light",
37+
);
38+
39+
localStorage.setItem(STORAGE_KEY, preference);
40+
if (preference === "system") {
41+
localStorage.removeItem(LEGACY_KEY);
42+
} else {
43+
localStorage.setItem(LEGACY_KEY, preference);
1844
}
1945
} catch (e) {}
2046
})();
@@ -420,15 +446,12 @@ <h1 class="text-5xl font-bold text-text-light dark:text-text-dark">
420446
</h1>
421447
<button
422448
id="theme-toggle"
423-
aria-label="Toggle dark mode"
449+
data-theme-mode="system"
450+
aria-label="Switch theme"
424451
class="flex items-center gap-2 px-4 py-2 rounded-lg text-subtle-light dark:text-subtle-dark hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
425452
>
426-
<span class="material-icons dark:hidden">dark_mode</span>
427-
<span class="dark:hidden text-sm font-medium">Dark Mode</span>
428-
<span class="material-icons hidden dark:inline">light_mode</span>
429-
<span class="hidden dark:inline text-sm font-medium"
430-
>Light Mode</span
431-
>
453+
<span class="material-icons" data-theme-icon>brightness_auto</span>
454+
<span class="text-sm font-medium" data-theme-text>System</span>
432455
</button>
433456
</div>
434457

‎docs/demo/demo.css‎

Lines changed: 27 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ html, body {
22
margin: 0;
33
padding: 0;
44
font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
5-
color: #1F2937;
6-
background-color: #FFFFFF;
5+
color: var(--text-color);
6+
background-color: var(--background-color);
77
height: 100%;
88
overflow: auto;
99
transition: background-color 0.3s ease, color 0.3s ease;
@@ -21,7 +21,7 @@ header {
2121
align-items: center;
2222
height: 68px;
2323
box-sizing: border-box;
24-
border-bottom: 1px solid #E5E7EB;
24+
border-bottom: 1px solid var(--border-color);
2525
gap: 16px;
2626
}
2727

@@ -45,8 +45,9 @@ header h1 {
4545
font-size: 14px;
4646
}
4747

48+
4849
.other-demos a {
49-
color: #6B7280;
50+
color: var(--subtle-text-color);
5051
text-decoration: none;
5152
transition: color 0.2s ease;
5253
}
@@ -56,9 +57,10 @@ header h1 {
5657
}
5758

5859
.other-demos .separator {
59-
color: #9CA3AF;
60+
color: var(--subtle-text-color);
6061
}
6162

63+
6264
.theme-toggle {
6365
margin-left: 16px;
6466
display: flex;
@@ -68,7 +70,7 @@ header h1 {
6870
border: none;
6971
border-radius: 8px;
7072
background-color: transparent;
71-
color: #6B7280;
73+
color: var(--subtle-text-color);
7274
cursor: pointer;
7375
font-family: inherit;
7476
font-size: 14px;
@@ -77,29 +79,14 @@ header h1 {
7779
}
7880

7981
.theme-toggle:hover {
80-
background-color: #F3F4F6;
81-
color: #1F2937;
82+
background-color: var(--code-bg-color);
83+
color: var(--text-color);
8284
}
8385

8486
.theme-toggle .material-icons {
8587
font-size: 20px;
8688
}
8789

88-
.theme-toggle .dark-icon,
89-
.theme-toggle .dark-text {
90-
display: none;
91-
}
92-
93-
body.dark .theme-toggle .light-icon,
94-
body.dark .theme-toggle .light-text {
95-
display: none;
96-
}
97-
98-
body.dark .theme-toggle .dark-icon,
99-
body.dark .theme-toggle .dark-text {
100-
display: inline;
101-
}
102-
10390
.containers {
10491
display: flex;
10592
height: calc(100vh - 68px);
@@ -116,24 +103,28 @@ body.dark .theme-toggle .dark-text {
116103
box-sizing: border-box;
117104
}
118105

106+
119107
.label {
120108
padding: 8px 12px;
121-
background-color: #F3F4F6;
122-
border: 1px solid #E5E7EB;
109+
background-color: var(--code-bg-color);
110+
border: 1px solid var(--border-color);
123111
border-radius: 8px 8px 0 0;
124112
font-size: 14px;
125113
font-weight: 500;
126114
display: flex;
127115
align-items: center;
128116
gap: 8px;
117+
color: var(--text-color);
129118
}
130119

120+
131121
.label select,
132122
.label button {
133123
padding: 4px 8px;
134124
border-radius: 4px;
135-
border: 1px solid #D1D5DB;
136-
background-color: #FFFFFF;
125+
border: 1px solid var(--border-color);
126+
background-color: var(--background-color);
127+
color: var(--text-color);
137128
font-size: 13px;
138129
cursor: pointer;
139130
transition: border-color 0.2s ease;
@@ -153,16 +144,17 @@ body.dark .theme-toggle .dark-text {
153144
text-decoration: underline;
154145
}
155146

147+
156148
.pane, .inputPane {
157149
padding: 12px;
158-
border: 1px solid #E5E7EB;
150+
border: 1px solid var(--border-color);
159151
border-top: none;
160152
border-radius: 0 0 8px 8px;
161153
overflow: auto;
162154
flex-grow: 1;
163155
flex-shrink: 1;
164-
background-color: #FFFFFF;
165-
color: #1F2937;
156+
background-color: var(--background-color);
157+
color: var(--text-color);
166158
transition: background-color 0.3s ease, border-color 0.3s ease;
167159
}
168160

@@ -185,7 +177,7 @@ body.dark .theme-toggle .dark-text {
185177
justify-content: center;
186178
height: 100vh;
187179
font-size: 18px;
188-
color: #6B7280;
180+
color: var(--subtle-text-color);
189181
}
190182

191183
.error {
@@ -209,73 +201,19 @@ body.dark .theme-toggle .dark-text {
209201
color: #3B82F6;
210202
}
211203

212-
/* Dark mode styles */
213-
body.dark {
214-
color: #F9FAFB;
215-
background-color: #111827;
216-
}
217-
218-
body.dark header {
219-
border-bottom-color: #374151;
220-
}
221-
222-
body.dark .other-demos a {
223-
color: #9CA3AF;
224-
}
225-
226-
body.dark .other-demos a:hover {
227-
color: #3B82F6;
228-
}
229-
230-
body.dark .other-demos .separator {
231-
color: #6B7280;
232-
}
233-
234-
body.dark .theme-toggle {
235-
color: #9CA3AF;
236-
}
237-
238-
body.dark .theme-toggle:hover {
239-
background-color: #1F2937;
240-
color: #F9FAFB;
241-
}
242-
243-
body.dark .label {
244-
background-color: #1F2937;
245-
border-color: #374151;
246-
color: #F9FAFB;
247-
}
248-
249-
body.dark .label select,
250-
body.dark .label button {
251-
background-color: #111827;
252-
color: #F9FAFB;
253-
border-color: #374151;
254-
}
255-
256-
body.dark .label select:hover,
257-
body.dark .label button:hover {
258-
border-color: #3B82F6;
259-
}
260-
261-
body.dark .pane,
262-
body.dark .inputPane {
263-
background-color: #1F2937;
264-
border-color: #374151;
265-
color: #F9FAFB;
266-
}
267204

268-
body.dark .error {
205+
/* Dark mode specific overrides */
206+
html.dark .error {
269207
background-color: #2c1d1d !important;
270208
border-color: #F87171 !important;
271209
color: #FCA5A5;
272210
}
273211

274-
body.dark .loadingError {
212+
html.dark .loadingError {
275213
background-color: #2c1d1d;
276214
color: #FCA5A5;
277215
}
278216

279-
body.dark #loading {
217+
html.dark #loading {
280218
color: #9CA3AF;
281219
}

0 commit comments

Comments
 (0)