Versione dark theme che eredita light theme + sovrascrive parti?

Supporto
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!