接口主題開關

1）原則

1.系統>掃描。主題不僅僅是背景反轉，而是一組令牌（顏色，背景，對比度，陰影，狀態，插圖，圖形）。
2.System-first.默認值為System（「prefers-color-scheme」）,可手動選擇Light/Dark/High-Contrast。
3.默認對比。目標是WCAG AA，用於小文本/重要標簽-AAA。
4.沒有爆發。將主題應用到渲染（inline腳本），然後輕輕過渡。
5.品牌穩定性。狀態的重音和語義保留在所有主題中。

2）模式和腳本

Light-白天腳本/支付表格/長讀。
黑暗是晚上/低光照度/輕量級比賽；減少眩光。
系統-我們遵循操作系統/瀏覽器（「prefers-color-scheme」）。
High-Contrast-增強對比度並最小化珠寶（亮片運動）。
Seasonal/Promo（可選）-在錦標賽/活動的基本主題之上（不打破令牌）。

3）令牌體系結構

css
:root {
/ semantics/
--bg:    hsl(0 0% 99%);
--bg-elev:  hsl(0 0% 100%);
--fg:    hsl(220 15% 15%);
--muted:   hsl(220 10% 45%);
--accent: hsl (260 95% 60%) ;/brand accent/
--success:  hsl(152 55% 40%);
--warning:  hsl(36 85% 45%);
--danger:  hsl(0 75% 50%);
--border:  hsl(220 10% 90%);
--focus:   hsl(260 95% 60% /.6);
--shadow:  0 6px 24px hsl(220 20% 10% /.08);

/ typography/radii/
--radius: 12px;
--lh: 1. 4;
}
:root[data-theme="dark"]{
--bg:   hsl(220 18% 10%);
--bg-elev: hsl(220 18% 14%);
--fg:   hsl(0 0% 96%);
--muted:  hsl(220 10% 70%);
--accent: hsl (260 95% 65%) ;/slightly lighter in the dark/
--border: hsl(220 14% 22%);
--shadow: 0 8px 28px hsl(220 50% 2% /.6);
}
:root[data-theme="hc"]{
/ high-contrast: simple pairs, high Lc/
--bg: #000; --bg-elev:#000; --fg:#fff; --muted:#fff;
--accent:#00E; --success:#0F0; --warning:#FF0; --danger:#F00;
--border:#fff; --focus:#0FF;
}

規則：組件僅使用語義令牌。

4）檢測器和保存選擇

html
<script>
(function(){
const saved = localStorage. getItem('theme'); // 'light'    'dark'    'hc'    'system'    null const sys = window. matchMedia('(prefers-color-scheme: dark)'). matches? 'dark': 'light';
const theme = saved && saved!=='system'? saved: sys;
document. documentElement. setAttribute('data-theme', theme);
})();
</script>

js matchMedia('(prefers-color-scheme: dark)'). addEventListener('change', e=>{
if(localStorage. getItem('theme')==='system'){
document. documentElement. setAttribute('data-theme', e. matches? 'dark': 'light');
}
});

5）沒有FOUC的平穩過渡

在下載CSS （inline腳本）之前應用主題。

css
@media (prefers-reduced-motion: no-preference){
html. theme-ready { transition: color. 18s, background-color. 18s, border-color. 18s; }
}

掛載應用程序後,添加"class="theme-ready"。

6）組件和狀態

文本/圖標：AA ≥對比；次要文本不低於4。5：1（在禮物中,很容易「褪色」）。
字段/卡片：背景「--bg-elev」，邊界「--border」，陰影「--shadow」。
CTA：背景「-accent」，文本對比（「#ff」或可計算）。
狀態（hover/focus/active/disabled）：改變亮度/阿爾法而不是「彩虹」。
圖形/火花線：光線/黑暗的單獨調色板；網格/軸是低對比度但可讀的。

7）圖像/媒體/標誌

圖標是單色的-通過「currentColor」（調整為文本）。
品牌徽標不得反轉；準備兩個版本（光/暗）。
海報/屏幕截圖：易於閱讀的文字（8-12％）。
SVG：避免「硬」填充,使用vars 'var （-fg）'/'var （--accent）'。

8）可用性

高對比：單獨的「數據主題」預期=「hc」。

焦環： 總是可見的（'outline： 2px solid var （-focus）；outline-offset: 2px`).

不要依賴顏色。狀態圖標/文本/模式。
字體：'font-variant-numeric： tabular-nums；'用於和數/分數。
RTL：主題不會打破鏡像（使用邏輯屬性）。

9）表演

