Elemento CSS basato sullo schema di colori selezionato

Ciao,

Ci sono diversi modi per farlo.

Per esempio:

Puoi cambiare i colori dello schema di colori su admin/customize/colors/. Basta selezionare il tuo schema di colori per la modalità scura e cambiare il codice colore secondary.

Nota: questo cambierà il colore secondario ovunque, non solo nelle icone dell’intestazione.


Oppure puoi usare il media prefers-color-scheme per cambiare secondary in secondary-low in modalità scura.

Qualcosa del genere:

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

Oppure puoi creare definizioni di colori personalizzate: Why might dark-light-choose() not work? - #2 by awesomerobot


Spero che questo aiuti :slightly_smiling_face:

2 Mi Piace