Version thème sombre qui hérite du thème clair + remplace certaines parties ?

Soutien
3

Je modifie ce post pour refléter ce que j’ai appris d’un coup, plutôt que d’ennuyer les lecteurs avec le processus :

Exemple de CSS que je veux varier entre le mode clair et le mode sombre :

Mode clair :

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

Mode sombre :

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

Je me suis référé au post de @pmusaraj ici, et après quelques essais, j’ai fait ce qui suit :

Dans common/color_definitions.scss, définissez des variables pour représenter la couleur d’arrière-plan et la couleur de police de .nav-pills. Mon mode sombre ne spécifie pas de couleur de police, et mon mode clair ne spécifie pas de couleur d’arrière-plan, mais je dois spécifier quelque chose pour que dark-light-choose() fonctionne, alors j’ai utilisé les variables de base de Discourse ($primary et $quaternary-low, respectivement) :

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

Ensuite, le code pertinent dans common.scss :


// SCSS polyvalent pour les modes clair et sombre :

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

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

Ça marche !