CSS 自定义属性实战

学习CSS变量应用 · 难度：进阶 · +15XP

CSS自定义属性实战

CSS变量（也叫自定义属性）可以在运行时动态改变，非常适合实现主题切换。

基本用法

:root {
  --primary: #2563eb;
  --bg: #ffffff;
  --text: #111827;
  --spacing: 16px;
}

/* 使用 var() 函数引用 */
.btn { background: var(--primary); padding: var(--spacing); }
.card { background: var(--bg); color: var(--text); }

/* 提供默认值：var(--name, fallback) */
.btn { color: var(--btn-text, #fff); }

实战：日间/夜间模式切换

:root { --bg: #fff; --text: #111; }
[data-theme="dark"] { --bg: #111; --text: #fff; }
body { background: var(--bg); color: var(--text); }

document.documentElement.setAttribute("data-theme","dark"); // 切换

???? 任务

定义3个CSS变量(主色/背景/文字色)，创建两个按钮使用这些变量