第二章支线五 ·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 定义主色变量,统一按钮与链接颜色。

  1. 创建 data-theme="dark" 的主题切换器,实现页面明暗切换。

  2. 加入系统感知能力,让用户第一次访问时默认使用系统主题。


✨ 收获与道具

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

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

相关推荐
伍哥的传说37 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783839 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为