关键是以disabled属性控制预置的多套link样式表启停，而非增删节点或改href；HTML中需在head内一次性声明light和monochrome两套link并初始禁用后者，JS切换时仅修改对应disabled值，确保样式即时生效且无FOUC。
直接用 <link rel="stylesheet"> 引入黑白主题，关键不是“加一个 link”，而是**预置多套样式表 + 用 disabled 控制启用状态**。改 href 或只靠 title 都不可靠，容易白屏、失效或不生效。
怎么写 HTML 预置黑白两套 link 标签
必须在 <head> 里一次性声明所有主题样式表，用 id 区分，初始全部禁用（disabled 属性存在即禁用），仅留一套默认启用：
<link id="theme-light" rel="stylesheet" href="light.css"> <link id="theme-monochrome" rel="stylesheet" href="monochrome.css" disabled>
-
monochrome.css文件里定义纯黑、白、灰的变量和规则，比如：:root { --bg: #ffffff; --text: #000000; --border: #cccccc; } - 不要用
media或title当开关——media="(prefers-color-scheme: dark)"不管黑白主题，title只用于浏览器菜单暴露备用样式表，不参与 JS 主动切换 - 确保两个
<link>的rel都是"stylesheet"，否则disabled无效
怎么用 JS 切换到黑白主题（monochrome）
核心就是操作 DOM 元素的 disabled 属性，不是改 href，也不是删了再 append：
function switchToMonochrome() {
document.getElementById('theme-light').disabled = true;
document.getElementById('theme-monochrome').disabled = false;
}
- 调用前确认目标
<link>已在 DOM 中（建议放在<head>底部或用DOMContentLoaded包裹） - 切换后样式立即退出/进入渲染流程，无 FOUC，也不触发新网络请求（CSS 已预加载）
- 如果要持久化选择，加上：
localStorage.setItem('theme', 'monochrome')，并在页面加载时读取并执行对应switchToXxx()
为什么不能只改 href 指向黑白 CSS
看似简单，但有三个硬伤：
立即学习“前端免费学习笔记（深入）”；
- 浏览器对已存在的
<link>修改href，**不一定重新加载**——可能复用旧缓存、忽略新变量、甚至卡在旧规则里 - 旧样式不会自动退出渲染树，新样式又没完全就位，容易出现样式叠加、错乱或短暂白屏
- 无法保证
monochrome.css里的:root变量覆盖全局，因为加载时机和层叠顺序不可控
真正稳定的黑白主题切换，依赖的是「预加载 + 禁用控制」这一对组合。最容易被忽略的点是：所有主题 CSS 必须在首屏 HTML 中声明完毕，且初始只有一个未 disabled；否则用户第一次打开页面，可能压根看不到任何样式。
