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

开发
4

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

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

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

Screenshot 2022-10-18 at 20.56.24
Screenshot 2022-10-18 at 20.56.241089×496 39.2 KB

将 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);
}