Skip to content

Commit 5672356

Browse files
machavalmachaval
authored
Fix dark mode flash by applying theme in blocking head script (#20)
Moves theme detection from deferred JS to an inline script in <head> that executes before first paint. Prevents the flash of light mode when user prefers or has selected dark mode.
1 parent 4a38617 commit 5672356

2 files changed

Lines changed: 13 additions & 9 deletions

File tree

‎scripts/portal_generator/assets/portal.js‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7313,15 +7313,7 @@ function clearAllVariables(slug) {
73137313
// ============================================================================
73147314

73157315
(function initDarkMode() {
7316-
// Check for saved theme preference or default to system preference
7317-
var savedTheme = localStorage.getItem('theme');
7318-
var systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
7319-
var initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
7320-
7321-
// Apply initial theme
7322-
if (initialTheme === 'dark') {
7323-
document.documentElement.setAttribute('data-theme', 'dark');
7324-
}
7316+
// Note: Initial theme is already applied in <head> to prevent flash
73257317

73267318
// Create and inject dark mode toggle button
73277319
var toggleButton = document.createElement('button');

‎scripts/portal_generator/templates/base.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,18 @@
2929
<link rel="stylesheet" href="{{ css_path }}">
3030
{% block extra_styles %}{% endblock %}
3131

32+
<!-- Dark Mode: Apply theme before render to prevent flash -->
33+
<script>
34+
(function() {
35+
var savedTheme = localStorage.getItem('theme');
36+
var systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
37+
var initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
38+
if (initialTheme === 'dark') {
39+
document.documentElement.setAttribute('data-theme', 'dark');
40+
}
41+
})();
42+
</script>
43+
3244
<!-- Ace Editor -->
3345
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/ace.min.js"></script>
3446
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/mode-json.min.js"></script>

0 commit comments

Comments
 (0)