prefers-color-scheme 深色模式与系统主题适配

prefers-color-scheme 深色模式与系统主题适配概述`prefers-color-scheme` 允许依据用户系统主题自动切换配色，配合手动开关与存储实现一致体验。核心概念与参数媒体查询：`@media (prefers-color-scheme: dark)` 应用深色主题。手动覆盖：使用 `data-theme` 或类名显式切换。特性检测：`matchMedia('(prefers-color-scheme: dark)').matches`。实践示例<style>

:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {

:root { --bg: #0b0f14; --fg: #edf2f7; }

body { background: var(--bg); color: var(--fg); }

}

</style>

<button id="toggle">切换主题</button>

<script>

const saved = localStorage.getItem('theme');

if (saved) document.documentElement.dataset.theme = saved;

document.getElementById('toggle').onclick = () => {

const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';

document.documentElement.dataset.theme = next;

localStorage.setItem('theme', next);

};

};

</script>

验证方法一致性：系统切换与手动切换互不冲突；元素配色统一。对比度：确保文本与背景对比度合规（WCAG AA）。持久化：刷新后保持用户选择。注意事项使用 `color-scheme` 提示 UA 选择合适默认样式（表单控件等）。在动态图表等区域考虑暗色下的可辨识性。避免仅以颜色传达信息，提供形状与文本辅助。