使用 css 变量配合 :root 伪类或特定选择器是更优方案，因为它能实现全局样式的动态响应且无需操作 dom 中的 <link> 标签。具体做法是在 :root 中定义颜色变量，通过切换 body 的 class（如 dark-mode）来覆盖这些变量的值，浏览器会自动应用新样式，这种方式比动态修改 <link> 的 href 属性性能更好且代码更简洁。
CSS 变量与 Link 标签切换的性能差异是什么
CSS 变量方案在运行时开销更低，因为它是基于样式表的层叠机制，而切换 <link> 标签可能触发重下载或重解析。CSS 变量允许局部覆盖，而 <link> 切换通常意味着整个样式的替换。
// HTML
<link id="theme-style" rel="stylesheet" href="light.css">
// JS: 切换 Link
const link = document.getElementById('theme-style');
link.href = 'dark.css'; // 触发网络请求或缓存读取
// CSS 变量方案
:root { --bg: #fff; --text: #000; }
.dark-mode { --bg: #000; --text: #fff; }
body { background: var(--bg); color: var(--text); }
预期结果：CSS 变量方案无网络延迟，样式即时生效；Link 切换方案可能有闪烁或加载延迟。
立即学习“前端免费学习笔记（深入）”；
如何处理媒体查询与用户偏好的自动匹配
结合 prefers-color-scheme 媒体查询可以实现自动匹配，CSS 变量方案更容易与媒体查询集成，只需在媒体查询中定义 :root 的变量值即可。而 <link> 方案需要 JavaScript 监听媒体变化并动态切换 href，增加了复杂度。
@media (prefers-color-scheme: dark) {
:root {
--bg: #000;
--text: #fff;
}
}
/* JS 监听变化 */
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (e.matches) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
});
预期结果：CSS 变量方案在系统主题切换时无需 JS 干预即可自动适应（若仅用媒体查询），或仅需少量 JS 同步状态；Link 方案必须依赖 JS 监听和切换。
当 CSS 变量未定义时回退行为如何工作
CSS 变量支持 var(--name, fallback) 语法，当变量未定义时使用回退值，这提供了容错性。而 <link> 切换若文件加载失败会导致样式丢失，无内置回退机制。
