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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user