Kyle Pope
fce7405b14
Both the index.html inline script and useTheme now use setProperty with 'important' priority flag. This is the highest CSS cascade priority and cannot be overridden by Vite's stylesheet injection, @layer rules, or source order. Removes the <style> tag injection approach which was being overridden. 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>
|
|
// Apply accent color with !important inline styles — highest CSS priority.
|
|
// Beats all stylesheet rules regardless of @layer, specificity, or source order.
|
|
// useTheme.ts updates these with !important when settings load from the API.
|
|
(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 d = document.documentElement.style;
|
|
d.setProperty('--accent-h', h, 'important');
|
|
d.setProperty('--accent-s', s, 'important');
|
|
d.setProperty('--accent-l', l, 'important');
|
|
})();
|
|
</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>
|