CSS 变量怎么用？怎么实现暗色模式和主题切换？

详细解析#

语法、作用域与继承#

• 声明：--brand: #3b82f6;，名字区分大小写
• 读取：color: var(--brand);，第二个参数是回退值：var(--brand, blue)
• 作用域：在哪个选择器里声明，就在那个元素及其后代上生效。写在 :root 上就是全局变量，写在 .card 上只影响卡片内部
• 继承：自定义属性默认会继承，子元素可以覆盖，覆盖后只影响自己的子树

回退值只在变量没有定义（或被设成 initial）时使用。如果变量定义了、但值对当前属性不合法（比如 --size: red 用在 width 上），这条声明在计算值阶段才失效（规范叫 invalid at computed-value time），效果相当于 unset：可继承属性取父元素的值，其他属性取初始值，而不是回到前面写过的其他声明，也不会用 var() 的回退值。

和预处理器变量的区别#

JS 读写#

getComputedStyle(el).getPropertyValue('--brand') 读取计算后的值，el.style.setProperty('--brand', '#f60') 修改。改一个变量，所有引用它的样式都会更新，适合主题色、拖拽位置这类需要 JS 驱动的样式。

暗色模式和主题切换#

1. 定义语义化变量，比如 --bg、--text、--border，组件里只用变量，不写死颜色
2. :root 写浅色值，[data-theme="dark"] 覆盖成深色值
3. 用户没有手动选择时，用 @media (prefers-color-scheme: dark) 跟随系统
4. 用户手动切换后，把选择存到 localStorage，在 html 上设置 data-theme
5. 在 head 里内联一小段同步脚本，在页面绘制前读出偏好并设置属性，避免先闪一下浅色

color-scheme 属性告诉浏览器页面支持哪些配色，浏览器会让滚动条、表单控件、默认背景色也切成暗色。写成 light dark 时浏览器跟随系统选，用户手动切换主题后，要把它改成对应的单一值，否则系统是浅色时控件仍是浅色。

代码示例#

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1f2328;
}

/* 用户手动选择暗色；color-scheme 也要跟着改，表单控件、滚动条才会同步 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117;
  --text: #e6edf3;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* 没有手动选择浅色时，跟随系统 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117;
    --text: #e6edf3;
  }
}

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

<head>
  <!-- 同步执行，在首次绘制前设置好主题 -->
  <script>
    try {
      const theme = localStorage.getItem('theme')
      if (theme) document.documentElement.dataset.theme = theme
    } catch (e) {}
  </script>
</head>

面试官可能追问#

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

易错点#

• var() 的回退值只在变量未定义时生效，变量值对属性不合法时不会使用回退值，属性会按 unset 处理
• CSS 变量不能用在媒体查询的条件里，@media (min-width: var(--bp)) 不生效
• 主题脚本写在 body 末尾或异步加载都会闪烁，必须在 head 里同步执行