Défis pour créer une palette de couleurs personnalisée

mk0r · Janvier 27, 2025, 12:17

J’ai essayé de créer un schéma de couleurs entièrement personnalisé en définissant mes couleurs dans le fichier about.json de mon thème sur GitHub.

Malheureusement, seules certaines de mes définitions de couleurs sont respectées sur le site.

Par exemple, dans mon schéma json, je définis : « success_low » : « DDE2B2 »,

Cependant, mon guide de style affiche une couleur différente (calculée) pour var(--success-low)

J’ai lu tous les guides et il semble que les définitions de palette json ne soient pas toutes utilisées et que discourse calcule lui-même certaines valeurs au lieu de respecter ma définition.

Dois-je plutôt coder en dur les couleurs dans un fichier de variables css ? Celles-ci remplaceront-elles les valeurs calculées ? Où et comment devrais-je le faire ? J’aimerais définir chaque couleur pour le mode clair et le mode sombre dans discourse, je n’aime aucune des valeurs calculées.

Merci pour toute aide. Il a été très difficile de comprendre comment tout cela fonctionne, quelle est la priorité dans le css final, etc.

mise à jour : ce post semble contredire mon dépannage :

Cela me laisse encore plus perplexe quant à la raison pour laquelle discourse génère toujours des couleurs automatiquement.

Lilly · Janvier 27, 2025, 12:43

Je vois qu’il y a un trait de soulignement dans le premier (success_low) et un trait d’union dans le second (success-low).

vous pouvez toujours coller votre palette de couleurs ici telle qu’elle apparaît dans le fichier JSON pour que nous puissions y jeter un œil.

mk0r · Janvier 27, 2025, 12:58

Merci, je vais examiner et vérifier tous les traits de soulignement par rapport aux tirets. Existe-t-il un fichier JSON de référence que je pourrais trouver quelque part et qui contiendrait une référence pour toutes les variables, avec les tirets et les traits de soulignement aux bons endroits ?

mk0r · Janvier 27, 2025, 1:02

J’ai initialement utilisé le thème « solarized » comme référence

mk0r · Janvier 27, 2025, 1:14

C’est extrêmement déroutant. Dans le guide de style, les variables CSS étiquetées utilisent des tirets :

Alors que dans cet exemple (et d’autres) de schémas, ils ont des underscores :

github.com/exodrifter/discourse-gruvbox

about.json

main

{
  "name" : "Gruvbox",
  "about_url" : "https://github.com/exodrifter/discourse-gruvbox",
  "license_url": "https://github.com/exodrifter/discourse-gruvbox/blob/master/LICENSE.md",
  "color_schemes": {
    "Gruvbox Light": {
      "primary": "3c3836",
      "secondary": "fbf1c7",
      "tertiary": "076678",
      "quaternary": "af3a03",
      "header_background": "f9f5d7",
      "header_primary": "282828",
      "highlight": "427b58",
      "danger": "9d0006",
      "success": "79740e",
      "love": "8f3f71",
      "primary_very_low": "fbf1c7",
      "primary_low": "d5c4a1",
      "primary_low_mid": "a89984",
      "primary_medium": "7c6f64",

This file has been truncated. show original

Je ne suis certes pas le couteau le plus aiguisé du tiroir en matière de codage, et je suis sûr que les personnes qui y ont travaillé longtemps trouvent cela plus évident et intuitif… mais essayer de naviguer là-dedans me donne l’impression de devenir un peu fou.

Il est vraiment difficile d’avoir une compréhension intuitive de toute la logique de l’utilisation des couleurs en mode clair et sombre. Entre la multitude de fichiers scss et de transformations, le json, l’interface graphique d’administration, les palettes qui sont (dans une certaine mesure ?) indépendantes des thèmes…

Désolé pour mon monologue, j’ai juste un peu de mal ici.

Lilly · Janvier 27, 2025, 1:30

vous avez un autre ancien sujet qui pourrait vous aider avec cela

mk0r · Janvier 29, 2025, 1:26

Malheureusement, ce fil de discussion n’a pas résolu le problème.

Je suis toujours confus : n’y a-t-il pas de directives claires sur la façon de définir chaque couleur ? Et quelles sont la syntaxe/les noms corrects dans le JSON par rapport aux variables CSS ?

Lilly · Janvier 29, 2025, 1:47

as-tu regardé ça ?

github.com/discourse/discourse

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

main

// standard color transformations, use these if possible, and add any new dark-light-diffs here
// any variables defined here can be added in theme color schemes
// all variables should have the !default flag

@use "sass:string";

// primary
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%) !default;
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;

// primary-numbers
$primary-50: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-100: dark-light-diff($primary, $secondary, 94%, -80%) !default;
$primary-200: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default;
$primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default;

This file has been truncated. show original

Je ne vois rien d’évident qui cloche dans ton fichier about.json, donc il se peut que ce soit autre chose dans la façon dont ton thème est configuré.

spécifiquement, quelles variables fonctionnent et lesquelles ne fonctionnent pas ?

as-tu lu des sujets sur le développement de thèmes ? je pense qu’il est possible que tu aies d’autres fichiers de thème requis dans ton dépôt.

mk0r · Janvier 29, 2025, 2:21

Oui, je les ai lus, mais il n’y a pas de référence complète pour toutes les variables de couleur que j’ai pu voir. J’ai basé mon fichier about.json sur le thème « solarized » qui semblait avoir toutes les variables déclarées. Je vais réessayer à partir de zéro et je vous ferai un retour, et j’utiliserai les outils de développement pour voir quels pourraient être les problèmes.

Merci pour votre aide jusqu’à présent.

Sujet		Réponses	Vues
Reference for full color customization Dev	4	1306	Février 14, 2023
How do colors work and how to change them? Support ux	5	113	Mars 20, 2025
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11859	Janvier 9, 2018
How to add more options to color palettes? Support color-palettes	4	69	Août 15, 2025
Color definitions for more than light/dark color schemes Support	2	492	Janvier 6, 2024

Défis pour créer une palette de couleurs personnalisée

Sujets connexes