几乎不使用 CSS 的暗色模式
内容提要
Feep 现支持暗色模式，用户可通过简单的 CSS 或 HTML 设置实现，主题会根据系统设置自动调整，用户可自定义颜色以适应深色背景。使用 prefers-color-scheme 媒体查询可兼容设置，整体实现更简单。
关键要点
-
Feep 现支持暗色模式，用户可通过简单的 CSS 或 HTML 设置实现。
-
主题会根据系统设置自动调整，用户可自定义颜色以适应深色背景。
-
使用 <meta> 元素或 CSS 设置暗色模式，支持在任意元素上指定颜色模式。
-
大部分暗色主题可以通过启用浏览器的本地暗色模式样式表实现。
-
用户可能需要调整颜色以适应深色背景，使用 OKLCH 色彩空间进行调整。
-
使用 CSS 变量来管理颜色，避免硬编码。
-
light-dark() 函数和 CSS 系统颜色可用于创建柔和的颜色。
-
使用 prefers-color-scheme 媒体查询来为暗色模式单独设置颜色。
-
可以使用 CSS 滤镜反转图片颜色以适应暗色模式。
-
依靠浏览器内置的暗色模式样式表，添加少量 CSS 即可实现良好效果。
延伸解读
暗色模式的实现方式
Feep 的暗色模式可以通过简单的 HTML 或 CSS 设置实现，用户只需在 <head> 中添加 <meta> 元素或使用 CSS 属性即可。这种简化的实现方式使得网站开发者能够快速适应用户的需求，尤其是在用户偏好暗色模式的情况下。
颜色调整的重要性
虽然浏览器的默认暗色模式样式表可以提供基本的支持，但大多数网站仍需进行颜色调整以确保视觉效果。使用 OKLCH 色彩空间进行调整可以帮助设计师更好地适应深色背景，提升用户体验。
CSS 变量的优势
在暗色模式的实现中，使用 CSS 变量管理颜色是一个明智的选择。这样可以避免硬编码，提高样式表的可维护性和灵活性，尤其是在需要频繁调整颜色时，能够显著减少工作量。
使用 prefers-color-scheme 媒体查询
通过 prefers-color-scheme 媒体查询，开发者可以为暗色模式单独设置颜色。这种方法虽然在样式表中可能导致可读性下降，但它是实现兼容性和用户偏好的有效手段，值得开发者关注。
延伸问答
如何在网站上启用暗色模式？
可以在 HTML 的 <head> 中添加 <meta> 元素，或使用 CSS 设置 color-scheme 属性来启用暗色模式。
使用 CSS 设置暗色模式时需要注意什么？
应使用 CSS 变量管理颜色，避免硬编码，并考虑使用 prefers-color-scheme 媒体查询来单独设置颜色。
如何调整颜色以适应深色背景？
可以使用 OKLCH 色彩空间进行调整，确保颜色与深色背景融合良好。
使用 CSS 滤镜反转图片颜色有什么好处？
使用 CSS 滤镜可以简单地反转图片的亮度，以适应暗色模式，而无需修改图片本身。
在暗色模式下，如何确保颜色的可访问性？
可以使用混色功能和 CSS 系统颜色来创建柔和的颜色，保留用户的默认颜色偏好。
使用 light-dark() 函数有什么优势？
light-dark() 函数提供了一种方便的语法，可以同时指定两种颜色，适用于未来的浏览器。
