第二章支线五 ·CSS炼金续章：变量与暗黑主题术
主线回顾
第二章：CSS秘典 · 色彩与布局的力量
其他支线
支线一：影之殿堂 · 阴影与过渡魔法
支线二：浮空之域：布局法则深研
支线三 ·CSS炼金术：动画与变换高级奥义
支线四 ·响应圣坛：媒体查询与移动适配
🎬 剧情设定：
在响应圣坛旅程告一段落后，林昊抵达一个昼夜交错的神秘空间——昼夜界域。这里一半明媚，一半幽暗，元素在不断变幻，风格时而清爽，时而神秘。
引导者「暮光术师·蕾娅」出现，她掌管网页主题的极昼与极夜魔法。她说道：
“唯有掌握‘风格抽象之术’，你才能让一个界面穿梭于光与影之间而不失统一。”
🌈 第一阶段：CSS变量（Custom Properties）入门
蕾娅伸出手，生成一块样式符文晶体，传授第一个法术：“定义风格之源。”
示例：定义主题变量
:root {--main-bg: #ffffff;--main-text: #222222;--primary-color: #3498db;
}
所有以 - - 开头的属性即为CSS变量，可在整个页面中调用。
body {background-color: var(--main-bg);color: var(--main-text);
}
button {background-color: var(--primary-color);
}
优点：
- 样式集中管理
- 多处复用
- 可动态切换（搭配 JavaScript）
🌗 第二阶段：构建暗黑与明亮双主题
蕾娅打开昼夜之匙，引导林昊创建双重风格维度。
默认主题（亮色）
:root {--bg-color: #ffffff;--text-color: #1e1e1e;
}
暗黑主题（可通过类名控制）
[data-theme="dark"] {--bg-color: #1e1e1e;--text-color: #eeeeee;
}
应用变量：
body {background-color: var(--bg-color);color: var(--text-color);transition: background 0.3s, color 0.3s;
}
关键逻辑：切换 data-theme 属性，就能动态改变整个主题。
🔄 第三阶段：通过 JavaScript 动态切换主题
暮光术师给出炼金指环控制器，让林昊激活“昼夜切换按钮”。
<button id="themeToggle">切换主题</button>
const toggleBtn = document.getElementById("themeToggle");
toggleBtn.addEventListener("click", () => {const current = document.documentElement.getAttribute("data-theme");const next = current === "dark" ? "light" : "dark";document.documentElement.setAttribute("data-theme", next);
});
可用 document.documentElement（即 ）作为变量容器。
🧠 第四阶段：变量复用与渐进增强
暮光之书打开，蕾娅传授进一步技巧：
示例：按钮样式统一管理
:root {--btn-bg: #3498db;--btn-text: white;--btn-radius: 8px;
}button {background-color: var(--btn-bg);color: var(--btn-text);border-radius: var(--btn-radius);padding: 10px 20px;
}
当主题切换时，只需改动变量值，按钮风格自动适配。
🎨 高阶技巧：系统主题感应
暮光术师轻抚光镜，示范如何自动适应用户操作系统的主题：
@media (prefers-color-scheme: dark) {:root {--bg-color: #1e1e1e;--text-color: #eeeeee;}
}
prefers-color-scheme 可自动检测用户系统是否处于暗黑模式。
🧪 魔法试炼任务
1.使用 :root 定义主色变量，统一按钮与链接颜色。
2. 创建 data-theme=“dark” 的主题切换器，实现页面明暗切换。
3. 加入系统感知能力，让用户第一次访问时默认使用系统主题。
✨ 收获与道具
炼金之门开启，林昊掌握了风格动态控制之法。
他获得神器：镜域之核，可自由在风格主题之间切换，为未来组件系统带来无穷拓展能力。