基于所选配色方案的 CSS 元素

[agf1997]

我正在尝试弄清楚如何根据所选的配色方案来设置元素的颜色。以下代码在我的浅色模式下效果很好，但在我的深色模式下效果不佳。

.d-header-icons .d-icon {
	width: 100%;
	line-height: 1.4;
	display: inline-block;
	color: var(--secondary);
}

我更希望仅在深色模式下使用以下代码。

color: var(--secondary-low)

这在深色模式下效果很好，但在浅色模式下效果不佳。有没有办法根据所选的配色方案调整 color: 的值？

[Don]

你好，

有几种方法可以做到。

例如：

你可以在 admin/customize/colors/ 中更改配色方案的颜色。只需选择你的暗模式配色方案并更改 secondary 颜色代码。

注意：这将更改所有位置的次要颜色，而不仅仅是标题图标。

---

或者你可以使用 prefers-color-scheme 媒体查询在暗模式下将 secondary 更改为 secondary-low。

类似这样：

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--secondary);
  @media (prefers-color-scheme: dark) {
    color: var(--secondary-low);
  }
}

---

或者你可以创建自定义颜色定义：Why might dark-light-choose() not work? - #2 by awesomerobot

---

希望这有帮助

[agf1997]

@Don

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--secondary);
  @media (prefers-color-scheme: dark) {
    color: var(--secondary-low);
  }
}

感谢您的指导。

这似乎正是我想要做的（只更改标题图标，而不是所有具有 --secondary 颜色的项目）。最后一个问题……如果主题设置为暗黑模式主题并且暗黑模式由操作系统激活，这会起作用，但如果暗黑模式主题被选为“常规”主题，则不起作用。有什么建议吗？

[Don]

@agf1997

但如果选择了“常规”主题作为暗模式主题，则不行

哦，是的，如果可以选择深色配色方案，那将无法按此方式工作。

---

我认为你能做的最好的选择是为此创建一个自定义颜色定义，你可以将此颜色变量用于标题图标。

创建一个主题组件，并将以下内容添加到颜色定义选项卡中

将 secondary-low 颜色代码设置为 $dark-theme-header-icons，将 secondary 颜色代码设置为 $light-theme-header-icons

$dark-theme-header-icons: #e9e9e9;
$light-theme-header-icons: #222;

$header-icons: dark-light-choose($light-theme-header-icons, $dark-theme-header-icons);

:root {
  --custom-header-icons: #{$header-icons};
}

在此之后，你可以将此 --custom-header-icons 颜色变量用于标题图标颜色。

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--custom-header-icons);
}

[agf1997]

这简直太棒了！谢谢！

[agf1997]

还有一件事……如果我在主题中包含 color_definitions.scss 而不是使用主题组件，这会起作用吗？

[Don]

当然，那样也行。