顏色-根本上的CSS自定義屬性→即時重新使用而無需組件重新渲染。
避免在大容器上使用「invert（）」過濾器「重新粉刷」圖像。
懶惰地替換主題的重插圖（如果需要）。
不要在JS中存儲大型調色板-主題由類/屬性控制。

10） iGaming的細節

夜間現場直播：「軟」對比（數字為AAA），系數變化的突出顯示不引人註目，沒有閃爍。
負責任的遊戲：提醒和提示在兩個主題中都是可讀的；晚上沒有「有毒」的花朵。
票房：字段/簽名/錯誤，沒有繁瑣的發光口音；成功/錯誤在主題上是穩定的。
錦標賽「皮膚」：僅作為表面上的accent-override，不要打破基本令牌。

11） Snippets UI

html
<label class="theme-switch">
<span> Topic </span>
<select id="theme">
<option value = "system "> System </option>
<option value = "light "> Bright </option>
<option value = "dark "> Dark </option>
<option value = "hc"> High contrast </option>
</select>
</label>
<script>
const sel = document. getElementById('theme');
sel. value = localStorage. getItem('theme')          'system';
sel. addEventListener('change', e=>{
const v = e. target. value;
localStorage. setItem('theme', v);
if(v==='system'){
const sys = matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light';
document. documentElement. setAttribute('data-theme', sys);
} else {
document. documentElement. setAttribute('data-theme', v);
}
});
</script>

css
.btn{height:44px; padding:0 16px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px}
.btn--primary{background:var(--accent); color:#fff}
.card{background:var(--bg-elev); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius)}
.text-muted{color:var(--muted)}

React hook (persist + system):

tsx import { useEffect, useState } from 'react';
type Theme = 'light'    'dark'    'hc'    'system';
export function useTheme(){
const [theme, setTheme] = useState<Theme>(()=>localStorage. getItem('theme') as Theme          'system');
useEffect(()=>{
const apply = (t:Theme)=>{
const v = t==='system'? (matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light'): t;
document. documentElement. setAttribute('data-theme', v);
};
apply(theme);
const mql = matchMedia('(prefers-color-scheme: dark)');
const on = ()=> theme==='system' && apply('system');
mql. addEventListener('change', on);
return ()=> mql. removeEventListener('change', on);
},[theme]);
useEffect(()=> localStorage. setItem('theme', theme),[theme]);
return { theme, setTheme };
}

12）度量標準

主題采用率：用戶在Dark/System/HC上的份額。
FOUC比例：起始時可見「白色激增」的比例（<1%）。
Contrast defects：按發行版對比錯誤的數量。
Error visibility：由於不同主題中「不可見」的錯誤而導致的點擊/重播。
Energy impact （mobile）：比較會話時間（間接指標）。

13）反模式

反轉所有「過濾器：invert （1）」-打破品牌和意義。
無需標記即可直接更改組件中的顏色。
將焦點環隱藏在黑暗的主題中。
深色背景上的文本太暗（或淺色背景上的文字）。
長過渡到整個頁面（簡化）。
一個主題中的狀態的「獨家」顏色不在另一個主題中。

14） QA支票清單

對比和可讀性

• AA ≥的所有文本；AAA ≥的關鍵標簽/小文本。
• 錯誤/成功/警告不僅可以用顏色區分。

行為

• 系統尊重「prefers-color-scheme」並響應操作系統更改。
• 沒有FOUC（主題在渲染之前適用）。
• 切換主題不會重置頁面狀態。

組件

• 卡/表格/表格僅使用令牌。
• 圖形具有兩個主題的調色板。
• 徽標/圖標在兩個主題中都可以正確看到。

A11y

• 可見焦點；High-Contrast模式可用。
• 考慮到「prefers-reduced-motion」。

表演

• 過渡≤ 200毫秒；沒有全局反射。
• 容器上沒有重型過濾器/攪拌機。

15）設計系統中的文檔

主題：調色板、對比度、狀態（hover/focus/active/disabled）。
Guides：如何在不倒退對比的情況下添加新的白蘭地口音。
圖表/媒體：用於光/黑暗的預建調色板。
模式：系統第一,高對比,平穩切換,沒有FOUC。
Do/Do n't：過濾器反轉，線色、不可見錯誤/焦點。

簡短摘要

主題的工作開關是語義令牌+系統第一+無害的開始。捕捉對比度,集中色彩,尊重「prefers-color-scheme」和reduce-motion,存儲用戶的選擇,避免嚴重影響。然後，UI在任何環境中都保持可讀性和可識別性-從夜間直播比賽到白天結帳和錦標賽屏幕。