如何基于body的data-layout-color属性为其他类设置CSS样式？

我正在为项目创建基础CSS模板，需要支持浅色和深色模式。目前HTML的body标签带有data-layout-color属性，通过切换控件更新该属性就能实现明暗切换，body的背景色已经能正常生效。但现在要给.btn-primary这类子元素设置对应模式的样式时，因为这些元素没有data-layout-color属性，导致样式不生效。我不想给所有元素都加这个属性再用JS更新，请问有什么解决办法？

HTML代码 #

<body ng-controller="myApp" data-layout-color="dark" data-layout="topnav">
<button type="button" class="btn btn-primary">PRESS ME!</button>
</body>

原CSS代码（存在语法错误） #

body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
}
body[data-layout-color="light"]{
background-color: var(--my-body-light-bg);
}
.btn-primary[data-layout-color="light" {
color: var(--my-white-light);
background-color: var(--my-primary-light);
border-color: var(--my-primary-light);
}
.btn-primary[data-layout-color="dark" {
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
}

解决建议 #

1. 基于body属性的后代选择器（最直接方案） #

不需要给子元素添加任何额外属性，直接利用CSS后代选择器，通过body的属性关联子元素样式：

body[data-layout-color="dark"]{
  background-color: var(--my-body-dark-bg);
}
body[data-layout-color="light"]{
  background-color: var(--my-body-light-bg);
}

/* 深色模式下的按钮样式 */
body[data-layout-color="dark"] .btn-primary {
  color: var(--my-white-dark);
  background-color: var(--my-primary-dark);
  border-color: var(--my-primary-dark);
}

/* 浅色模式下的按钮样式 */
body[data-layout-color="light"] .btn-primary {
  color: var(--my-white-light);
  background-color: var(--my-primary-light);
  border-color: var(--my-primary-light);
}

这个方案完全复用body上的data-layout-color属性，无需修改现有JS逻辑，所有子元素都能通过这种方式绑定对应模式的样式。

2. 使用CSS变量统一管理模式样式（更易维护） #

把不同模式下的样式变量通过body属性切换，子元素直接引用变量，避免重复编写模式选择器：

/* 浅色模式变量映射 */
body[data-layout-color="light"] {
  --global-body-bg: var(--my-body-light-bg);
  --btn-primary-text: var(--my-white-light);
  --btn-primary-bg: var(--my-primary-light);
  --btn-primary-border: var(--my-primary-light);
}

/* 深色模式变量映射 */
body[data-layout-color="dark"] {
  --global-body-bg: var(--my-body-dark-bg);
  --btn-primary-text: var(--my-white-dark);
  --btn-primary-bg: var(--my-primary-dark);
  --btn-primary-border: var(--my-primary-dark);
}

/* 基础样式直接引用变量 */
body {
  background-color: var(--global-body-bg);
}
.btn-primary {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
}

后续新增元素时，只需要在对应模式下补充变量映射，元素样式直接引用变量即可，代码更简洁，维护成本更低。

3. 利用默认模式+变量覆盖（适合有默认场景） #

如果项目有默认模式（比如浅色），可以先在:root定义默认变量，再通过body属性覆盖深色模式的变量：

/* 默认浅色模式变量 */
:root {
  --global-body-bg: var(--my-body-light-bg);
  --btn-primary-text: var(--my-white-light);
  --btn-primary-bg: var(--my-primary-light);
}

/* 深色模式覆盖变量 */
body[data-layout-color="dark"] {
  --global-body-bg: var(--my-body-dark-bg);
  --btn-primary-text: var(--my-white-dark);
  --btn-primary-bg: var(--my-primary-dark);
}

/* 元素样式 */
body { background-color: var(--global-body-bg); }
.btn-primary {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
}

这种方式减少重复代码，只需要维护差异部分的变量。

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