Kyle Pope
b202ee1a84
Inline style attribute on <html> gets stripped during page load. Switch to injecting a <style id="umbra-accent"> tag with !important CSS custom properties which persists in the DOM and beats @layer base defaults. useTheme updates the same style tag when settings load. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
41 lines
1.7 KiB
HTML
41 lines
1.7 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>
|
|
// Inject a <style> tag with !important accent color vars.
|
|
// Inline style attr gets stripped during page load (unknown cause),
|
|
// but a <style> tag with !important persists and beats @layer base defaults.
|
|
(function() {
|
|
var h = '187', s = '85.7%', l = '53.3%';
|
|
try {
|
|
var c = localStorage.getItem('umbra-accent-color');
|
|
if (c) {
|
|
var p = JSON.parse(c);
|
|
if (p.h) h = p.h;
|
|
if (p.s) s = p.s;
|
|
if (p.l) l = p.l;
|
|
}
|
|
} catch(e) {}
|
|
var el = document.createElement('style');
|
|
el.id = 'umbra-accent';
|
|
el.textContent = ':root{--accent-h:' + h + ' !important;--accent-s:' + s + ' !important;--accent-l:' + l + ' !important}';
|
|
document.head.appendChild(el);
|
|
})();
|
|
</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>
|