rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Use static style tag in HTML source for accent color persistence

Browse Source 
Vite's initialization strips dynamically created elements from <head>.
Place <style id="umbra-accent"> directly in the HTML source instead of
creating it with createElement. Source-authored elements survive Vite's
head cleanup. The inline script populates it via textContent (XSS-safe).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-12 20:47:02 +08:00
parent f9359bd78a
commit 4e1b59c0f9
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/index.html
View File

@ -8,10 +8,12 @@
<meta name="theme-color" content="#09090b" /> <meta name="theme-color" content="#09090b" />
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<title>UMBRA</title> <title>UMBRA</title>
<!-- Static style tag — survives Vite's head cleanup (unlike dynamically created elements).
The inline script below populates it with accent color from localStorage cache. -->
<style id="umbra-accent"></style>
<script> <script>
// Inject a <style> tag with !important accent color vars. // Populate the static style tag with cached accent color before first paint.
// Inline style attr gets stripped during page load (unknown cause), // Uses textContent (safe from XSS) and !important (beats @layer base defaults).
// but a <style> tag with !important persists and beats @layer base defaults.
(function() { (function() {
var h = '187', s = '85.7%', l = '53.3%'; var h = '187', s = '85.7%', l = '53.3%';
try { try {
@ -23,10 +25,8 @@
if (p.l) l = p.l; if (p.l) l = p.l;
} }
} catch(e) {} } catch(e) {}
var el = document.createElement('style'); document.getElementById('umbra-accent').textContent =
el.id = 'umbra-accent'; ':root{--accent-h:' + h + ' !important;--accent-s:' + s + ' !important;--accent-l:' + l + ' !important}';
el.textContent = ':root{--accent-h:' + h + ' !important;--accent-s:' + s + ' !important;--accent-l:' + l + ' !important}';
document.head.appendChild(el);
})(); })();
</script> </script>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />