CSS-Element basierend auf ausgewählter Farbpalette

Entwickler
4

Oh ja, das wird so nicht funktionieren, wenn das dunkle Farbschema auswählbar ist.

Ich denke, die beste Option ist, eine benutzerdefinierte Farbdefinition dafür zu erstellen, und Sie können diese Farbvariable für Header-Symbole verwenden.

Erstellen Sie eine Theme-Komponente und fügen Sie Folgendes zum Tab Farbdefinitionen hinzu

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

Setzen Sie den Farbcode von secondary-low auf $dark-theme-header-icons und den Farbcode von secondary auf $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};
}

Danach können Sie diese Farbvariable --custom-header-icons für die Farbe der Header-Symbole verwenden.

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