Créez et partagez une palette de couleurs

Discourse prend désormais en charge l’importation de palettes de couleurs depuis des dépôts distants. Voici comment procéder.

Accédez aux couleurs et ajoutez une palette de couleurs.

Rendez-vous sur /admin/customize/colors de votre site et créez une palette de couleurs.

Conseils :

  • J’ai utilisé une extension Chrome (color picker) pour sélectionner des couleurs à partir d’une image de palette existante sur le web.

  • Si vous créez un thème, assignez la palette de couleurs au thème et prévisualisez-le ; les modifications seront reflétées en temps réel.

Créez un nouveau dépôt git avec la palette de couleurs

mkdir my-awesome-scheme
cd my-awesome-scheme
git init .
vim about.json

Pour about.json, ajoutez un fichier de configuration de base

{
  "name": "My awesome color schemes",
  "about_url": "",
  "license_url": "",
  "color_schemes": {}
}

Ajoutez un fichier LICENSE, j’utilise généralement la licence MIT

vim LICENSE

Poussez les modifications vers GitHub

Enregistrez toutes vos modifications :

git add LICENSE
git add about.json
git commit -am "first commit"

Créez un compte sur GitHub.com puis créez un nouveau dépôt.

(Optionnel) créez un sujet sur Discourse comme espace de discussion pour vos couleurs

Idéalement, vous devriez créer un sujet dans la catégorie Customization > Theme avec quelques captures d’écran de votre palette de couleurs. Vous utiliserez ce lien comme about_url

Remplissez les informations manquantes dans votre fichier about.json

  • Accédez à la page de votre LICENSE sur GitHub, et remplissez cette URL dans license_url

  • Utilisez soit l’URL du projet GitHub, soit l’URL du sujet Discourse comme about_url

  • Cliquez sur Copy to Clipboard pour votre palette de couleurs et collez-la dans la section color_schemes

À la fin du processus, votre fichier about.json ressemblera à ceci :

{
  "name": "Solarized",
  "about_url": "https://github.com/SamSaffron/discourse-solarized",
  "license_url": "https://github.com/SamSaffron/discourse-solarized/blob/master/LICENSE",
  "color_schemes": {
    "Solarized Light": {
      "primary": "586E75",
      "secondary": "EEE8D5",
      "tertiary": "268BD2",
      "quaternary": "CB4B16",
      "header_background": "002B36",
      "header_primary": "93A1A1",
      "highlight": "B58900",
      "danger": "CB4B16",
      "success": "859900",
      "love": "DC322F"
    }
  }
}

Enregistrez les modifications et poussez vers GitHub

git commit -am "added more details"
git push

Testez que votre palette de couleurs est correcte

  • Supprimez votre palette de couleurs locale
  • Dans l’écran admin/customize/theme, importez votre thème depuis GitHub

  • Visitez admin/customize/colors et vérifiez que votre palette de couleurs est correcte.

:confetti_ball:

Vous pouvez maintenant facilement partager votre palette de couleurs avec d’autres !

Voir aussi :


Dernière révision par @SaraDev le 2022-06-03T01:00:00Z


Ce document est versionné - proposez des modifications sur github.

23 « J'aime »

Je pense qu’il y a deux champs supplémentaires qui pourraient être ajoutés ici : hover et selected.