Kyle Pope
988dc37b64
Guard useTheme effect to skip when settings are undefined, preventing it from overwriting the inline script's cached color with cyan defaults. Move CSS accent var defaults from index.css :root into the index.html inline script so they are always set synchronously before paint. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
41 lines
1.6 KiB
HTML
41 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="theme-color" content="#09090b" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<title>UMBRA</title>
|
|
<script>
|
|
// Apply accent color before React hydrates to prevent FOUC.
|
|
// Reads from localStorage cache; falls back to cyan on first visit.
|
|
(function() {
|
|
var s = document.documentElement.style;
|
|
try {
|
|
var c = localStorage.getItem('umbra-accent-color');
|
|
if (c) {
|
|
var p = JSON.parse(c);
|
|
s.setProperty('--accent-h', p.h);
|
|
s.setProperty('--accent-s', p.s);
|
|
s.setProperty('--accent-l', p.l);
|
|
return;
|
|
}
|
|
} catch(e) {}
|
|
// First visit or corrupt cache — apply cyan defaults
|
|
s.setProperty('--accent-h', '187');
|
|
s.setProperty('--accent-s', '85.7%');
|
|
s.setProperty('--accent-l', '53.3%');
|
|
})();
|
|
</script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|