第二章支线五 ·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. 加入系统感知能力，让用户第一次访问时默认使用系统主题。

---

✨ 收获与道具

炼金之门开启，林昊掌握了风格动态控制之法。

他获得神器：镜域之核，可自由在风格主题之间切换，为未来组件系统带来无穷拓展能力。