Elemento CSS basato sullo schema di colori selezionato

[agf1997]

Sto cercando di capire come impostare il colore di un elemento in base allo schema di colori selezionato. Quanto segue funziona bene per la mia modalità chiara, ma non così bene per la mia modalità scura.

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

Preferirei avere quanto segue solo per la modalità scura.

color: var(--secondary-low)

Questo funziona bene per la modalità scura, ma non per la modalità chiara. C’è un modo per regolare il valore di color: in base allo schema di colori selezionato?

[Don]

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

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

Grazie per la guida.

Questo sembra essere esattamente quello che vorrei fare (cambiare solo le icone dell’intestazione, non tutti gli elementi con il colore --secondary). Un’ultima domanda… questo funziona se il tema è impostato come tema in modalità scura e la modalità scura è attivata dal sistema operativo, ma non se la modalità scura è scelta come tema “Regolare”. Suggerimenti in merito?

[Don]

@agf1997

ma non se la modalità scura è scelta come tema “Normale”

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

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

[agf1997]

Ha funzionato a meraviglia! Grazie!

[agf1997]

Solo un’altra cosa… funzionerà se includo color_definitions.scss nel mio tema invece di usare un componente del tema?

[Don]

Certo, anche questo funzionerà.