如何根据用户深色模式偏好动态引入不同的CSS样式表？-css教程-PHP中文网

link标签动态加载css易致fouc、样式断裂、加载延迟及无系统偏好监听；应优先用@media变量覆盖，仅主题体积超100kb或第三方库强耦合时才选用，并需首次判断、变更监听、错误回退三步保障。

如何根据用户深色模式偏好动态引入不同的css样式表？

直接用 link 标签动态加载不同 CSS 文件是可行的，但容易出问题——比如 FOUC、重复加载、切换时样式断裂。更稳的方式是：优先用 @media (prefers-color-scheme: dark) 在单个 CSS 文件里做变量覆盖；只有在必须分离样式逻辑（如主题包体积大、第三方库强耦合）时，才走动态 link 加载。

为什么不该一上来就动态 `link` 引入样式表？

浏览器对 link 的加载和解析有延迟，window.matchMedia 检测到 dark 后插入 dark-theme.css，页面可能先按浅色渲染 100ms 再闪一下；而且没处理系统偏好变更监听，用户半夜切系统深色，网页不会自动响应。

link 加载是异步的，document.styleSheets 里查不到新样式，JS 无法可靠判断是否就绪
多个 link 并发加载时，CSS 层叠顺序难控，容易覆盖错
服务端渲染（SSR）场景下，初始 HTML 里没预置对应 link，首屏必白或错色
不加 rel="preload" 或 fetchpriority="high"，加载优先级低，滚动中才开始下载

真要用 `link` 动态引入，怎么写才不出错？

核心是三件事：首次加载立即判断、后续变更主动监听、加载失败有 fallback。别只靠一次 matches 判断就完事。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

用 window.matchMedia('(prefers-color-scheme: dark)') 获取当前值，而不是读 localStorage ——后者只存手动选择，会覆盖系统偏好
插入 link 前先移除旧主题的 link，避免残留样式干扰：document.querySelectorAll('link[data-theme]').forEach(el => el.remove())
给 link 加 data-theme="dark" 属性，方便后续识别和清理
监听变更：mediaQuery.addListener(() => { /* 重新加载对应 link */ })，不是只在初始化时跑一次
加 onload 和 onerror 回调，onerror 里可回退到内联变量方案，避免白屏

示例片段：

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
function loadTheme(isDark) {
  const themeLink = document.querySelector('link[data-theme]');
  if (themeLink) themeLink.remove();
<p>const link = document.createElement('link');
link.rel = 'stylesheet';
link.dataset.theme = isDark ? 'dark' : 'light';
link.href = isDark ? '/css/dark.css' : '/css/light.css';
link.onload = () => console.log('theme loaded');
link.onerror = () => document.documentElement.classList.add('fallback-light');
document.head.appendChild(link);
}
loadTheme(mediaQuery.matches);
mediaQuery.addListener(e => loadTheme(e.matches));</p>