color-scheme 不是深色模式开关，仅声明支持的系统配色方案；必须用 在 中提前声明，才能触发浏览器对原生控件和滚动条的自动适配。
color-scheme 不是深色模式开关，它只负责告诉浏览器「我支持哪些系统配色方案」。不声明，原生控件（input、select、button、滚动条等）在深色系统下仍会显示浅色样式，且无法触发自动基础适配。
必须用 <meta name="color-scheme"> 声明全局支持
仅靠 CSS 的 color-scheme 属性（如 :root { color-scheme: light dark; }）不足以让浏览器提前启用系统级适配逻辑。真正起效的第一步，是在 HTML 的 中插入 <meta> 标签：
-
<meta name="color-scheme" content="light dark">是最常用且推荐的写法，明确声明同时支持两种方案 -
content="light"会强制禁用深色适配，哪怕系统设为深色；content="dark"同理（但极少用，因违背用户偏好） - 该标签必须位于
内，且越早越好——放在<title></title>前更稳妥，避免初始渲染闪屏 - 不要写成
name="theme"或拼错为color-sceheme，否则完全无效
color-scheme CSS 属性只影响特定元素
CSS 中的 color-scheme 属性不会改变你自定义样式的颜色，它的作用范围非常明确：
- 仅作用于使用 CSS 系统颜色（如
Canvas、ButtonFace、Highlight）的元素，以及原生表单控件（input、textarea、select、button、progress、meter）和滚动条 - 如果你给
input显式写了background-color: #f0f0f0，那color-scheme就不会动它；但没写时，它会按系统主题自动选背景色 - 写在
:root上可全局生效：:root { color-scheme: light dark; }；也可局部写在某个div上，仅影响其内部原生控件 - 值只能是
normal（默认，等价于light）、light、dark或空格分隔的组合，不支持auto或其他字符串
为什么 prefers-color-scheme 不能替代 color-scheme 声明
@media (prefers-color-scheme: dark) 是用来做自定义样式覆盖的，但它本身不触发浏览器对原生控件的基础适配。常见误区：
- 只加媒体查询却不加
<meta name="color-scheme">→ 滚动条仍是浅色，input边框/聚焦态不随系统变，button默认背景不变 - 以为写了
@media (prefers-color-scheme: dark) { body { background: #121212; } }就万事大吉 → 实际上系统级控件仍可能与页面背景冲突（比如深色背景 + 浅色input） -
prefers-color-scheme是检测手段，color-scheme是授权声明；前者告诉你“用户想要什么”，后者告诉浏览器“我可以配合什么”
最容易被忽略的是：即使你用 JS 动态切换 class 或 CSS 变量实现了完整主题，只要没加 <meta name="color-scheme">，原生滚动条和未显式重置样式的表单控件就仍会按默认逻辑渲染，和你的设计脱节。这在 macOS / iOS / Windows 11 深色模式下尤其明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
