Versione dark theme che eredita light theme + sovrascrive parti?

Supporto
1

Inizialmente, ero soddisfatto di avere una sola palette di colori chiara e una scura definite all’interno del mio unico tema. Ma c’è del CSS che vorrei modificare specificamente quando è attiva la palette di colori scura.

Esiste un modo per impostare un tema scuro come una sorta di tema figlio, in modo che possa ereditare tutti gli stili del tema genitore (chiaro), ma abbia la propria palette di colori e consista esclusivamente di sovrascritture del genitore?

O qualcosa di simile?

2

Puoi condividere quale CSS vorresti modificare specificamente solo per il tema scuro? In teoria, se si tratta solo di colori, puoi farlo utilizzando le definizioni dei colori. Se invece è qualcosa di più, avrai bisogno di temi separati (e dovrai anche rinunciare al cambio automatico del tema scuro).

3

Modifico questo post per riflettere tutto ciò che ho imparato in una volta sola, piuttosto che annoiare i lettori con il processo:

Esempio di CSS che voglio variare tra modalità chiara e scura:

Modalità chiara:

.nav-pills>li>a:hover {
  &:not(.active) {
    color: var(--primary-high, $primary-high);
  }
}

Modalità scura:

.nav-pills>li>a:hover {
  background-color: $quaternary-low-dmode;
}

Mi sono riferito al post di @pmusaraj qui e, dopo alcune prove, ho fatto quanto segue:

In common/color_definitions.scss, ho definito delle variabili per rappresentare il background-color e il colore del font di .nav-pills. La mia modalità scura non specifica un colore del font e la mia modalità chiara non specifica un background-color, ma devo specificare qualcosa affinché dark-light-choose() funzioni, quindi ho usato le variabili core di Discourse ($primary e $quaternary-low, rispettivamente):

$quaternary-low-dmode: #405E68;

$nav-pills: dark-light-choose($quaternary, $primary);
$nav-pills-bg: dark-light-choose($quaternary-low, $quaternary-low-dmode);

:root {
  --custom-nav-pills: #{$nav-pills};
  --custom-nav-pills-bg: #{$nav-pills-bg};
}

Poi il codice rilevante in common.scss:


// SCSS universale per entrambe le modalità scura e chiara:

.nav-pills>li>a:hover {
  background-color: var(--custom-nav-pills-bg);

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}

Funziona!

4

Dovrebbe essere common/color_definitions.scss.

E in common.css, i fallback sono gli stessi del valore iniziale, quindi puoi semplicemente usare:

.nav-pills>li>a:hover {
  background-color: var(--custom-nav-pills-bg);

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}
5

Ops, grazie, ho modificato il mio post per correggere l’errore.

Ah, ok, avevo sfogliato troppo rapidamente questo post e ho assunto che fosse una buona pratica includere sempre un fallback. Mi rendo conto che serve solo per la compatibilità con le versioni precedenti, cosa di cui non ho bisogno. Grazie per la chiarificazione. Ho modificato il codice nel mio post sopra per rifletterlo.