前端: 浅色模式 + 系统自动主题

- 引入语义化 CSS 变量令牌(bg/surface/edge/ink/muted/accent 等), data-theme 三态切换 - theme store(localStorage + 系统偏好跟随), 首屏内联脚本防主题闪烁 - ThemeToggle 组件(浅色/深色/跟随系统) 置于导航与控制台顶栏 - 全量替换硬编码 zinc/emerald/red 类为令牌, 图表基线/状态色随主题适配 - 浅色对比度校准(accent/err/warn 深浅各一套) Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-15 16:20:43 +08:00
parent 4846db9293
commit a422034b2b
24 changed files with 380 additions and 249 deletions
@@ -1,10 +1,21 @@
 <!doctype html>
-<html lang="zh-CN" class="dark">
+<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="color-scheme" content="dark" />
+    <script>
+      // 防止主题闪烁：应用前先按 localStorage/系统偏好设置 data-theme
+      ;(function () {
+        try {
+          var m = localStorage.getItem('ot_theme') || 'system'
+          var dark = m === 'dark' || (m === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+          document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light')
+        } catch (e) {
+          document.documentElement.setAttribute('data-theme', 'dark')
+        }
+      })()
+    </script>
    <title>openteam · LLM API 中转站</title>
  </head>
  <body>