文章探讨了暗黑模式的六个实现层级，从基础到高级，指出当前网站普遍缺乏无样式下的暗黑模式支持，并建议将暗黑模式视为色彩方案切换来思考。作者通过示例代码主要展示暗色方案，但也强调反向切换同样可行。

暗色模式的六个层级

在今年的"CSS裸奔日"活动中，作者发现几乎所有访问的网站在移除样式后都失去了暗色模式功能。这引发了对"暗色模式六个层级"的思考。

六个实现层级

1. 基础级：仅需在HTML头部添加<meta name="color-scheme" content="light dark">标签，浏览器就会遵循用户的色彩方案偏好。

2. 基本级：使用CSS声明html {color-scheme: light dark;}实现，但建议优先使用meta标签以获得更快的解析速度。

3. 温和级：利用CSS新增的light-dark()颜色函数，例如background-color: light-dark(black, white);。

4. 大胆级：使用媒体查询@media (prefers-color-scheme: dark)实现完全自定义，不仅限于颜色调整。

5. 分体级：通过HTML的media属性为不同色彩方案创建独立样式表文件。

6. 弹道级：使用JavaScript的matchMedia函数检测用户偏好，实现更复杂的交互逻辑。

进阶应用

7. 超越级：构建色彩方案切换器，提供"自动/暗色/亮色"三种选项，而非简单二元选择。

8. 迷惑级：使用CSS的:has()选择器直接查询meta标签状态，无需额外添加类名或数据属性。

相关讨论

• 开发者指出Safari浏览器旧版本存在暗色模式下的链接颜色可访问性问题
• 关于打印样式与暗色模式的讨论：浏览器默认会忽略暗色模式打印设置
• 有人提议创建"CSS裸奔日"网站联盟（webring）的趣味讨论

文章最后邀请读者在Mastodon平台参与讨论或分享这篇文章。

（注：原文中大量技术细节和代码示例被精简保留核心要点，删除了重复性代码和部分非核心讨论内容）

这篇评论主要围绕网页主题设计展开讨论，以下是核心观点总结：

1. 交互设计建议

   • 有用户建议实现滚动时动态切换主题层级的功能 "Would've been cool if the levels came into effect while you scrolled down" (sambellll)

2. 主题层级争议

   • 关于主题层级数量的讨论，有人认为6级过多（"3 or 4 would be the most" - apparent），有人指出实际有8级（"It's 8 levels though?" - stevage）
   • 戏谑性建议包含第9级："Level 9: Turn off the computer" (yyy888sss)

3. 技术实现批评

   • 对CSS规范中light-dark()函数的扩展性不满，建议采用更灵活的多主题方案 "sad that CSS wound up with this clunky light-dark()... should be themed(dark(),light(),retro())" (akersten)
   • 指出浏览器会下载所有CSS文件的实际情况 "browsers download them all... may prioritise differently" (chrismorgan)

4. 主题系统架构

   • 提出系统的主题词汇分层模型（Palette→Luminance→Contrast→Color Theme） "Theming vocabulary is a mess... My mental model is..." (omer_balyali)
   • 询问如何支持特殊功能主题（色盲友好/高对比度等） "support for additional functional themes like colour vision friendly" (intronic)

5. 用户体验痛点

   • 反映页面加载时的闪光问题 "no way to prevent the flash bang while waiting" (zamalek)
   • 提及OLED屏幕纯黑背景的省电争议 "pure black is more battery efficient for OLED" (apparent)