Perché dark-light-choose() potrebbe non funzionare?

Supporto
1

Sto cercando di utilizzare la funzione dark-light-choose($light, $dark) nel mio CSS personalizzato, ma restituisce sempre $light, anche quando cambio la palette da chiara (Clara) a scura (Oscura):

image
image1380×594 39 KB

Puoi trovare maggiori dettagli sulla mia configurazione qui:

Finora ho controllato attentamente:

  • che nel mio tema scuro il colore primario abbia una luminosità superiore rispetto al colore secondario.
  • di utilizzare gli argomenti della funzione nell’ordine corretto.

Non ho idea di come procedere con il debug. Potrebbe essere un problema legato al mio tema? C’è qualche altra variabile che dovrei considerare?

2

Credo che, a causa del modo in cui SCSS viene compilato, le definizioni personalizzate per i temi scuro/chiaro debbano essere aggiunte in color_definitions.scss all’interno di un tema e non funzioneranno in altri file SCSS.

Screen Shot 2020-12-04 at 9.54.13 PM
Screen Shot 2020-12-04 at 9.54.13 PM936×138 14.1 KB

color_definitions.scss si trova in alto nella cascata (prima di molti stili predefiniti), quindi non vuoi aggiungere la parte .modal.history-modal ins lì. Invece, puoi aggiungere solo la definizione del colore stesso…

$dark-theme-ins: #acf2bd;
$light-theme-ins: #4da06d;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);

:root {
  --custom-ins: #{$ins};
}

e poi in common o in qualsiasi altro file del tuo tema puoi fare:

.modal.history-modal {
    ins {
        background: var(--custom-ins);
    }
}
3

Grazie mille, Kris. Mi hai salvato! Funziona perfettamente :tada:

Ho provato a giocarci un po’ e l’unica cosa che non capisco è perché l’interpolazione delle variabili sia necessaria con i valori di colore. Ad esempio, questo non funziona senza interpolazione:

$ins: #7f7e7e;
:root {
  --custom-ins: $ins;
}

Mentre questo sì:

$ins: #7f7e7e;
:root {
  --custom-ins: #{$ins};
}

Entrambe le versioni funzionano se $ins è assegnato a una variabile (ad esempio: $ins: $dark-theme-ins ).

Cosa mi sto perdendo?

4

È un requisito di SCSS quando si utilizzano le proprietà CSS personalizzate. Maggiori dettagli qui: Sass: Property Declarations