Référence pour la personnalisation complète des couleurs

Dev
1

Je voudrais créer deux de mes propres thèmes de couleurs où je choisis toutes les variables de couleur (je n’aime pas les valeurs calculées/transformées).

Existe-t-il une référence pour cela ? Le fichier json d’exemple dans ce post :

Ne liste que quelques-unes des valeurs (il semble que ce soient celles qui sont personnalisables par défaut via le panneau d’administration). Alors que certains thèmes de couleurs que j’ai vus, comme ceux du WCAG, exposent quelques variables de plus.

Ce post parlait de la création d’un plugin pour une personnalisation avancée des couleurs : Customizing colors - #10 by awesomerobot

Mais je ne pense pas que ce soit nécessaire, s’il était possible d’avoir simplement un fichier json de référence avec toutes les variables de couleur nommées qui peuvent être remplacées, en contournant les valeurs calculées.

1 « J'aime »
2

Lorsque vous inspectez une instance de discourse dans votre navigateur, vous pouvez trouver tous les noms de variables racine dans l’onglet styles :

image
image394×1320 110 KB

Déclarez ensuite les variables supplémentaires dans votre fichier json. Par exemple :

{
  "about_url": null,
  "license_url": null,
  "name": "Schémas de couleurs complets",
  "color_schemes": {
    "Couleurs Claires": {
      "primary": "222",
      "secondary": "fff",
      "tertiary": "08c",
      "quaternary": "e45735",
      "header_background": "fff",
      "header_primary": "333",
      "highlight": "ffff4d",
      "danger": "c80001",
      "success": "090",
      "love": "fa6c8d",
      "primary-very-low": "f8f8f8",
      "primary-low": "e9e9e9",
      "primary-low-mid": "bdbdbd",
      "primary-medium": "919191",
      "primary-high": "646464",
      "primary-very-high": "434343",
      "secondary-low": "4d4d4d",
      "secondary-medium": "gray",
      "secondary-high": "a6a6a6",
      "secondary-very-high": "ededed"
    },
    "Couleurs Sombres": {
      "primary": "ddd",
      "secondary": "222",
      "tertiary": "0f82af",
      "quaternary": "c14924",
      "header_background": "111",
      "header_primary": "ddd",
      "highlight": "a87137",
      "danger": "e45735",
      "success": "1ca551",
      "love": "fa6c8d",
      "primary-very-low": "282828",
      "primary-low": "313131",
      "primary-low-mid": "7a7a7a",
      "primary-medium": "909090",
      "primary-high": "a6a6a6",
      "primary-very-high": "c7c7c7",
      "secondary-low": "bdbdbd",
      "secondary-medium": "919191",
      "secondary-high": "646464",
      "secondary-very-high": "313131"
    }
  }
}

L’avantage est que ces variables apparaîtront également dans le backend :

image
image1632×1747 210 KB

6 « J'aime »
3

Merci — après avoir publié ceci, j’ai vu que tout est également répertorié dans la page /styleguide > colors d’une instance — je suppose que c’est la liste complète…

Je me demande maintenant quelle est la différence d’utilisation entre les variables descriptives (par exemple, primary-high) et numérotées (par exemple, primary-800) et comment en tenir compte lors de la création de mon propre thème.

4

Pour autant que je sache, il s’agit simplement de calculs supplémentaires, plus précis, que vous pourriez utiliser dans un thème ou un composant de thème. Mais ils ne sont pas utilisés dans le cœur de Discourse.

Si vous vouliez écrire votre schéma de couleurs en utilisant uniquement les valeurs numériques, vous pourriez redéclarer celles descriptives comme ceci dans votre thème :

:root {
  --primary-high: var(--primary-800);
}

Mais alors, il n’y a que des valeurs numériques pour le primaire et le tertiaire.

1 « J'aime »
5

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