Définitions de couleurs pour des schémas autres que clair/foncé

Soutien
1

Bonjour, j’aimerais savoir comment définir des définitions de couleurs pour plus d’un schéma de couleurs, c’est-à-dire Clair, Sombre, Tamisé, similaire à la façon dont fonctionne Twitter.

Mon problème actuel :
Je suis actuellement capable de styliser les couleurs claires et sombres par défaut qui ne sont pas répertoriées, comme primary-low, dans un composant de thème personnalisé, mais je ne sais pas comment ajouter ce mode de couleur personnalisé à un schéma de couleurs différent.

$dark-theme-ins: #1e2732;
$light-theme-ins: #e9e9e9;
$dim-theme-ins: #337733;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);
:root {
    --primary-100:#{$ins};
    --primary-low:#{$ins};

}
2

Bonjour :wave:

Discourse peut gérer deux thèmes de couleurs : Clair et Sombre. Ainsi, lorsque vous basculez votre appareil en mode sombre, il utilisera par défaut le réglage du site default dark mode color scheme id.
Vous pouvez définir des palettes de couleurs personnalisées pour Discourse.
Vous pouvez définir de nouvelles palettes de couleurs sur la page /admin/customize/colors.
ou
Par exemple, si vous utilisez un thème personnalisé, vous pouvez les définir dans le fichier about.json.
Comme nous l’utilisons par exemple dans le thème FKB Pro.
fkb-pro-theme/about.json at b04ad1ea823c357103487ae1c9a4b810a3533384 · VaperinaDEV/fkb-pro-theme · GitHub
Dans ce cas, cela ajoutera ces palettes de couleurs à /admin/customize/colors.

Lorsque ces palettes de couleurs sont ajoutées, les utilisateurs peuvent les sélectionner dans la page des préférences utilisateur. Si vous l’activez.
Screenshot 2024-01-06 at 9.43.56
Screenshot 2024-01-06 at 9.43.56512×134 4.66 KB

dark-light-choose()
La fonction dark-light-choose() ne peut gérer que les deux thèmes de couleurs clair/sombre, pas la palette de couleurs. Je suggère de l’utiliser uniquement pour créer des variables de couleur personnalisées, pas pour remplacer celles par défaut. Pour remplacer les variables de couleur par défaut, vous pouvez faire ce que j’ai montré ci-dessus.
Si l’utilisateur configure une palette de couleurs différente de celle par défaut du site Clair / Sombre dans la page des préférences utilisateur, elle utilisera la variable de couleur que vous avez créée avec dark-light-choose(), pour toutes les palettes de couleurs claires ou sombres des thèmes.
C’est l’une des raisons pour lesquelles j’ai créé le Theme component suivant.

Dans ce composant de thème, vous pouvez cibler séparément les color-scheme="id".

Donc, ce que vous pouvez faire est :arrow_down_small:

Créer des palettes de couleurs (Clair, Dim, Sombre)

Utiliser le composant ci-dessus pour apporter des modifications aux couleurs du color-scheme="id" Dim ou à d’autres éléments, si nécessaire.

2 « J'aime »
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.