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 的协同，主题在不同亮度环境下保持色彩一致性与可读性，用户体验更加稳健且可自定义。