HTML网页中link标签通过媒体查询动态切换深浅主题色样式-html教程-PHP中文网

media="(prefers-color-scheme: dark)" 仅响应系统级深色模式设置，无法通过js手动触发；需配合data-theme属性与disabled dom操作实现可控主题切换，且初始化脚本须置于head顶部以避免闪屏。

html网页中link标签通过媒体查询动态切换深浅主题色样式

media="(prefers-color-scheme: dark)" 只能响应系统设置，不能手动触发

浏览器原生支持 media="(prefers-color-scheme: dark)"，但它只监听操作系统级偏好变更（如 macOS 设置深色模式），不会因用户点击按钮而改变。如果你在页面上放了个“切换深色模式”按钮，仅靠这个媒体查询是完全无效的——它压根不认你的 JS 调用。

常见错误是把 <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="dark.css"> 当作主题开关：页面加载时它可能生效，但用户点按钮后毫无反应，因为媒体查询状态没变。

它匹配的是系统信号，不是页面状态
IE11 及更老浏览器完全不支持，会直接忽略该 <link>
无法实现三主题（如浅色/深色/高对比度）或用户自定义主题

想手动切换主题，必须操作 link 元素的 disabled 属性

真正可控的方式是预置多个 <link rel="stylesheet">，全部带 data-theme 标识，然后用 JS 控制它们的 disabled 属性。浏览器对 disabled 的处理是立即生效、不重载、无 FOUC（闪屏）。

别写 document.querySelector('link[rel="stylesheet"]').href = 'dark.css' —— 这只会让旧样式失效，新 URL 不触发加载，页面瞬间无样式。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

所有主题 <link> 必须在 HTML 中静态声明，且初始只有一个未设 disabled
disabled 是 DOM 属性，必须用 link.disabled = true 设置，HTML 里写 disabled="true" 不起作用

切换函数示例：

function switchTheme(themeId) {
  document.querySelectorAll('link[data-theme]').forEach(link => {
    link.disabled = link.dataset.theme !== themeId;
  });
}

如何让系统偏好和用户选择不打架

用户开了系统深色模式，但自己又选了浅色主题，这时以谁为准？得靠初始化逻辑定优先级。通常：用户显式选择 > 系统偏好 > 默认浅色。

关键不在“怎么切”，而在“什么时候切”。如果 JS 在 DOMContentLoaded 里才读 localStorage 并设 data-theme，页面已经按默认样式渲染完了，必然闪一下。

初始化脚本必须塞进最顶部，且在所有 <link rel="stylesheet"> 之前
必须用 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...) 持续监听系统变更，不能只读一次
监听回调里要同步更新 document.documentElement.dataset.theme 和 localStorage，否则下次刷新就丢状态

CSS 变量 + data-theme 类比 media 查询更可靠

用 [data-theme="dark"] :root 覆盖 CSS 变量，比依赖 @media (prefers-color-scheme: dark) 更可控。前者由 JS 主动驱动，优先级更高，兼容性更好，还能嵌套多层主题（比如 data-theme="dark high-contrast"）。

例如，:root 定义基础变量，html[data-theme="dark"] :root 重新赋值，所有 var(--bg) 自动更新。这种方式不依赖外部文件加载，切换零延迟。

务必在上设 data-theme，不要用或其他容器，否则 CSS 变量继承链会断
不要混用 theme 和 data-theme 属性名，保持统一（推荐用 data-theme）
如果用了 <meta name="color-scheme" content="light dark">，也要在 JS 切换时同步更新它的 content 值