Skip to content

chore(docs): prevent theme flash by respecting system preference on initial load #3840

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
styfle merged 5 commits into from
Dec 22, 2025
+342 −201
Merged

chore(docs): prevent theme flash by respecting system preference on initial load #3840

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
90cfa99
fix:system pref fix
samarJ19 Nov 21, 2025
fa7f616
fix: fixes demo page light mode error
samarJ19 Nov 21, 2025
b190e43
Update docs/demo/demo.js
samarJ19 Dec 17, 2025
32bf2fa
Update docs/js/index.js
samarJ19 Dec 17, 2025
47f96aa
Update docs/demo/demo.js
samarJ19 Dec 17, 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
41 changes: 32 additions & 9 deletions docs/_document.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,38 @@
<script>
(function () {
try {
var theme = localStorage.getItem("theme");
var STORAGE_KEY = "theme-preference";
var LEGACY_KEY = "theme";
var stored = localStorage.getItem(STORAGE_KEY) || localStorage.getItem(LEGACY_KEY);
var preference = stored === "dark" || stored === "light" || stored === "system" ? stored : "system";
var prefersDark =
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches;
if (theme === "dark" || (!theme && prefersDark)) {
var shouldUseDark = prefersDark;

if (preference === "dark") {
shouldUseDark = true;
} else if (preference === "light") {
shouldUseDark = false;
}

if (shouldUseDark) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}

document.documentElement.setAttribute("data-theme-preference", preference);
document.documentElement.setAttribute(
"data-theme",
shouldUseDark ? "dark" : "light",
);

localStorage.setItem(STORAGE_KEY, preference);
if (preference === "system") {
localStorage.removeItem(LEGACY_KEY);
} else {
localStorage.setItem(LEGACY_KEY, preference);
}
} catch (e) {}
})();
Expand Down Expand Up @@ -420,15 +446,12 @@ <h1 class="text-5xl font-bold text-text-light dark:text-text-dark">
</h1>
<button
id="theme-toggle"
aria-label="Toggle dark mode"
data-theme-mode="system"
aria-label="Switch theme"
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"
>
<span class="material-icons dark:hidden">dark_mode</span>
<span class="dark:hidden text-sm font-medium">Dark Mode</span>
<span class="material-icons hidden dark:inline">light_mode</span>
<span class="hidden dark:inline text-sm font-medium"
>Light Mode</span
>
<span class="material-icons" data-theme-icon>brightness_auto</span>
<span class="text-sm font-medium" data-theme-text>System</span>
</button>
</div>

Expand Down
116 changes: 27 additions & 89 deletions docs/demo/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ html, body {
margin: 0;
padding: 0;
font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #1F2937;
background-color: #FFFFFF;
color: var(--text-color);
background-color: var(--background-color);
height: 100%;
overflow: auto;
transition: background-color 0.3s ease, color 0.3s ease;
Expand All @@ -21,7 +21,7 @@ header {
align-items: center;
height: 68px;
box-sizing: border-box;
border-bottom: 1px solid #E5E7EB;
border-bottom: 1px solid var(--border-color);
gap: 16px;
}

Expand All @@ -45,8 +45,9 @@ header h1 {
font-size: 14px;
}


.other-demos a {
color: #6B7280;
color: var(--subtle-text-color);
text-decoration: none;
transition: color 0.2s ease;
}
Expand All @@ -56,9 +57,10 @@ header h1 {
}

.other-demos .separator {
color: #9CA3AF;
color: var(--subtle-text-color);
}


.theme-toggle {
margin-left: 16px;
display: flex;
Expand All @@ -68,7 +70,7 @@ header h1 {
border: none;
border-radius: 8px;
background-color: transparent;
color: #6B7280;
color: var(--subtle-text-color);
cursor: pointer;
font-family: inherit;
font-size: 14px;
Expand All @@ -77,29 +79,14 @@ header h1 {
}

.theme-toggle:hover {
background-color: #F3F4F6;
color: #1F2937;
background-color: var(--code-bg-color);
color: var(--text-color);
}

.theme-toggle .material-icons {
font-size: 20px;
}

.theme-toggle .dark-icon,
.theme-toggle .dark-text {
display: none;
}

body.dark .theme-toggle .light-icon,
body.dark .theme-toggle .light-text {
display: none;
}

body.dark .theme-toggle .dark-icon,
body.dark .theme-toggle .dark-text {
display: inline;
}

.containers {
display: flex;
height: calc(100vh - 68px);
Expand All @@ -116,24 +103,28 @@ body.dark .theme-toggle .dark-text {
box-sizing: border-box;
}


.label {
padding: 8px 12px;
background-color: #F3F4F6;
border: 1px solid #E5E7EB;
background-color: var(--code-bg-color);
border: 1px solid var(--border-color);
border-radius: 8px 8px 0 0;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
color: var(--text-color);
}


.label select,
.label button {
padding: 4px 8px;
border-radius: 4px;
border: 1px solid #D1D5DB;
background-color: #FFFFFF;
border: 1px solid var(--border-color);
background-color: var(--background-color);
color: var(--text-color);
font-size: 13px;
cursor: pointer;
transition: border-color 0.2s ease;
Expand All @@ -153,16 +144,17 @@ body.dark .theme-toggle .dark-text {
text-decoration: underline;
}


.pane, .inputPane {
padding: 12px;
border: 1px solid #E5E7EB;
border: 1px solid var(--border-color);
border-top: none;
border-radius: 0 0 8px 8px;
overflow: auto;
flex-grow: 1;
flex-shrink: 1;
background-color: #FFFFFF;
color: #1F2937;
background-color: var(--background-color);
color: var(--text-color);
transition: background-color 0.3s ease, border-color 0.3s ease;
}

Expand All @@ -185,7 +177,7 @@ body.dark .theme-toggle .dark-text {
justify-content: center;
height: 100vh;
font-size: 18px;
color: #6B7280;
color: var(--subtle-text-color);
}

.error {
Expand All @@ -209,73 +201,19 @@ body.dark .theme-toggle .dark-text {
color: #3B82F6;
}

/* Dark mode styles */
body.dark {
color: #F9FAFB;
background-color: #111827;
}

body.dark header {
border-bottom-color: #374151;
}

body.dark .other-demos a {
color: #9CA3AF;
}

body.dark .other-demos a:hover {
color: #3B82F6;
}

body.dark .other-demos .separator {
color: #6B7280;
}

body.dark .theme-toggle {
color: #9CA3AF;
}

body.dark .theme-toggle:hover {
background-color: #1F2937;
color: #F9FAFB;
}

body.dark .label {
background-color: #1F2937;
border-color: #374151;
color: #F9FAFB;
}

body.dark .label select,
body.dark .label button {
background-color: #111827;
color: #F9FAFB;
border-color: #374151;
}

body.dark .label select:hover,
body.dark .label button:hover {
border-color: #3B82F6;
}

body.dark .pane,
body.dark .inputPane {
background-color: #1F2937;
border-color: #374151;
color: #F9FAFB;
}

body.dark .error {
/* Dark mode specific overrides */
html.dark .error {
background-color: #2c1d1d !important;
border-color: #F87171 !important;
color: #FCA5A5;
}

body.dark .loadingError {
html.dark .loadingError {
background-color: #2c1d1d;
color: #FCA5A5;
}

body.dark #loading {
html.dark #loading {
color: #9CA3AF;
}
Loading