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


✨ 收获与道具

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

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

相关推荐
paopaokaka_luck8 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失94941 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_43 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js