Skip to content

Commit c5a4976

Browse files
jesseabordenJesse Borden
jesseaborden
and
Jesse Borden
authored
fix(theme): Set theme before body content is parsed to avoid flash of light theme in dark mode. (#1063)
Co-authored-by: Jesse Borden <[email protected]>
1 parent 7e91935 commit c5a4976

File tree

2 files changed

+46
-42
lines changed

2 files changed

+46
-42
lines changed

‎_layouts/new-layouts/base.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,10 @@
169169
</head>
170170

171171
<body>
172+
<script>
173+
// Set theme before body content to avoid flash of light styles in dark mode
174+
setColorScheme(getStoredScheme())
175+
</script>
172176
<main>
173177
{% include new-includes/header/header.html %} {{content}} {% include
174178
new-includes/footer/footer.html %}

‎assets/javascripts/new-javascripts/color-scheme-toggle.js

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,125 @@
1-
document.addEventListener('DOMContentLoaded', initColorScheme);
1+
document.addEventListener('DOMContentLoaded', initColorScheme)
22

33
const ColorScheme = {
44
auto: 'auto',
55
light: 'light',
66
dark: 'dark',
7-
};
7+
}
88

9-
const localStorageKey = 'developer.setting.preferredColorScheme';
9+
const localStorageKey = 'developer.setting.preferredColorScheme'
1010

1111
const supportsAutoColorScheme = (() => {
12-
return typeof window.matchMedia !== 'undefined' &&
12+
return (
13+
typeof window.matchMedia !== 'undefined' &&
1314
['light', 'dark', 'no-preference'].some(
14-
(scheme) => window.matchMedia(`(prefers-color-scheme: ${scheme})`).matches
15-
);
16-
})();
15+
(scheme) =>
16+
window.matchMedia(`(prefers-color-scheme: ${scheme})`).matches,
17+
)
18+
)
19+
})()
1720

1821
if (!supportsAutoColorScheme) {
19-
document.getElementById('scheme-auto-wrapper')?.remove();
22+
document.getElementById('scheme-auto-wrapper')?.remove()
2023
}
2124

2225
function initColorScheme() {
23-
setColorScheme(getStoredScheme());
24-
25-
const toggle = getToggle();
26+
const toggle = getToggle()
2627
if (toggle && toggle.value !== getStoredScheme()) {
27-
toggle.value = getStoredScheme();
28+
toggle.value = getStoredScheme()
2829
}
2930

3031
getToggleForm()?.addEventListener('change', (e) => {
31-
setColorScheme(e.target.value);
32-
});
32+
setColorScheme(e.target.value)
33+
})
3334
}
3435

3536
function systemPrefersLight() {
36-
return window.matchMedia('(prefers-color-scheme: light)');
37+
return window.matchMedia('(prefers-color-scheme: light)')
3738
}
3839

3940
function systemPrefersDark() {
40-
return window.matchMedia('(prefers-color-scheme: dark)');
41+
return window.matchMedia('(prefers-color-scheme: dark)')
4142
}
4243

4344
function isSystemDark() {
44-
return systemPrefersDark().matches;
45+
return systemPrefersDark().matches
4546
}
4647

4748
function setColorScheme(value) {
4849
if (!Object.values(ColorScheme).includes(value)) {
49-
value = supportsAutoColorScheme ? ColorScheme.auto : ColorScheme.light;
50+
value = supportsAutoColorScheme ? ColorScheme.auto : ColorScheme.light
5051
}
5152

5253
if (value === ColorScheme.auto) {
53-
updateScheme(isSystemDark() ? ColorScheme.dark : ColorScheme.light, value);
54+
updateScheme(isSystemDark() ? ColorScheme.dark : ColorScheme.light, value)
5455
} else {
55-
updateScheme(value);
56+
updateScheme(value)
5657
}
5758
}
5859

5960
function updateScheme(scheme, storedValue = scheme) {
6061
if (getStoredScheme() !== storedValue) {
61-
saveScheme(storedValue);
62+
saveScheme(storedValue)
6263
}
6364

6465
if (getCurrentScheme() !== scheme) {
65-
document.body.setAttribute('data-color-scheme', scheme);
66+
document.body.setAttribute('data-color-scheme', scheme)
6667
}
6768

68-
const toggle = getToggle();
69+
const toggle = getToggle()
6970
if (toggle && toggle.value !== storedValue) {
70-
toggle.value = storedValue;
71+
toggle.value = storedValue
7172
}
7273
}
7374

7475
systemPrefersLight().addEventListener('change', (e) => {
7576
if (e.matches && getStoredScheme() === ColorScheme.auto) {
76-
const current = getCurrentScheme();
77+
const current = getCurrentScheme()
7778
if (current !== ColorScheme.light) {
78-
document.body.setAttribute('data-color-scheme', ColorScheme.light);
79+
document.body.setAttribute('data-color-scheme', ColorScheme.light)
7980
}
8081
}
81-
});
82+
})
8283

8384
systemPrefersDark().addEventListener('change', (e) => {
8485
if (e.matches && getStoredScheme() === ColorScheme.auto) {
85-
const current = getCurrentScheme();
86+
const current = getCurrentScheme()
8687
if (current !== ColorScheme.dark) {
87-
document.body.setAttribute('data-color-scheme', ColorScheme.dark);
88+
document.body.setAttribute('data-color-scheme', ColorScheme.dark)
8889
}
8990
}
90-
});
91+
})
9192

9293
window.addEventListener('storage', () => {
93-
setColorScheme(getStoredScheme());
94-
});
94+
setColorScheme(getStoredScheme())
95+
})
9596

9697
window.addEventListener('pageshow', () => {
97-
setColorScheme(getStoredScheme());
98-
});
98+
setColorScheme(getStoredScheme())
99+
})
99100

100101
function getToggleForm() {
101-
return document.getElementById('color-scheme-toggle');
102+
return document.getElementById('color-scheme-toggle')
102103
}
103104

104105
function getToggle() {
105-
return getToggleForm()?.elements['color-scheme-preference'];
106+
return getToggleForm()?.elements['color-scheme-preference']
106107
}
107108

108109
function getCurrentScheme() {
109-
return document.body.getAttribute('data-color-scheme');
110+
return document.body.getAttribute('data-color-scheme')
110111
}
111112

112113
function getStoredScheme() {
113114
try {
114-
return localStorage.getItem(localStorageKey);
115+
return localStorage.getItem(localStorageKey)
115116
} catch {
116-
return null;
117+
return null
117118
}
118119
}
119120

120121
function saveScheme(value) {
121122
try {
122-
localStorage.setItem(localStorageKey, value);
123-
} catch {
124-
}
123+
localStorage.setItem(localStorageKey, value)
124+
} catch {}
125125
}

0 commit comments

Comments
 (0)