/* ============================================= Exchange UI v2 — Theme System 深色 / 淺色 切換：[data-theme] on ============================================= */ /* ── 防止 FOUC（初始無閃爍）── */ html { visibility: hidden; } html.theme-ready { visibility: visible; } /* ═══════════════════════════════════════════ 全域設計 Token（主題無關） ═══════════════════════════════════════════ */ :root { /* 圓角 Token */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* 間距 Token */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* 版面尺寸 */ --header-height: 56px; --nav-height: 60px; --content-max: 540px; } /* ═══════════════════════════════════════════ 深色主題 (預設) ═══════════════════════════════════════════ */ :root, html[data-theme="dark"] { color-scheme: dark; /* 背景層級 */ --bg-page: #0B0E11; --bg-card: #161B22; --bg-surface: #1C2130; --bg-input: #222A38; --bg-hover: #273040; --bg-active: #2E3A4E; --bg-tag: #1C2130; /* 文字層級 */ --t1: #E8EAED; --t2: #858E9C; --t3: #505A6E; /* 品牌色：琥珀金（WCAG AA on dark bg） */ --accent: #F5C518; --accent-rgb: 245, 197, 24; --accent-dim: rgba(245,197,24,0.13); --accent-text: #F5C518; --accent-muted:#C9A014; /* Logo 漸層 */ --logo-gradient: linear-gradient(135deg, #F5C518 0%, #FF9A1A 100%); /* 漲跌色 */ --up: #0ECB81; --up-rgb: 14, 203, 129; --down: #F6465D; --down-rgb: 246, 70, 93; --up-bg: rgba(14,203,129,0.10); --down-bg: rgba(246,70,93,0.10); --up-text: #0ECB81; --down-text:#F6465D; /* 語意色 */ --warn: #FF9E2C; --warn-rgb: 255,158,44; --info: #3699FF; --info-rgb: 54,153,255; --warn-bg: rgba(255,158,44,0.12); --info-bg: rgba(54,153,255,0.12); /* 圖標語意色 Token（隨主題切換） */ --icon-blue: #4DA3FF; --icon-blue-bg: rgba(77,163,255,0.13); --icon-green: #0ECB81; --icon-green-bg: rgba(14,203,129,0.10); --icon-orange: #FF9E2C; --icon-orange-bg: rgba(255,158,44,0.12); --icon-purple: #B47FFF; --icon-purple-bg: rgba(180,127,255,0.13); --icon-red: #F6465D; --icon-red-bg: rgba(246,70,93,0.10); --icon-gold: #F5C518; --icon-gold-bg: rgba(245,197,24,0.13); --icon-teal: #14D1B2; --icon-teal-bg: rgba(20,209,178,0.12); /* 邊框 */ --b1: rgba(255,255,255,0.07); --b2: rgba(255,255,255,0.13); --b3: rgba(255,255,255,0.22); /* 陰影 */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.30), 0 2px 10px rgba(0,0,0,0.40); --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 8px 32px rgba(0,0,0,0.50); --shadow-lg: 0 12px 40px rgba(0,0,0,0.55), 0 20px 60px rgba(0,0,0,0.60); --shadow-accent: 0 4px 18px rgba(245,197,24,0.35); /* 特定元件 */ --header-bg: #0D1117; --nav-bg: #0D1117; --nav-border:#1A2030; --overlay: rgba(0,0,0,0.75); /* 圖表背景 */ --chart-bg: #0D1117; /* 分隔線 */ --divider: rgba(255,255,255,0.05); /* Balance Card 漸層 */ --balance-card-bg: linear-gradient(145deg, #1A2840 0%, #0D1B2E 60%, #0A1520 100%); --balance-card-border: rgba(245,197,24,0.18); --balance-card-text: #FFFFFF; --balance-card-sub: rgba(255,255,255,0.55); --balance-card-btn-bg: rgba(255,255,255,0.12); --balance-card-btn-border: rgba(255,255,255,0.18); --balance-card-btn-hover: rgba(255,255,255,0.20); /* Scrollbar */ --sb-track: rgba(255,255,255,0.02); --sb-thumb: rgba(255,255,255,0.10); --sb-thumb-hover: rgba(255,255,255,0.18); } /* ═══════════════════════════════════════════ 淺色主題 ═══════════════════════════════════════════ */ html[data-theme="light"] { color-scheme: light; /* 背景層級 */ --bg-page: #F2F4F8; --bg-card: #FFFFFF; --bg-surface: #F8FAFC; --bg-input: #EEF1F6; --bg-hover: #E6EAF2; --bg-active: #D8DEEb; --bg-tag: #EDF0F7; /* 文字層級（對比度已校準至 WCAG AA） */ --t1: #1A2030; --t2: #5C6474; --t3: #9AA0AD; /* 品牌色：琥珀金深版（白底對比度 ≥ 4.5:1） */ --accent: #C8960C; --accent-rgb: 200, 150, 12; --accent-dim: rgba(200,150,12,0.11); --accent-text: #9E7200; --accent-muted:#B88500; /* Logo 漸層（淺色下保持品牌感） */ --logo-gradient: linear-gradient(135deg, #C8960C 0%, #E07A10 100%); /* 漲跌色（淺色版加深，對比度更強） */ --up: #0B8A55; --up-rgb: 11, 138, 85; --down: #C82333; --down-rgb: 200, 35, 51; --up-bg: rgba(11,138,85,0.09); --down-bg: rgba(200,35,51,0.09); --up-text: #0B8A55; --down-text:#C82333; /* 語意色 */ --warn: #A85D00; --warn-rgb: 168,93,0; --info: #0048A8; --info-rgb: 0,72,168; --warn-bg: rgba(168,93,0,0.09); --info-bg: rgba(0,72,168,0.09); /* 圖標語意色 Token */ --icon-blue: #0061D4; --icon-blue-bg: rgba(0,97,212,0.10); --icon-green: #0B8A55; --icon-green-bg: rgba(11,138,85,0.09); --icon-orange: #A85D00; --icon-orange-bg: rgba(168,93,0,0.09); --icon-purple: #7B3FD4; --icon-purple-bg: rgba(123,63,212,0.10); --icon-red: #C82333; --icon-red-bg: rgba(200,35,51,0.09); --icon-gold: #9E7200; --icon-gold-bg: rgba(158,114,0,0.10); --icon-teal: #0A8F7A; --icon-teal-bg: rgba(10,143,122,0.09); /* 邊框 */ --b1: rgba(0,0,0,0.07); --b2: rgba(0,0,0,0.13); --b3: rgba(0,0,0,0.22); /* 陰影（淺色加強立體感） */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 2px 12px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 8px 28px rgba(0,0,0,0.11); --shadow-lg: 0 12px 36px rgba(0,0,0,0.12), 0 20px 52px rgba(0,0,0,0.14); --shadow-accent: 0 4px 16px rgba(200,150,12,0.25); /* 特定元件 */ --header-bg: #FFFFFF; --nav-bg: #FFFFFF; --nav-border:#E4E8F0; --overlay: rgba(0,0,0,0.52); /* 圖表背景 */ --chart-bg: #FFFFFF; /* 分隔線 */ --divider: rgba(0,0,0,0.05); /* Balance Card 漸層（淺色用深藍，穩重專業） */ --balance-card-bg: linear-gradient(145deg, #1B3A6B 0%, #0E2347 60%, #091A38 100%); --balance-card-border: rgba(255,255,255,0.12); --balance-card-text: #FFFFFF; --balance-card-sub: rgba(255,255,255,0.55); --balance-card-btn-bg: rgba(255,255,255,0.14); --balance-card-btn-border: rgba(255,255,255,0.20); --balance-card-btn-hover: rgba(255,255,255,0.22); /* Scrollbar */ --sb-track: rgba(0,0,0,0.03); --sb-thumb: rgba(0,0,0,0.15); --sb-thumb-hover: rgba(0,0,0,0.25); } /* ═══════════════════════════════════════════ 主題切換過渡動畫 ═══════════════════════════════════════════ */ html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { transition: background-color 0.22s ease, border-color 0.22s ease, color 0.18s ease, box-shadow 0.20s ease; } /* 互動元素使用更快速的過渡 */ html[data-theme] a, html[data-theme] button, html[data-theme] input, html[data-theme] select, html[data-theme] textarea { transition: all 0.15s ease !important; }