第二章支线五 ·CSS炼金续章：变量与暗黑主题术

主线回顾

第二章：CSS秘典 · 色彩与布局的力量

其他支线

支线一：影之殿堂 · 阴影与过渡魔法
 支线二：浮空之域：布局法则深研
 支线三 ·CSS炼金术：动画与变换高级奥义
 支线四 ·响应圣坛：媒体查询与移动适配

🎬 剧情设定：

在响应圣坛旅程告一段落后，林昊抵达一个昼夜交错的神秘空间------昼夜界域。这里一半明媚，一半幽暗，元素在不断变幻，风格时而清爽，时而神秘。

引导者「暮光术师·蕾娅」出现，她掌管网页主题的极昼与极夜魔法。她说道：

"唯有掌握'风格抽象之术'，你才能让一个界面穿梭于光与影之间而不失统一。"

🌈 第一阶段：CSS变量（Custom Properties）入门

蕾娅伸出手，生成一块样式符文晶体，传授第一个法术："定义风格之源。"

示例：定义主题变量

css 复制代码

:root {
  --main-bg: #ffffff;
  --main-text: #222222;
  --primary-color: #3498db;
}

所有以 - - 开头的属性即为CSS变量，可在整个页面中调用。

css 复制代码

body {
  background-color: var(--main-bg);
  color: var(--main-text);
}
button {
  background-color: var(--primary-color);
}

优点：

样式集中管理
多处复用
可动态切换（搭配 JavaScript）

🌗 第二阶段：构建暗黑与明亮双主题

蕾娅打开昼夜之匙，引导林昊创建双重风格维度。

默认主题（亮色）

css 复制代码

:root {
  --bg-color: #ffffff;
  --text-color: #1e1e1e;
}

暗黑主题（可通过类名控制）

css 复制代码

[data-theme="dark"] {
  --bg-color: #1e1e1e;
  --text-color: #eeeeee;
}

应用变量：

css 复制代码

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
}

关键逻辑：切换 data-theme 属性，就能动态改变整个主题。

🔄 第三阶段：通过 JavaScript 动态切换主题

暮光术师给出炼金指环控制器，让林昊激活"昼夜切换按钮"。

html 复制代码

<button id="themeToggle">切换主题</button>

javascript 复制代码

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（即）作为变量容器。

🧠 第四阶段：变量复用与渐进增强

暮光之书打开，蕾娅传授进一步技巧：

示例：按钮样式统一管理

css 复制代码

: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;
}

当主题切换时，只需改动变量值，按钮风格自动适配。

🎨 高阶技巧：系统主题感应

暮光术师轻抚光镜，示范如何自动适应用户操作系统的主题：

css 复制代码

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1e1e1e;
    --text-color: #eeeeee;
  }
}

prefers-color-scheme 可自动检测用户系统是否处于暗黑模式。

🧪 魔法试炼任务

1.使用 :root 定义主色变量，统一按钮与链接颜色。

创建 data-theme="dark" 的主题切换器，实现页面明暗切换。
加入系统感知能力，让用户第一次访问时默认使用系统主题。

✨ 收获与道具

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

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