Come cambiare il colore CSS per una singola palette di temi?

Supporto
1

Attualmente ho un unico tema con due palette (una chiara e una scura). Sono soddisfatto al 90% della palette scura, ma in alcuni casi vorrei apportare delle correzioni.

Ad esempio, nella palette scura non c’è abbastanza contrasto tra i colori di sfondo e di primo piano per i messaggi privati (whispers):

.whisper .topic-body .cooked {
    color: var(--primary-medium)
}

So che posso sovrascrivere il CSS, ma se lo modifico in var(--primary-light) questo influisce anche sulla palette chiara.

Esiste un modo per indirizzare una singola palette o la prassi migliore è creare due temi diversi, ciascuno con la propria palette?

Il mio problema con questo secondo approccio è che dovrei iniziare a duplicare molte altre personalizzazioni che non hanno nulla a che fare con i colori.

2

Certo, ci sono alcune funzioni SCSS che puoi utilizzare per verificare se ti trovi su una palette di colori chiara o scura.

Puoi usarle in questo modo.

@if is-light-color-scheme() {
  // CSS per la palette di colori chiara
  h1 {
    color: green;
  }
}

@if is-dark-color-scheme() {
  // CSS per la palette di colori scura
  h1 {
    color: red;
  }
}
3

Grazie per averlo segnalato, @Johani. Sembra che la funzione dark-light-choose($light, $dark) faccia esattamente quello che voglio, ma il mio problema ora è che non rileva il cambio di palette.

L’unico tema attivo si chiama “Nacho” e ha due palette: “Clara” (Chiaro) e “Oscura” (Scuro):

image
image1467×633 48 KB

L’ho personalizzato con questo CSS:

$dark-theme-ins: #4da06d;
$light-theme-ins: #acf2bd;
.modal.history-modal {
    ins {
        background: dark-light-choose($light-theme-ins, $dark-theme-ins);
    }
}

Questo funziona con la palette chiara:

image
image482×238 8.9 KB

image
image982×292 29 KB

Ma non funziona con la palette scura:

image
image502×221 9.86 KB

image
image1026×304 41.7 KB

Se modifico il CSS in questo modo, funziona:

.modal.history-modal {
    ins {
        background: $dark-theme-ins;
    }
}

image
image1014×314 34.3 KB

Quindi sembra che il passaggio alla palette scura non venga rilevato. Vedo che is-light-color-scheme controlla la luminosità di $primary e $secondary. Ecco la mia palette scura:

image
image906×280 11.1 KB

E quella chiara:

image
image738×278 9.56 KB

Ho esaurito le idee.

4

Questo è stato risolto qui: Why might dark-light-choose() not work? - #2 by awesomerobot