主题文件引入需通过JS切换link的media属性触发加载，初始设为media="print"，再设为"all"；纯CSS媒体查询无法按需加载外部文件。
主题文件引入不成功，通常不是媒体查询本身的问题，而是加载时机、条件匹配或 HTML 结构细节没处理好。关键在于：link 标签必须带 media 属性且初始值为不匹配的媒体类型（如 media="print"），再通过 JS 切换 media 值来触发浏览器加载；纯 CSS 媒体查询（如 @media (prefers-color-scheme: dark)）无法按需加载外部 CSS 文件，它只控制已有样式的生效范围。
✅ 正确做法：用 JS 控制 link 的 media 属性
HTML 中预先写好 link 标签，但设为“不激活”状态，等 JS 判断后才让它生效：
- 在
中写： css" media="print"> - JS 根据需要切换：
document.getElementById('theme-style').media = 'all'; // 触发加载 dark.css
document.getElementById('theme-style').href = 'light.css'; // 可选：换地址
document.getElementById('theme-style').media = 'all'; // 再次触发加载新文件 -
注意：改
href后必须重新设media（哪怕已经是'all'），否则浏览器可能不重新请求
⚠️ 常见失败原因
-
media 值一开始就是
'all'或空字符串 → 浏览器页面加载时已尝试请求，后续改 href 不会重载 - JS 执行太早（比如放在 head 里没 defer） → DOM 还没解析到 link 标签，获取不到元素
- CSS 文件路径错误或跨域 → 检查浏览器 Network 面板，看是否 404 或 CORS 报错
-
用了
disabled属性代替 media 控制 →disabled不触发加载，仅禁用样式应用
? 补充技巧：配合 prefers-color-scheme 自动切换
可以监听系统主题变化，自动更新：
- 用
window.matchMedia('(prefers-color-scheme: dark)')获取当前偏好 - 用
.addEventListener('change', ...)监听切换事件 - 结合上面的 media 切换逻辑，实现“系统变暗，页面自动加载 dark.css”
基本上就这些。核心就一条：靠 media 属性的“开关”行为来触发加载，而不是指望 CSS 媒体查询去拉新文件。
立即学习“前端免费学习笔记（深入）”；
