CSS color-scheme 和夜间模式
💡
原文中文，约3400字，阅读约需9分钟。
📝
内容提要
color-scheme是一个与深色模式相关的CSS属性，用于更改浏览器的配色方案。它可以指定元素的配色方案，如normal、light、dark等。color-scheme的作用范围包括表单控件、滚动条和CSS系统颜色的使用值。与prefers-color-scheme不同，color-scheme不会干涉prefers-color-scheme的判断。使用color-scheme属性可以提升页面的视觉体验。
🎯
关键要点
-
color-scheme是与深色模式相关的CSS属性，用于更改浏览器的配色方案。
-
color-scheme的语法包括normal、light、dark等选项。
-
color-scheme的作用范围包括表单控件、滚动条和CSS系统颜色的使用值。
-
color-scheme可以提升页面的视觉体验，支持深色模式的渲染。
-
表单元素可以通过color-scheme属性实现深色模式的渲染。
-
color-scheme也能改变滚动条的配色模式，简化了自定义滚动条的需求。
-
CSS系统颜色会根据color-scheme自动适应深色模式。
-
color-scheme与prefers-color-scheme没有必然联系，但可以相辅相成。
-
使用color-scheme可以更好地支持深色模式，适配浏览器原生样式。
-
color-scheme的兼容性要求较高，但支持时能提升用户体验。
➡️
