我错了，关于深色模式：用容器样式查询重做主题切换
来源：dbushell.com — 2026-11-09
📋 概述
作者二月改版时把站点的深色模式删了，理由是深色不是他的品牌、不需要自动跟随系统偏好，还把「用阅读模式不就行了」当成解法。他现在承认这套说法站不住：他自己写完的东西常常不回头读，而「网站只强迫用户用浅色」在他看来该直接进监狱。「要么提供深色模式，要么准备好针对每一种自适应与强制深色实现去测试，要么就让网站看起来是坏的」。于是他重做了一版，默认跟随系统，右上角一个按钮在明暗之间切换。
🔑 核心要点
- 技术上用的是注册过的自定义属性加容器样式查询：
@property --theme 声明 light|dark 并继承，@media (prefers-color-scheme: dark) 在 html 上设值，再在 body 上用 @container style(--theme: dark) 应用深色。
- 边缘情况有两条退路：组件内再用一次样式查询，或用 light-dark() 配合 color-scheme；后者必须设 color-scheme，否则用户的显式选择会被系统偏好盖掉。
- 一处诚实的犹豫：能不能只在 body 上设 color-scheme 一次？作者不确定这是否安全，所以先保留啰嗦的样式查询；在 html 根元素上设是不安全的，浏览器会拿它判断自适应深色。
- 切换靠一小段 JS 写 localStorage，代价是可能出现 FART（Flash of Inaccurate coloR Theme），但他认为只有用户选择与系统偏好不一致时才会闪。
- 他也顺手批评了同行：很多网站完全靠 JS 启用深色模式，在 Noscript 环境下就会大面积闪。
💡 金句
任何强迫用户只能用浅色模式的网站，都应该直接进监狱。
👍 0
👎 0
← 返回 Lobsters 首页