prefers-color-scheme 与主题切换无闪烁治理实践概述通过系统偏好与本地存储结合，在首屏阶段决定主题并避免 FOUC（样式闪烁），保证亮暗模式切换一致。核心概念与参数系统偏好：`@media (prefers-color-scheme: dark)`。持久化：读取 `localStorage` 决定初始主题并在 `<head>` 内提前应用。无闪烁：配合 `@starting-style` 或内联预设样式。实践示例<script> const saved = localStorage.getItem('theme'); const prefersDark = matchMedia('(prefers-color-scheme: dark)').matches; const theme = saved ?? (prefersDark ? 'dark' : 'light'); document.documentElement.dataset.theme = theme; </script> <style> [data-theme="dark"] { color-scheme: dark; background: #0b0b0b; color: #eee; } [data-theme="light"] { color-scheme: light; background: #fff; color: #111; } </style> 验证方法浏览器支持：Chrome 76+、Safari 12.1+、Firefox 67+。测试环境：Windows 11 / macOS 14 / iOS 17 / Android 14；系统主题切换与首屏渲染无闪烁。指标观察：首屏 `LCP` 稳定，切换交互 `INP` 正常，`CLS` 不异常。注意事项将主题判定脚本尽早执行，避免首屏后切换造成 FOUC。使用 `color-scheme` 提示 UA 渲染表单与滚动条主题。提供手动切换与系统偏好一致的覆盖策略。
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复