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

Soutien
1

Au départ, j’étais satisfait d’avoir un seul schéma de couleurs clair et un seul sombre définis dans mon unique thème. Mais il y a du CSS que je souhaiterais modifier spécifiquement lorsque le schéma de couleurs sombre est utilisé.

Existe-t-il un moyen de configurer un thème sombre comme une sorte de thème enfant, afin qu’il puisse hériter de tous les styles de son thème parent (clair), tout en ayant son propre schéma de couleurs et en ne consistant qu’en des remplacements du parent ?

Ou quelque chose de similaire ?

2

Pourriez-vous préciser quel CSS vous souhaitez modifier uniquement pour le thème sombre ? En théorie, s’il ne s’agit que de couleurs, vous pouvez le faire en utilisant des définitions de couleurs. Si c’est plus que cela, vous aurez besoin de thèmes séparés (et vous devrez alors renoncer à la commutation automatique du mode sombre).

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 !

4

Cela devrait être common/color_definitions.scss.

Et dans common.css, les valeurs de repli sont identiques à la valeur initiale, vous pouvez donc simplement utiliser :

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

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

Oups, merci, j’ai édité mon message pour corriger cela.

Ah, d’accord. J’avais survolé ce message trop rapidement et j’avais supposé qu’il était une bonne pratique d’inclure systématiquement une valeur de repli. Je réalise maintenant que cela ne sert qu’à la compatibilité ascendante, ce dont je n’ai pas besoin. Merci pour cette clarification. J’ai modifié le code dans mon message ci-dessus pour refléter cela.