mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5
92caf40966
The cold-boot inline script in index.html applied only the cached --background and the light/dark class before React mounts. The restored setup loading gate's grainient reads other theme vars too (--chart-5, --chart-3, --chart-2, --primary, --foreground), so a cached non-Latte theme (houston/buzz/custom) painted the splash grainient from the static Catppuccin :root values until ThemeProvider.applyCachedVars() ran on mount — a brief wrong-colored splash. Seed the full cached vars map on documentElement synchronously, mirroring ThemeProvider.applyCachedVars(), so the pre-React paint matches the themed gate for any cached theme. Follow-up to #1631 review.
72 lines
3.0 KiB
HTML
72 lines
3.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/buzz.svg?v=20260610" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title></title>
|
|
<!--
|
|
Boot background: the document must be painted before the app bundle (and
|
|
its stylesheets) load so cold boot never flashes ahead of the loading
|
|
gate. The window itself is also painted pre-document via `backgroundColor`
|
|
in tauri.conf.json. The body paints its own themed background once the app
|
|
CSS loads, so this never shows through after boot.
|
|
|
|
The inline script below reads the cached theme background (same
|
|
`buzz-theme-cache` entry ThemeProvider writes) and applies it synchronously
|
|
so the boot color matches the themed loading gate — no black flash on light
|
|
themes. On the first-ever launch (no cache yet) it seeds the `dark` class
|
|
synchronously so the setup gate reads the dark `:root` vars instead of the
|
|
light Catppuccin-Latte default, matching the dark `houston` theme
|
|
ThemeProvider applies moments later — no light flash before it loads.
|
|
-->
|
|
<style>
|
|
html {
|
|
background-color: #000;
|
|
}
|
|
</style>
|
|
<script>
|
|
(() => {
|
|
var cached, bg, parsed, vars, key;
|
|
try {
|
|
cached = window.localStorage.getItem("buzz-theme-cache");
|
|
if (!cached) {
|
|
// No stored theme: the default theme (`houston`) is dark, so seed
|
|
// the `dark` class now. Otherwise the setup gate would paint from
|
|
// the light `:root` vars until ThemeProvider loads asynchronously.
|
|
document.documentElement.classList.add("dark");
|
|
return;
|
|
}
|
|
parsed = JSON.parse(cached);
|
|
// Seed the full cached vars map on <html> before paint, mirroring
|
|
// ThemeProvider.applyCachedVars(). The loading gate's grainient reads
|
|
// --chart-*, --primary, --foreground, etc. — not just --background —
|
|
// so seeding only --background would let a cached non-Latte theme
|
|
// (houston/buzz/custom) paint the splash from the static Catppuccin
|
|
// :root vars until React mounts.
|
|
vars = parsed.vars;
|
|
if (vars) {
|
|
for (key in vars) {
|
|
if (Object.hasOwn(vars, key)) {
|
|
document.documentElement.style.setProperty(key, vars[key]);
|
|
}
|
|
}
|
|
}
|
|
bg = vars && vars["--background"];
|
|
if (bg) document.documentElement.style.backgroundColor = `hsl(${bg})`;
|
|
// Match the cached light/dark class so themed vars resolve correctly
|
|
// before ThemeProvider mounts.
|
|
document.documentElement.classList.add(parsed.isDark ? "dark" : "light");
|
|
} catch {
|
|
/* fall back to the black default above */
|
|
}
|
|
})();
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|