Skip to content

Commit 17fa1cb

Browse files
authored
Fix: Theme flicker on page change (#12673)
Fix for theme flash issue that we recently fixed on dart's website dart-lang/site-www#7007 **Before** https://github.com/user-attachments/assets/7629b755-fe7f-4f40-9664-e285ed336a23 **After** https://github.com/user-attachments/assets/db3b20f9-0cc7-4642-960b-e73de152383b
1 parent 7af86bd commit 17fa1cb

File tree

2 files changed

+18
-18
lines changed

2 files changed

+18
-18
lines changed

site/lib/src/layouts/dash_layout.dart

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,23 @@ ga('send', 'pageview');
167167
},
168168
),
169169
if (bodyClass != null) Document.body(attributes: {'class': bodyClass}),
170+
// The theme setting logic should remain before other scripts to
171+
// avoid a flash of the initial theme on load.
172+
raw('''
173+
<script>
174+
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
175+
176+
const storedTheme = window.localStorage.getItem('theme') ?? 'light-mode';
177+
if (storedTheme === 'auto-mode') {
178+
document.body.classList.add(
179+
'auto-mode',
180+
prefersDarkMode.matches ? 'dark-mode' : 'light-mode',
181+
);
182+
} else {
183+
document.body.classList.add(storedTheme);
184+
}
185+
</script>
186+
'''),
170187
if (productionBuild)
171188
raw(
172189
'<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ND4LWWZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>',
@@ -202,23 +219,6 @@ ga('send', 'pageview');
202219
]),
203220
const DashFooter(),
204221
]),
205-
// The theme setting logic should remain before other scripts to
206-
// avoid a flash of the initial theme on load.
207-
raw('''
208-
<script>
209-
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
210-
211-
const storedTheme = window.localStorage.getItem('theme') ?? 'light-mode';
212-
if (storedTheme === 'auto-mode') {
213-
document.body.classList.add(
214-
'auto-mode',
215-
prefersDarkMode.matches ? 'dark-mode' : 'light-mode',
216-
);
217-
} else {
218-
document.body.classList.add(storedTheme);
219-
}
220-
</script>
221-
'''),
222222
// Scroll the sidenav to the active item before other logic
223223
// to avoid it jumping after page load.
224224
raw('''

site/lib/src/style_hash.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
// dart format off
33

44
/// The generated hash of the `main.css` file.
5-
const generatedStylesHash = 'ZFZ+YS8Vr+JP';
5+
const generatedStylesHash = 'owxV2FisLq0C';

0 commit comments

Comments
 (0)