使用CSS light-dark()时，如何单独设置亮暗主题的类样式？

你需要的是**prefers-color-scheme媒体查询**，它可以精准匹配系统的亮色或暗色主题偏好，完全能实现你想要的按类切换不同主题下背景色的需求，不存在:light这类伪类选择器。

具体实现代码 #

结合你的需求，对应的CSS规则可以这么写：

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}

/* 亮色模式下生效的类 */
@media (prefers-color-scheme: light) {
  .light-bg-red {
    background-color: red;
  }
}

/* 暗色模式下生效的类 */
@media (prefers-color-scheme: dark) {
  .dark-bg-blue {
    background-color: blue;
  }
}

效果说明 #

当用户添加<div class="light-bg-red dark-bg-blue">时：

• 系统处于亮色模式时，该元素背景会变成红色
• 系统切换到暗色模式时，背景自动切换为蓝色

补充说明 #

light-dark()函数的设计是在单个声明中同时指定明暗主题的属性值，适合全局统一的样式；而如果需要给特定元素单独设置某一主题下的样式，prefers-color-scheme媒体查询是更灵活的选择，它能让你精准控制样式在特定主题下的生效逻辑。

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