Frontend Academy · 课时

用于主题设置的 CSS 变量

Q: 「用于主题设置的 CSS 变量」这节课中我会学到什么？

使用 -- 声明自定义属性，在嵌套作用域中使用 var() 覆盖它们，并实现浅色/深色主题切换。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 -- 声明自定义属性，在嵌套作用域中使用 var() 覆盖它们，并实现浅色/深色主题切换。

用于主题设置的 CSS 变量 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 CSS 自定义属性

CSS 自定义属性（CSS 变量）用于存储可在整个样式表中重复使用的值。使用 --name: value 声明，并通过 var(--name) 访问。与预处理器变量（例如 Sass）不同，它们是动态的——您可以使用 JavaScript 更新它们。

声明自定义属性

在 :root 上声明属性，可以让它们全局可用。您也可以在任意元素上声明属性，将其作用域限制在该元素的后代树中。

:root {
  --color-primary: #3182ce;
  --color-bg: #f7fafc;
  --color-text: #1a202c;
  --spacing-md: 16px;
  --border-radius: 8px;
  --font-sans: 'Inter', system-ui, sans-serif;
}

使用自定义属性

使用 var(--name) 引用变量。将备用值作为第二个参数传入：var(--color-primary, #3182ce)。如果变量未定义，就会使用备用值。

.card {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
}

.btn {
  background: var(--color-primary, blue); /* fallback */
}

层叠：作用域变量

自定义属性会参与层叠并继承。如果您在子元素上重新定义变量，它会覆盖该元素及其所有后代所继承的父元素值。

:root { --accent: blue; }

.card { color: var(--accent); } /* blue */

.special-section {
  --accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */

使用 CSS 变量实现深色模式

最简洁的深色模式方案是：将浅色和深色调色板定义为 CSS 变量。切换一个类，或使用颜色方案偏好媒体查询进行切换。无需覆盖单个颜色属性。

:root {
  --bg: #ffffff;
  --text: #1a202c;
  --card-bg: #f7fafc;
}

[data-theme='dark'], @media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a202c;
    --text: #f7fafc;
    --card-bg: #2d3748;
  }
}

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

使用 JavaScript 切换深色模式

添加一个切换按钮，让它在根元素上切换数据属性或类。剩下的工作由 CSS 变量处理——只需一行 JavaScript，无需逐个覆盖样式。

const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme');
  document.documentElement.setAttribute(
    'data-theme',
    current === 'dark' ? 'light' : 'dark'
  );
});

使用 JavaScript 更新变量

element.style.setProperty('--name', value) 会以内联方式更新自定义属性。使用 removeProperty 移除该属性后，会恢复层叠值。这使动态主题和动画值成为可能。

// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');

// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
  document.documentElement.style.setProperty('--primary-hue', hue.value);
});

将设计令牌定义为 CSS 变量

请将所有设计决策——色彩调色板、间距比例、字体比例——定义为 CSS 变量。这样可以建立一个由组件使用的唯一事实来源。修改令牌后，更改会立即传播到所有位置。

:root {
  /* Colour scale */
  --blue-50: #ebf8ff;
  --blue-100: #bee3f8;
  --blue-500: #3182ce;
  --blue-900: #1a365d;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
}

在 calc() 中使用变量

CSS 变量可以在 calc() 中使用，从而根据令牌值进行响应式计算。

:root { --header-height: 64px; }

.content {
  /* Leave room for fixed header */
  padding-top: calc(var(--header-height) + 24px);
  min-height: calc(100vh - var(--header-height));
}

浏览器支持

所有现代浏览器都支持 CSS 自定义属性（主要浏览器自 2016 年起支持）。使用此功能无需预处理器。对于非常旧的浏览器，请在 var() 之前提供一个静态值作为回退。

.btn {
  background: blue;                    /* IE fallback */
  background: var(--color-primary);    /* modern browsers */
}

自定义属性与 Sass 变量

Sass 变量会被编译为静态值。CSS 自定义属性存在于运行时，具有动态性，可以通过 JavaScript 修改，并且会沿 DOM 层叠。请使用 CSS 变量实现主题，使用 Sass 变量表示构建时常量。

快速检查

如何从 JavaScript 中读取和更新 CSS 自定义属性？

回顾：CSS 自定义属性

在 :root 上使用 -- 声明全局作用域。使用 var() 引用变量。具有作用域的变量会向后代元素层叠。深色模式：在媒体查询或数据属性中重新定义颜色令牌。使用 style.setProperty() 从 JavaScript 更新属性。将设计令牌定义为变量 = 唯一事实来源。

常见问题解答

「用于主题设置的 CSS 变量」课时是免费的吗？

是的 — 「用于主题设置的 CSS 变量」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「用于主题设置的 CSS 变量」这节课中我会学到什么？

使用 -- 声明自定义属性，在嵌套作用域中使用 var() 覆盖它们，并实现浅色/深色主题切换。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「用于主题设置的 CSS 变量」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy