几乎不使用 CSS 的暗色模式
💡
原文中文，约2300字，阅读约需6分钟。
📝
内容提要
Feep 现支持暗色模式，用户可通过简单的 CSS 或 HTML 设置实现，主题会根据系统设置自动调整，用户可自定义颜色以适应深色背景。使用 prefers-color-scheme 媒体查询可兼容设置，整体实现更简单。
🎯
关键要点
- Feep 现支持暗色模式，用户可通过简单的 CSS 或 HTML 设置实现。
- 主题会根据系统设置自动调整，用户可自定义颜色以适应深色背景。
- 使用 <meta> 元素或 CSS 设置暗色模式，支持在任意元素上指定颜色模式。
- 大部分暗色主题可以通过启用浏览器的本地暗色模式样式表实现。
- 用户可能需要调整颜色以适应深色背景，使用 OKLCH 色彩空间进行调整。
- 使用 CSS 变量来管理颜色，避免硬编码。
- light-dark() 函数和 CSS 系统颜色可用于创建柔和的颜色。
- 使用 prefers-color-scheme 媒体查询来为暗色模式单独设置颜色。
- 可以使用 CSS 滤镜反转图片颜色以适应暗色模式。
- 依靠浏览器内置的暗色模式样式表，添加少量 CSS 即可实现良好效果。
❓
延伸问答
如何在网站上启用暗色模式？
可以在 HTML 的 <head> 中添加 <meta> 元素，或使用 CSS 设置 color-scheme 属性来启用暗色模式。
使用 CSS 设置暗色模式时需要注意什么？
应使用 CSS 变量管理颜色，避免硬编码，并考虑使用 prefers-color-scheme 媒体查询来单独设置颜色。
如何调整颜色以适应深色背景？
可以使用 OKLCH 色彩空间进行调整，确保颜色与深色背景融合良好。
使用 CSS 滤镜反转图片颜色有什么好处？
使用 CSS 滤镜可以简单地反转图片的亮度，以适应暗色模式，而无需修改图片本身。
在暗色模式下，如何确保颜色的可访问性？
可以使用混色功能和 CSS 系统颜色来创建柔和的颜色，保留用户的默认颜色偏好。
使用 light-dark() 函数有什么优势？
light-dark() 函数提供了一种方便的语法，可以同时指定两种颜色，适用于未来的浏览器。
➡️
