Elemento CSS basato sullo schema di colori selezionato

Sviluppatore
4

Oh sì, non funzionerà così se lo schema di colori scuri è selezionabile.

Penso che la migliore opzione che puoi fare sia creare una definizione di colore personalizzata per questo e puoi usare questa variabile di colore per le icone dell’intestazione.

Crea un componente tema e aggiungi quanto segue alla scheda Definizioni di colore

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

Imposta il codice colore secondary-low su $dark-theme-header-icons e il codice colore secondary su $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};
}

Dopo questo, puoi usare questa variabile di colore --custom-header-icons per il colore delle icone dell’intestazione.

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