HTML CSS暗亮切换实现方法【经验分享】

怎么写才真正生效：必须用在 CSS 规则块里

light-dark() 只能出现在标准 CSS 规则的声明值位置，且依赖用户系统偏好自动切换。它不是“手动开关”，而是响应式颜色声明。

• ✅ 正确写法：

  body { color: light-dark(black, white); background: light-dark(#f9f9f9, #1a1a1a); }

• ✅ 支持颜色关键词、十六进制、rgb()、hsl()，但不能混用单位（如 light-dark(1rem, 2px) 会报错）
• ✅ 可嵌套在 var() 里：

  :root { --text-color: light-dark(black, white); } p { color: var(--text-color); }

• ❌ 不支持伪类动态触发（如 button:hover { color: light-dark(red, cyan); } 虽语法合法，但实际表现取决于系统偏好，而非悬停）

替代方案：需要手动切换时别用 light-dark()

如果你要加一个“日/夜模式按钮”，light-dark() 完全不合适 —— 它只响应系统设置，无法被 JS 控制。

此时应改用 CSS 自定义属性 + 类名切换：

• 定义两套变量：

  :root { --bg: #fff; --text: #000; } :root.dark { --bg: #111; --text: #eee; }

• JS 切换：document.documentElement.classList.toggle('dark')
• 所有样式用 var(--bg) 引用，避免重复写死
• 想兼容老浏览器？light-dark() 本身没 fallback，必须配合 @supports 或 JS 检测

容易被忽略的细节：颜色对比与可访问性

用 light-dark(black, white) 看似省事，但实际可能违反 WCAG 对比度要求 —— 白底黑字在亮色模式下对比度约 21:1（OK），但黑底白字在暗色模式下只有约 15:1（对小字号仍偏低）。

更稳妥的做法是选有明确对比保障的颜色组合：

• 亮色模式用 #1a1a1a（非纯黑），暗色模式用 #e0e0e0（非纯白）
• 用工具验证：Chrome DevTools 的「Accessibility」面板 → 「Contrast ratio」
• 不要假设用户开了系统暗色模式就一定喜欢高饱和背景 —— 很多人开暗色模式只为省电或护眼，仍倾向浅灰背景

真要用 light-dark()，得把它当成“默认响应层”，而不是最终视觉方案；复杂产品仍需结合用户主动选择 + 系统偏好 + 可访问性校验三者落地。

今天关于《HTML CSS暗亮切换实现方法【经验分享】》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！