Fix dark mode white flash on page refresh#3482
Fix dark mode white flash on page refresh#3482springfall2008 merged 2 commits intospringfall2008:mainfrom
Conversation
warksit
force-pushed
the
fix-dark-mode-flash
branch
2 times, most recently
from
eb718c9 to
ed7670a
Compare
Apply dark-mode class to <html> immediately via inline script in <head>, before the body renders. The existing window.onload handler still runs to apply body classes and update the logo. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
warksit
force-pushed
the
fix-dark-mode-flash
branch
from
ed7670a to
60cdf2d
Compare
There was a problem hiding this comment.
Pull request overview
This PR aims to prevent the dark-mode “white flash” on page refresh in Predbat’s web UI by applying dark mode as early as possible during initial page load.
Changes:
- Adds an inline
<script>early in<head>to apply thedark-modeclass to<html>based onlocalStorage. - Adds
html.dark-mode bodyCSS rules so the<body>gets dark background/text before the existingwindow.onloadhandler runs.
apps/predbat/web_helper.py
Outdated
| if (localStorage.getItem('darkMode') === 'true') { | ||
| document.documentElement.classList.add('dark-mode'); | ||
| document.documentElement.style.backgroundColor = '#121212'; | ||
| document.documentElement.style.color = '#e0e0e0'; |
There was a problem hiding this comment.
This early script only adds dark-mode to <html>, but most dark-mode styling in this header (e.g., .menu-bar, buttons, tables) is keyed off body.dark-mode and is still applied via applyDarkMode() on window.onload. That means some UI elements can still render in light theme briefly on refresh (even if the page background is dark). Consider applying the body class earlier (e.g., DOMContentLoaded instead of window.onload, or extending CSS selectors to html.dark-mode … equivalents) so all dark-mode styles take effect immediately.
| if (localStorage.getItem('darkMode') === 'true') { | |
| document.documentElement.classList.add('dark-mode'); | |
| document.documentElement.style.backgroundColor = '#121212'; | |
| document.documentElement.style.color = '#e0e0e0'; | |
| if (localStorage.getItem('darkMode') === 'true') { | |
| // Apply dark mode to the root element as early as possible | |
| document.documentElement.classList.add('dark-mode'); | |
| document.documentElement.style.backgroundColor = '#121212'; | |
| document.documentElement.style.color = '#e0e0e0'; | |
| // As soon as the DOM is ready, mirror the class on <body> so that | |
| // all CSS rules keyed off body.dark-mode apply without waiting for window.onload | |
| document.addEventListener('DOMContentLoaded', function () { | |
| if (document.body) { | |
| document.body.classList.add('dark-mode'); | |
| } | |
| }); |
apps/predbat/web_helper.py
Outdated
| document.documentElement.style.backgroundColor = '#121212'; | ||
| document.documentElement.style.color = '#e0e0e0'; |
There was a problem hiding this comment.
The inline script sets document.documentElement.style.backgroundColor/style.color, which duplicates the dark-mode colors already defined in the stylesheet below (e.g., html.dark-mode … and html.dark-mode body …). Keeping both inline styles and CSS makes future theme tweaks easy to miss/inconsistent; consider only adding the dark-mode class here and letting CSS control colors (or centralize the colors via CSS variables).
| document.documentElement.style.backgroundColor = '#121212'; | |
| document.documentElement.style.color = '#e0e0e0'; |
| html.dark-mode, html.dark-mode body { | ||
| border-color: #121212; | ||
| } |
There was a problem hiding this comment.
The html.dark-mode, html.dark-mode body { border-color: #121212; } rule appears redundant with the later existing rule that sets border: 2px solid #121212 for html.dark-mode / body.dark-mode. Consider removing this earlier rule to avoid duplicate/competing sources for the same border styling.
| html.dark-mode, html.dark-mode body { | |
| border-color: #121212; | |
| } |
Addresses Copilot review: inline styles duplicated CSS rules and most dark-mode selectors target body.dark-mode. Now the early script only sets the class on <html>, and adds body.dark-mode at DOMContentLoaded so all existing body.dark-mode CSS selectors take effect before window.onload. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Summary
<script>at the very start of<head>(before the<style>block) that applies thedark-modeclass to<html>from localStoragehtml.dark-mode bodyCSS rules so the body inherits the dark background immediately when created, without waiting forwindow.onloadwindow.onloadhandler still runs to update the logoTest plan
🤖 Generated with Claude Code