link标签本身不指定颜色主题，真正控制颜色的是css文件中的规则；可通过media="(prefers-color-scheme: dark)"原生切换暗色/亮色样式表，或用js配合data-theme属性实现手动切换。
link标签本身不能指定颜色主题
link 标签没有 color、theme 或 style 类属性，它不负责定义页面颜色。常见误解是把 <link rel="stylesheet"> 当作“主题开关”，其实它只是加载外部 CSS 文件——真正控制颜色的是那个 CSS 文件里的规则。
用 link + media="(prefers-color-scheme: dark)" 切换暗色/亮色样式表
这是目前最可靠、原生支持的“主题切换”方式，依赖用户系统偏好，无需 JS：
- 准备两个 CSS 文件：
light.css（定义亮色变量）和dark.css（定义暗色变量） - 在
中按顺序写两行：<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)"><br><link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
- 浏览器会根据系统设置自动选择其中一条生效，另一条不加载（注意：不是禁用，是媒体查询不匹配时不应用）
- ⚠️ 不能靠
rel="alternate stylesheet"实现手动切换——那是为用户提供可选样式表设计的，现代浏览器基本不支持 UI 暴露该功能
想手动切换主题？必须用 JavaScript 配合 data-theme 属性
如果需要用户点击按钮切换（比如右上角一个太阳/月亮图标），link 标签无法独立完成：
- 把所有主题色定义在 CSS 自定义属性里，例如：
:root { --bg: #fff; --text: #333; }<br>[data-theme="dark"] { --bg: #1a1a1a; --text: #eee; } - 用 JS 切换
或 - 不要试图用 JS 动态替换
link.href——容易造成 FOUC（闪白）、CSS 加载竞态，且破坏 preload scanner 的预加载逻辑 - 若坚持用多 CSS 文件方案，建议只保留一个
<link>，JS 改它的href并监听onload再更新data-theme，否则 class 可能先变、样式后到
color-scheme meta 标签是告诉浏览器“我支持什么主题”，不是设颜色
这个常被误认为是主题设置入口，其实它只影响表单控件、滚动条等 UA 控件的默认渲染风格：
- 加这行只是声明兼容性：
<meta name="color-scheme" content="light dark">
- 它不会改变你的
<h1></h1>颜色，也不会触发任何样式重绘 - 搭配
@media (prefers-color-scheme: dark)才能真正生效；单独写没用 - 不支持旧版 Safari（
[data-theme="dark"] 下改了 --bg，但某个组件用了 background: white 字面值，那就完全绕过了主题系统——所有颜色必须走变量，且确保 selector 足够具体。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
