Skip to content

Commit 174afab

Browse files
committed
fix(theme): prevent theme flicker on page load
- Move theme initialization script to right after the body tag is available - Apply stored theme synchronously before content renders - Fixes flash of light theme
1 parent e64be02 commit 174afab

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

site/lib/src/layouts/dash_layout.dart

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,23 @@ ga('send', 'pageview');
190190
'class': [?bodyClass, ...defaultBodyClasses].toClasses,
191191
},
192192
),
193+
// The theme setting logic should remain before other scripts to
194+
// avoid a flash of the initial theme on load.
195+
raw('''
196+
<script>
197+
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
198+
199+
const storedTheme = window.localStorage.getItem('theme') ?? 'light-mode';
200+
if (storedTheme === 'auto-mode') {
201+
document.body.classList.add(
202+
'auto-mode',
203+
prefersDarkMode.matches ? 'dark-mode' : 'light-mode',
204+
);
205+
} else {
206+
document.body.classList.add(storedTheme);
207+
}
208+
</script>
209+
'''),
193210
raw('''
194211
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5VSZM5J" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
195212
'''),
@@ -225,23 +242,6 @@ ga('send', 'pageview');
225242
]),
226243
const DashFooter(),
227244
]),
228-
// The theme setting logic should remain before other scripts to
229-
// avoid a flash of the initial theme on load.
230-
raw('''
231-
<script>
232-
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
233-
234-
const storedTheme = window.localStorage.getItem('theme') ?? 'light-mode';
235-
if (storedTheme === 'auto-mode') {
236-
document.body.classList.add(
237-
'auto-mode',
238-
prefersDarkMode.matches ? 'dark-mode' : 'light-mode',
239-
);
240-
} else {
241-
document.body.classList.add(storedTheme);
242-
}
243-
</script>
244-
'''),
245245
GlobalScripts(),
246246
],
247247
);

0 commit comments

Comments
 (0)