)
color-scheme CSS属性允许Web内容指示它支持哪些颜色方案，使其能够自动适应用户的首选颜色方案，而无需自定义样式。
📖 本章概述
color-scheme属性是现代CSS中一个强大的特性，它让网页能够智能地适应用户的系统颜色偏好（如深色模式或浅色模式）。通过简单的声明，浏览器会自动调整页面的默认颜色、表单控件、滚动条等系统元素，为用户提供一致的视觉体验。
🎯 学习目标
理解color-scheme属性的基本概念和作用机制
掌握不同颜色方案值的含义和使用场景
学会与prefers-color-scheme媒体查询结合使用
了解在不同元素上应用颜色方案的技巧
掌握创建自适应主题系统的最佳实践
学会处理浏览器兼容性和降级方案
掌握与CSS自定义属性结合的高级应用
🚀 color-scheme基础
基本语法
/* 基本语法 */ :root { color-scheme: light dark; } /* 单一颜色方案 */ .light-only { color-scheme: light; } .dark-only { color-scheme: dark; } /* 正常模式（浏览器默认） */ .normal { color-scheme: normal; } /* 仅支持特定方案 */ .only-light { color-scheme: only light; } .only-dark { color-scheme: only dark; }核心概念
自动适应: 浏览器根据用户系统偏好自动调整颜色
系统集成: 影响表单控件、滚动条等系统元素
优先级顺序: 值的顺序决定了首选的颜色方案
元素级控制: 可以为特定元素设置不同的颜色方案
🎨 基础应用示例
全局颜色方案设置
/* 支持浅色和深色模式，优先浅色 */ :root { color-scheme: light dark; } /* 支持深色和浅色模式，优先深色 */ :root { color-scheme: dark light; } /* 仅支持浅色模式 */ :root { color-scheme: light; } /* 仅支持深色模式 */ :root { color-scheme: dark; } /* 使用浏览器默认 */ :root { color-scheme: normal; }元素级颜色方案
/* 文档级设置 */ :root { color-scheme: light dark; } /* 特定组件只使用浅色模式 */
