CSS color-scheme 和夜间模式
💡
原文中文，约3400字，阅读约需9分钟。
📝
内容提要
color-scheme是CSS属性，用于更改浏览器配色方案，包括白天和夜间模式。它适用于表单控件、滚动条和系统颜色。color-scheme和prefers-color-scheme相辅相成，前者适配原生样式，后者适配自定义样式。兼容性高，不影响页面。
🎯
关键要点
- color-scheme是CSS属性，用于更改浏览器配色方案，包括白天和夜间模式。
- color-scheme的语法包括normal、light、dark等选项。
- color-scheme的作用范围有限，主要影响表单控件、滚动条和CSS系统颜色。
- 表单元素可以通过color-scheme实现深色模式的渲染。
- color-scheme可以改变滚动条的配色模式，避免自定义滚动条样式的麻烦。
- CSS系统颜色会根据color-scheme自动适应深色模式。
- color-scheme与prefers-color-scheme相辅相成，前者适配原生样式，后者适配自定义样式。
- 使用color-scheme可以更好地支持深色模式，提升用户体验。
- color-scheme的兼容性要求较高，但不影响页面功能，支持时体验更佳。
➡️
