19.颜色方案 (color-scheme)

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; } /* 特定组件只使用浅色模式 */