仅加<meta name="color-scheme" content="light dark">是必要但不充分的——它仅触发表单、滚动条等原生控件自动适配系统主题，不改变自定义CSS颜色、SVG或Canvas；必须硬编码于<head>中，不可JS动态插入，且需配合color-scheme CSS属性与@media (prefers-color-scheme: dark)覆盖变量才完整。
只在 HTML 里加 <meta name="color-scheme" content="light dark"> 是必要但不充分的——它能解锁表单、滚动条、焦点环等原生控件的自动适配，但不会改变你写的 background-color 或 color，也不影响 SVG 图标、图片或 Canvas 渲染。
必须写在 <head> 里，且不能靠 JS 动态插入
这个 <meta name="color-scheme" content="light dark"> 必须硬编码在 HTML 的 <head> 中。浏览器在解析 HTML 初期就读取它，决定是否启用 UA 控件的深色渲染逻辑。用 JavaScript 动态创建并 append 进去完全无效，尤其在 iOS Safari 和部分安卓 WebView 中会直接忽略。
- 正确写法：
<meta name="color-scheme" content="light dark">放在<title>后、其他<meta>前（顺序无关紧要，但需在 DOM 构建前存在） - content 值只能是
light、dark或空格分隔的组合，auto、system、default都会被浏览器当作无效值丢弃 - 旧版 Safari（iOS 13.4 之前）不支持该 meta，需 fallback 到 JS 检测 +
document.documentElement.classList.toggle('dark')
color-scheme CSS 属性和 meta 标签不是替代关系
color-scheme CSS 属性（比如写在 :root 上）和 <meta name="color-scheme"> 各司其职：前者声明“某个元素及其子元素内原生控件应按什么方案渲染”，后者是全局开关，告诉浏览器“整个页面支持双模式”。缺一不可。
- 只写
:root { color-scheme: light dark; }→ 表单在 Safari/iOS WebView 中仍可能白底黑字 - 只写
<meta name="color-scheme" content="light dark">→ 你的自定义文字、背景色、SVG 图标全无变化 - 两者都写，才是完整起点；再配合
@media (prefers-color-scheme: dark)覆盖变量，才算真正可用
input/select 等表单控件仍显白？检查是否漏了 meta 或写了错的 media 查询
常见现象：系统设为深色，但 <input> 底色还是白的，<select> 下拉箭头没变暗，::-webkit-scrollbar-thumb 仍是浅灰。根本原因通常是：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 没加
<meta name="color-scheme" content="light dark">—— 浏览器默认按light渲染原生控件 - 写了
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }—— 旧版 Safari 直接跳过嵌套媒体查询，导致变量未覆盖 - 用了
prefers-dark-scheme（已废弃）而非标准的(prefers-color-scheme: dark) -
<meta name="color-scheme">写在<body>里，或被其他脚本覆盖、重复插入
滚动条、焦点环、CanvasText 等系统语义色要用对
color-scheme 和 prefers-color-scheme 共同作用下，浏览器会暴露一组系统语义色，如 Canvas、CanvasText、ButtonFace。它们比硬编码十六进制更稳，能随高对比度、深色/浅色设置微调亮度与饱和度。
- 写法示例：
background-color: Canvas; color: CanvasText;—— 但注意：这些值不支持 alpha，CanvasAlpha无效 - 需要半透效果时，用
color-mix(in srgb, CanvasText 70%, transparent)（Chrome 111+），或 fallback 到 CSS 变量 - 内联 SVG 图标不会自动反色，
fill: currentColor或fill: var(--icon-fill)才能响应主题变化 -
::-webkit-scrollbar-thumb等伪元素必须显式用变量或系统色重写，否则仍走默认浅色
最容易被忽略的是：所有使用 var(--bg) 的地方，都得先在 :root 里定义默认值；<meta name="color-scheme"> 不负责兜底，它只管原生控件，不管你的 CSS 变量有没有 fallback。
