インターフェイステーマトグル

1）原則

1.システム>スキン。テーマは背景反転だけでなく、トークン（色、背景、コントラスト、影、状態、イラスト、グラフ）のセットです。
2.システムファースト。デフォルトでは、システム（'prefers-color-scheme'）で、手動でLight/Dark/High-Contrastを選択できます。
3.デフォルトのコントラスト。ターゲット-小さなテキスト/重要なラベルのためのWCAG AA-AAA。
4.発生はありません。レンダリング（インラインスクリプト）の前にテーマを適用し、遷移を慎重に行います。
5.ブランドの安定性。ステータスのアクセントとセマンティクスは、すべてのトピックに保存されます。

2）モードとシナリオ

明るい日のスクリプト/支払いフォーム/長い読み取り。
暗い-夜/低光/ライブマッチ。グレアを減らします。
システム-OS/ブラウザ （'prefers-color-scheme'）に従ってください。
ハイコントラスト-コントラストが向上し、ジュエリーが最小限に抑えられます（動きを減らす税込）。
季節/プロモ（オプション）-トーナメント/イベントの基本テーマ（トークンを破ることはありません）。

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（インラインスクリプト）を読み込む前にテーマを適用します。

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

アプリケーションをマウントしたら、'class=」theme-ready」'を追加します。

6）部品および状態

テキスト/アイコン：コントラスト≥ AA；2番目のテキストは4以下ではありません。5：1（暗闇の中で簡単に「フェード」）。
フィールド/カード：背景'--bg-elev'、ボーダー'--border'、影'--shadow'。
CTA：背景'--accent'、コントラストテキスト（'#fff'または計算）。
States （hover/focus/active/disabled）：明るさ/アルファを変更し「、虹を照らす」ではありません。
グラフィック/輝線：明るい/暗いのための別のパレット；グリッド/軸は低コントラストですが読み取り可能です。

7）イメージ/メディア/ロゴ

モノクロのアイコン-'currentColor'を通じて（テキストに合わせて）。
ブランドロゴを反転しないでください。2つのバージョン（ライト/ダーク）を用意します。
ポスター/スクリーンショット：暗闇で簡単にオーバーレイ（8-12％）テキストの読みやすさのために。
SVG：「ハード」塗りつぶしを避け、var 'var （--fg）'/'var （--accent）'を使用します。

8）手頃な価格

ハイコントラスト：個別のプリセット'data-theme=」hc」'。

フォーカスリング： 常に見える（'outline： 2px solid var （--focus）；outline-offset： 2px'）

色に頼らないでください。ステータスのアイコン/テキスト/パターン。
フォント：'font-variant-numeric： tabular-nums；'和/要因のため。
RTL：テーマはミラーリングを壊しません（論理プロパティを使用します）。

9）パフォーマンス

Colors-ルートのCSSカスタムプロパティ→コンポーネントの名前を変更せずに瞬時に再利用します。
大きなコンテナに「invert（）」フィルタを使用して画像を「塗り直す」ことは避けてください。
テーマのための重いイラストの怠惰な置換（必要に応じて）。
大きなパレットをJSに保存しないでください。テーマはclass/attributeによって制御されます。

10） iGamingの詳細

夜のライブ要因：「ソフト」コントラスト（数字のためのAAA）、要因の変化を強調し、目立たないです。
責任あるプレイ：リマインダーとプロンプトは両方のテーマで読み取り可能です。夜には「毒のある」花がありません。
ボックスオフィス：輝くアクセントを疲れることなくフィールド/署名/エラー。成功/エラーはトピックで安定しています。
トーナメント「スキン」：表面的なアクセントのオーバーライドとしてのみ、基本的なトークンを破らないでください。

11）スニペット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)}

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％）。
コントラストの欠陥：リリースによるコントラストのバグの数。
エラーの可視性：異なるトピックの「見えない」エラーによるクリック/繰り返し。
エネルギーインパクト（モバイル）：暗闇のセッション時間とlait（間接メトリック）の比較。

13）アンチパターン

すべての'filter： invert （1）'を反転させると、ブランドと意味が壊れます。
トークンなしのコンポーネントの色を直接変更します。
暗いテーマでフォーカスリングを非表示にします。
テキストは暗い背景に暗すぎる（または明るい背景に明るい）。
ページ全体への長い遷移（減速）。
別のトピックにない1つのトピックの「排他的」ステータスカラー。

14） QAチェックリスト

コントラストと読みやすさ

• すべてのAA ≥テキスト；クリティカルラベル/小文字≥ AAA。
• エラー/成功/警告は色で識別できるだけではありません。

動作

• システムは「prefers-color-scheme」を尊重し、OSの変更に対応します。
• FOUCはありません（レンダリング前にテーマが適用されます）。
• テーマを切り替えるとページの状態がリセットされません。

コンポーネント

• カード/フォーム/テーブルはトークンのみを使用します。
• グラフィックには両方のテーマのパレットがあります。
• ロゴ/アイコンは両方のテーマで正しく表示されます。

A11y

• 目に見える焦点リング；ハイコントラストモードをご利用いただけます。
• 'prefers-reduced-motion'を考慮してください。

パフォーマンス

• 遷移≤ 200ミリ秒；グローバルリフローなし。
• 容器に重いフィルター/ブレンドはありません。

15）設計システムにおけるドキュメンテーション

テーマトークン：パレット、コントラスト、状態（ホバー/フォーカス/アクティブ/無効）。
ガイド：コントラストを取り戻すことなく、新しいブレンドアクセントを追加する方法。
チャート/メディア：明暗のための定義済みパレット。
パターン：システム最初、ハイコントラスト、FOUCのない滑らかな切換え。
Do/Don 't：フィルター反転、インラインカラー、見えないエラー/フォーカス。

概要

作業テーマスイッチは、セマンティックトークン+System-first+flickering startです。コントラストを取り込み、色を集中化し、'prefers-color-scheme'を尊重し、動きを減らし、ユーザーの選択を保存し、重い影響を避けます。その後、UIは、夜間のライブマッチからデイボックスオフィスやトーナメント画面まで、あらゆる設定で読みやすく認識可能なままです。