color-scheme是css属性，只能通过css声明，不可用meta标签；应写在:root中（如:root{color-scheme:light dark;}）或html的style属性里，不继承，设在body或div无效。
color-scheme 声明在哪写？必须放 <meta> 里吗？
不是。color-scheme 是 CSS 属性，**只能通过 CSS 声明**，不能用 <meta> 或 HTML 属性设置。常见错误是去 里加 <meta name="color-scheme" ...> —— 浏览器完全忽略，毫无效果。
正确位置有两个：
- 写在
:root伪类里（推荐），作用于整个页面：:root { color-scheme: light dark; } - 写在
元素的style属性中（临时调试可用）：
注意：它不继承，所以只设在 :root 或 才能生效；设在 body 或某个 div 上无效。
light dark 还是 only dark？color-scheme 的值怎么选？
浏览器会根据这个声明，决定是否把原生控件（如 <input type="range">、<select></select>、滚动条、焦点框等）切换为对应配色。但它不会自动改你的 CSS 颜色，只是“允许”系统渲染适配。
常用取值和实际影响：
-
color-scheme: light;→ 只启用浅色系统样式，即使用户开了深色模式，控件仍按浅色渲染 -
color-scheme: dark;→ 只启用深色系统样式，无视系统偏好 -
color-scheme: light dark;→ 告诉浏览器“我支持两种”，系统会按用户偏好自动切换原生控件样式（最常用） -
color-scheme: only dark;→ 实验性语法，目前仅 Safari 支持，表示“强制深色，且禁止用户手动切回浅色”（不推荐用于生产）
别写 color-scheme: auto; —— 它不是标准值，Chrome/Firefox 不识别。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
写了 color-scheme 但滚动条/输入框没变色？
大概率是因为你没同时提供对应的 CSS 颜色变量，或者用了不支持该属性的旧浏览器。
关键点：
-
color-scheme本身只影响原生表单控件和滚动条，不影响你写的div、button等自定义元素的颜色 - 它依赖系统级渲染，所以 Firefox 目前完全不支持（截至 v128），Chrome 101+、Safari 15.4+、Edge 101+ 支持良好
- 滚动条颜色还需额外声明
::-webkit-scrollbar（WebKit/Blink）或scrollbar-color（Firefox 用这个，但和color-scheme无关） - 如果你用
appearance: none干掉了原生样式，那color-scheme就彻底失效了 —— 它只对有原生外观的元素起作用
和 @media (prefers-color-scheme) 是什么关系？
color-scheme 和 @media (prefers-color-scheme) 要配合用，不是二选一。
典型分工：
-
color-scheme: light dark;→ 告诉浏览器：“我的原生控件可适配”，让<input>、<textarea></textarea>等自动换肤 -
@media (prefers-color-scheme: dark) { ... }→ 主动重写你自己的 CSS，比如改background、color、阴影等
漏掉前者，原生控件卡在浅色；漏掉后者，你的文字/背景还是白底黑字。两者缺一不可。另外，@media 查询无法触发 color-scheme 的声明 —— 它们是独立机制，不能互相替代。
真正容易被忽略的是：当你用 CSS 自定义了所有表单样式（比如重写了 input[type="checkbox"] 的 ::before），那 color-scheme 就只剩滚动条和少数几个控件能起效了 —— 此时它价值大幅缩水，得靠媒体查询 + 变量全盘接管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
