jgamboa/miniSCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix white/inverted flash when windows open

Browse Source 
Three layers: windows are created hidden and revealed on the webview's
first dom-ready (800ms fallback); the bun preload bakes the persisted
theme data-attributes so the first paint is already themed; and
index.html carries an inline background style covering the
pre-stylesheet paint (values mirrored from styles.css tokens).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jokin
2026-07-14 09:17:31 +02:00
co-authored by Claude Fable 5
parent dc5cb1f707
commit ef34104cf0
6 changed files with 88 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/index.html
+15
View File
@@ -6,6 +6,21 @@
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!-- Pre-stylesheet paint: the window background must be right BEFORE
styles.css parses or new windows flash white/inverted. Only the
html background decision lives here — values must stay in sync with
the corresponding --background tokens in styles.css. The data-*
attributes are baked in by the bun preload (buildPreload in
src/bun/windows.ts) so forced themes are correct at first paint. -->
<style>
html { background: oklch(1 0 0); }
html[data-theme='dark'] { background: oklch(0.245 0.005 285.9); }
html[data-theme='dark'][data-dark-tone='darker'] { background: oklch(0.141 0.005 285.823); }
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) { background: oklch(0.245 0.005 285.9); }
html:not([data-theme='light'])[data-dark-tone='darker'] { background: oklch(0.141 0.005 285.823); }
}
</style>
</head>
<body>
<app-root></app-root>