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 选择合适默认样式（表单控件等）。在动态图表等区域考虑暗色下的可辨识性。避免仅以颜色传达信息，提供形状与文本辅助。