Skip to content

Commit ba0fc1b

Browse files
OvidOvid
committed
Ensure dark mode toggle works without flash of white (FOUC)
1 parent 4bdb0ae commit ba0fc1b

3 files changed

Lines changed: 36 additions & 6 deletions

File tree

‎root/include/header.tt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<script>
5+
// Immediate theme application to prevent flash of white
6+
(function() {
7+
const theme = localStorage.getItem('theme') ||
8+
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
9+
if (theme === 'dark') {
10+
document.documentElement.setAttribute('data-theme', 'dark');
11+
}
12+
})();
13+
</script>
414
<!-- Google tag (gtag.js) -->
515
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BVDP76N9NB"></script>
616
<script>

‎root/static/css/dark-mode.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,3 +117,27 @@ pre, code {
117117
background-color: var(--button-border);
118118
color: var(--text-color);
119119
}
120+
121+
/* Collapsible overrides */
122+
[data-theme="dark"] .collapsible-section {
123+
background-color: var(--bg-color);
124+
border-color: var(--border-color);
125+
}
126+
127+
[data-theme="dark"] .collapsible-trigger {
128+
background-color: var(--quote-bg);
129+
color: var(--text-color);
130+
}
131+
132+
[data-theme="dark"] .collapsible-short {
133+
color: var(--text-color);
134+
}
135+
136+
[data-theme="dark"] .collapsible-icon {
137+
color: var(--text-color);
138+
}
139+
140+
[data-theme="dark"] .collapsible-content {
141+
border-top-color: var(--border-color);
142+
color: var(--text-color);
143+
}

‎root/static/js/dark-mode.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,8 @@ document.addEventListener('DOMContentLoaded', function() {
33
const icon = toggle.querySelector('i');
44
const html = document.documentElement;
55

6-
// Check preference
7-
const currentTheme = localStorage.getItem('theme') ||
8-
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
9-
10-
if (currentTheme === 'dark') {
11-
html.setAttribute('data-theme', 'dark');
6+
// Sync icon with current state (set by inline script in header)
7+
if (html.getAttribute('data-theme') === 'dark') {
128
icon.classList.remove('fa-moon-o');
139
icon.classList.add('fa-sun-o');
1410
}

0 commit comments

Comments
 (0)