pin the boot fallback to the dark palette

The inline boot styles and FOUC script still branched on the removed
light/dark and ink/comic settings, so the first paint flashed the old
light surface before Vue mounted. Match the single dark theme and give
the logo sweep the neon tint.
This commit is contained in:
2026-10-19 14:34:08 +08:00
parent 3769ed3068
commit b48d67a823
+6 -38
View File
@@ -6,7 +6,7 @@
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/logo.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#f7f7f4" />
<meta name="theme-color" content="#1a1d23" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="hermes-ui" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -20,25 +20,17 @@
body {
margin: 0;
background: #f7f7f4;
}
html.dark body {
background: #1a1a1a;
background: oklch(0.155 0.012 250);
}
.boot-fallback {
min-height: 100vh;
display: grid;
place-items: center;
color: #222222;
color: oklch(0.945 0.006 200);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
html.dark .boot-fallback {
color: #f0f0f0;
}
.boot-fallback__logo-wrap {
position: relative;
display: block;
@@ -52,7 +44,7 @@
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.85) 48%, transparent 66%);
background: linear-gradient(105deg, transparent 30%, rgba(45, 212, 191, 0.55) 48%, transparent 66%);
transform: translateX(-140%);
mix-blend-mode: screen;
pointer-events: none;
@@ -80,33 +72,9 @@
}
</style>
<!-- Prevent FOUC by applying theme classes immediately -->
<!-- CYBER is a single dark theme: pin Arco's dark tokens before first paint -->
<script>
(function() {
try {
const brightness = localStorage.getItem('hermes_brightness') || 'system';
const style = localStorage.getItem('hermes_style') || 'ink';
// Resolve dark mode
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isDark = brightness === 'dark' || (brightness === 'system' && prefersDark);
// Resolve comic style
const isComic = style === 'comic';
// Apply classes immediately
if (isDark) {
document.documentElement.classList.add('dark');
}
if (isComic) {
document.documentElement.classList.add('comic');
}
// Arco Design dark theme mechanism (Phase 005)
document.documentElement.setAttribute('arco-theme', isDark ? 'dark' : 'light');
} catch (e) {
console.warn('Failed to apply theme:', e);
}
})();
document.documentElement.setAttribute('arco-theme', 'dark');
</script>
</head>