如何结合带透明度的HSL/RGB使用CSS新light-dark()函数

受Tailwind CSS启发，我采用HSL值实现同颜色的透明度效果，现在尝试使用CSS新的light-dark()函数切换主题色，但直接将light-dark()赋值给CSS变量的写法无法正常工作，需要可行的语法方案。

现有正常HSL用法示例 #

:root {
  --foreground: 0 0% 98%;
}

.div1 {
  color: hsl(var(--foreground));
}

.div2 {
  background: hsl(var(--foreground) / 0.25)
}

失效的light-dark()写法示例 #

/* This doesn't work! */
:root {
  color-scheme: dark; /* or light, or light dark */
  --foreground: light-dark(222.2 47.4% 11.2%, 0 0% 98%);
}

.div1 {
  color: hsl(var(--foreground)); /* doesn't work */
}

.div2 {
  background: hsl(var(--foreground) / 0.25)  /* doesn't work either */
}

方案1：直接在hsl()中使用light-dark() #

将light-dark()嵌入hsl()调用内部，避免变量解析问题：

:root {
  color-scheme: light dark;
}

.div1 {
  color: hsl(light-dark(222.2 47.4% 11.2%, 0 0% 98%));
}

.div2 {
  background: hsl(light-dark(222.2 47.4% 11.2%, 0 0% 98%) / 0.25);
}

缺点：颜色值重复，不符合DRY原则，适合简单场景。

方案2：用变量存储不同主题的HSL参数，再通过light-dark()选择 #

定义两个变量分别存储浅色/深色模式的HSL值，使用时通过light-dark()切换：

:root {
  color-scheme: light dark;
  --foreground-light: 222.2 47.4% 11.2%;
  --foreground-dark: 0 0% 98%;
}

.div1 {
  color: hsl(light-dark(var(--foreground-light), var(--foreground-dark)));
}

.div2 {
  background: hsl(light-dark(var(--foreground-light), var(--foreground-dark)) / 0.25);
}

优点：保留变量复用性，同时利用light-dark()的主题切换能力。

方案3：结合prefers-color-scheme媒体查询定义变量 #

通过媒体查询为不同主题单独设置变量值，完全兼容原有HSL用法：

:root {
  color-scheme: light dark;
  --foreground: 222.2 47.4% 11.2%; /* 默认浅色模式 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground: 0 0% 98%;
  }
}

.div1 {
  color: hsl(var(--foreground));
}

.div2 {
  background: hsl(var(--foreground) / 0.25);
}

优点：完全沿用原有代码结构，无需修改使用变量的地方，兼容性更广泛。

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