CSS Design Token值未更新：为何按钮文本仍为白色？

问题重现 #

定义了以下CSS变量：

:root {
  --neutral-00: white;
  --neutral-100: black;
  --general-typography-quinary: var(--neutral-00);
  --button-default-text: var(--general-typography-quinary);
}

深色模式激活时，body会添加.dark-mode类，同时尝试更新变量：

:root .dark-mode {
   --general-typography-quinary: var(--neutral-100);
}

按钮样式绑定了--button-default-text：

button {
    color: var(--button-default-text);
}

预期深色模式下按钮文本变为黑色（--neutral-100），但实际仍显示白色（--neutral-00）。

原因分析 #

CSS自定义属性（变量）的引用是静态计算的：当你在:root中定义--button-default-text: var(--general-typography-quinary)时，浏览器会直接将当时--general-typography-quinary的计算值（白色）赋值给--button-default-text，后续上游变量--general-typography-quinary的更新不会触发--button-default-text的重新计算——它已经是一个固定值，而非动态绑定的引用关系。

另外注意：你的选择器:root .dark-mode虽能选中body上的.dark-mode类，但若后续调整变量层级，建议直接使用body.dark-mode提升选择器直观性。

解决方案 #

方案1：直接引用上游变量 #

跳过中间变量--button-default-text，让按钮直接使用--general-typography-quinary，变量更新时会直接生效：

button {
    color: var(--general-typography-quinary);
}

方案2：同步更新下游变量 #

如果必须保留--button-default-text变量，需要在深色模式下同步更新它，确保它引用最新的上游变量值：

:root .dark-mode {
   --general-typography-quinary: var(--neutral-100);
   --button-default-text: var(--general-typography-quinary);
}

方案3：利用CSS变量的级联特性 #

调整变量定义层级，让--button-default-text始终动态引用上游变量：

/* 全局定义保持不变 */
:root {
  --neutral-00: white;
  --neutral-100: black;
  --general-typography-quinary: var(--neutral-00);
}

/* 将--button-default-text定义为动态引用，而非固定值 */
button {
    --button-default-text: var(--general-typography-quinary);
    color: var(--button-default-text);
}

/* 深色模式更新上游变量 */
body.dark-mode {
   --general-typography-quinary: var(--neutral-100);
}

这样深色模式激活时，--general-typography-quinary的更新会直接反映到按钮的--button-default-text上。

内容的提问来源于stack exchange，提问作者Ben Taliadoros