Logan.Li
ac563d1c5e
- remove shadcn HSL dual-track vars (523->416->~300 lines index.css); tailwind semantic colors (border/background/card/primary/destructive/ popover/muted/accent) now bridge directly to var(--dg-*) tokens - drop dead darkMode:['class'] config and inert dark: variants in kept ui components; theme switching is data-theme based (4 themes intact) - first-frame inline theme script in index.html (reads namespaced key with legacy fallback, resolves system, sets color-scheme) - no flash - consolidate duplicated db-type brand colors into lib/constants.ts single source (dbTypeColorMap + dbTypeBrandColorMap, with pg/mongodb aliases); instance health stroke now uses theme tokens - verified via browser: dark #0d1117 / light #f5f6f8 both resolve, tokens cascade correctly
43 lines
1.7 KiB
HTML
43 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<title>OpsxSQL</title>
|
|
<script>
|
|
// 首帧主题初始化（指南 06 章：读取要在 app 挂载前，防首屏闪烁）
|
|
// 与 useTheme.tsx 保持同一套取值与解析逻辑
|
|
(function () {
|
|
try {
|
|
var v = localStorage.getItem('opsxsql.theme.mode');
|
|
if (!v) {
|
|
var legacy = localStorage.getItem('dg-theme');
|
|
if (legacy) {
|
|
v = legacy === 'dark' || legacy === 'midnight-purple' || legacy === 'orange-vitality'
|
|
? 'ocean-deep'
|
|
: legacy === 'light' ? 'light-professional' : legacy;
|
|
localStorage.setItem('opsxsql.theme.mode', v);
|
|
localStorage.removeItem('dg-theme');
|
|
}
|
|
}
|
|
if (!/^(system|light-professional|ocean-deep|pine-green)$/.test(v || '')) v = 'system';
|
|
var resolved =
|
|
v === 'system'
|
|
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
? 'ocean-deep'
|
|
: 'light-professional'
|
|
: v;
|
|
document.documentElement.setAttribute('data-theme', resolved);
|
|
document.documentElement.setAttribute('data-theme-choice', v);
|
|
document.documentElement.style.colorScheme = resolved === 'light-professional' ? 'light' : 'dark';
|
|
} catch (e) { /* noop */ }
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|