Comment changer la couleur CSS pour une seule palette de thèmes ?

[Nacho_Caballero]

J’utilise actuellement un seul thème avec deux palettes (une claire et une sombre). Je suis satisfait à 90 % de la palette sombre, mais je souhaiterais apporter quelques corrections dans certains cas.

Par exemple, le contraste entre les couleurs d’arrière-plan et de premier plan n’est pas suffisant pour les murmures dans la palette sombre :

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

Je sais que je peux surcharger le CSS, mais si je le remplace par var(--primary-light), cela affecte également la palette claire.

Existe-t-il un moyen de cibler une seule palette, ou la meilleure pratique consiste-t-elle à créer deux thèmes distincts, chacun avec sa propre palette ?

Mon problème avec cette seconde approche est que je devrais commencer à dupliquer beaucoup d’autres personnalisations qui n’ont rien à voir avec les couleurs.

[Johani (Joe)]

Bien sûr, il existe quelques fonctions SCSS que vous pouvez utiliser pour vérifier si vous êtes sur un schéma de couleurs clair ou sombre.

app/assets/stylesheets/common/foundation/variables.scss

Vous les utilisez comme ceci.

@if is-light-color-scheme() {
  // CSS pour le schéma de couleurs clair
  h1 {
    color: green;
  }
}

@if is-dark-color-scheme() {
  // CSS pour le schéma de couleurs sombre
  h1 {
    color: red;
  }
}

[Nacho_Caballero]

Merci de l’avoir signalé, @Johani. Il semble que la fonction dark-light-choose($light, $dark) fasse exactement ce que je souhaite, mais mon problème actuel est qu’elle ne détecte pas le changement de palette.

Mon seul thème actif s’appelle « Nacho » et il dispose de deux palettes : « Clara » (Clair) et « Oscura » (Sombre) :

Je l’ai personnalisé avec ce CSS :

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

Cela fonctionne avec la palette claire :

Mais cela ne fonctionne pas avec la palette sombre :

Si je modifie le CSS comme ceci, cela fonctionne :

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

Il semble donc que le passage à la palette sombre ne soit pas détecté. Je vois que is-light-color-scheme examine la luminosité de $primary et $secondary. Voici ma palette sombre :

Et la palette claire :

Je n’ai plus d’idées.

[Nacho_Caballero]

Cela a été corrigé ici : Why might dark-light-choose() not work? - #2 by awesomerobot