refactor(frontend): unify theme tokens to single --dg-* source

- 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

frontend/index.html

@@ -5,6 +5,35 @@
     <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>