CSS Academy · 课时

color-scheme 属性

Q: 「color-scheme 属性」这节课中我会学到什么？

使用 color-scheme 属性告知浏览器某个元素支持哪些主题。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 color-scheme 属性告知浏览器某个元素支持哪些主题。

color-scheme 属性 是 CoddyKit 上的免费 CSS Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是颜色方案

color-scheme 属性告诉浏览器某个元素（或整个页面）支持哪些颜色方案。浏览器随后会利用这些信息设置自身界面元素的样式——滚动条、表单控件、复选框、输入框边框——使其与请求的方案保持一致。

颜色方案取值

可接受的取值：

normal：元素使用文档默认方案
light：元素仅支持浅色方案
dark：元素仅支持 dark 方案
light dark：同时支持两种方案；浏览器根据偏好选择
dark light：优先使用 dark，回退到浅色

浏览器界面元素

浏览器会根据颜色方案自动设置以下元素的样式：

滚动条
输入框、文本区域和选择下拉框
复选框、单选按钮
范围滑块
日期/时间选择器

在 html 元素上设置

在根元素上设置颜色方案，会改变整个页面的 system 界面渲染方式：

<input type="checkbox" /> <select><option>A</option><option>B</option></select>

元标签等效写法

您也可以在 HTML 中通过元标签声明颜色方案，以便更早应用（在 CSS 加载之前）：

<pre class="code-sample">&lt;meta name="color-scheme" content="light dark"&gt;</pre>

不使用自定义颜色的 dark 模式

一种最简 dark 模式：设置 color-scheme: dark，让浏览器自动处理表单元素和滚动条：

<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />

结合颜色方案偏好

使用 prefers-color-scheme 检测偏好，并同时设置自定义令牌和颜色方案属性：

<div class="demo">Themed via variables + color-scheme</div>

作用域化的颜色方案

将颜色方案应用于特定元素，即可在 dark 页面中创建相互隔离的浅色区域：

<div class="light-widget">Always-light widget<br/><input type="date" /></div>

强制颜色 / Windows 高对比度

forced-colors 媒体查询可以检测 Windows 高对比度模式。请结合使用 color-scheme 和 forced-colors，以提供全面的无障碍支持。

<div class="card">Card respects forced-colors mode</div>

系统颜色关键字

启用强制颜色时，请使用映射到用户无障碍配色的 CSS 系统颜色关键字：

<button>System-styled button</button>

快速检查

在 html 元素上设置 color-scheme: dark 会启用哪种 CSS 行为？

回顾

color-scheme 会指示浏览器如何设置某个元素或页面自身界面控件的样式。在全局设置 color-scheme: light dark，即可启用原生界面的自动适配。将其与 CSS 自定义属性结合，实现完整的 dark 模式。在 CSS 加载前使用元标签，以便尽早应用。

常见问题解答

「color-scheme 属性」课时是免费的吗？

是的 — 「color-scheme 属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「color-scheme 属性」这节课中我会学到什么？

使用 color-scheme 属性告知浏览器某个元素支持哪些主题。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「color-scheme 属性」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy