CSS prefers-color-scheme 深色模式与 OKLCH 主题治理实践

核心价值尊重用户深色偏好，提供自动与手动切换并保持可读性。用 OKLCH 定义色阶与主题变量，确保在暗色环境下对比度与色调稳定。基础变量与媒体查询:root { color-scheme: light dark; } :root { --bg: oklch(98% 0 0); --fg: oklch(20% 0 0); --accent: oklch(60% 0.1 260); } @media (prefers-color-scheme: dark) { :root { --bg: oklch(15% 0 0); --fg: oklch(92% 0 0); --accent: oklch(70% 0.12 250); } } 组件应用.card { background: var(--bg); color: var(--fg); border: 1px solid color-mix(in oklch, var(--fg) 20%, transparent); } .btn { background: var(--accent); color: var(--bg); } 手动切换与持久化const root = document.documentElement const current = localStorage.getItem('theme') if (current) root.dataset.theme = current document.getElementById('toggle')?.addEventListener('click', () => { const next = root.dataset.theme === 'dark' ? 'light' : 'dark' root.dataset.theme = next localStorage.setItem('theme', next) }) :root[data-theme="dark"] { --bg: oklch(15% 0 0); --fg: oklch(92% 0 0); --accent: oklch(70% 0.12 250); } 治理建议保持文本与背景之间足够对比度（参考 WCAG AA），暗色模式避免纯黑/纯白导致眩光。对交互元素使用 `:focus-visible` 与清晰的焦点环，确保低亮环境下的可发现性。结合 `prefers-reduced-motion` 对动效降级，避免暗背景下的大面积动画造成疲劳。结论通过 `prefers-color-scheme` 与 OKLCH 的协同，主题在不同亮度环境下保持色彩一致性与可读性，用户体验更加稳健且可自定义。