Créer et partager une palette de couleurs

Discourse prend désormais en charge l’importation de schémas de couleurs depuis un dépôt distant. Je vais vous montrer comment procéder.

Accédez aux couleurs et ajoutez un schéma de couleurs.

Rendez-vous sur /admin/customize/colors de votre site et créez un schéma de couleurs.

Astuces :

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

  • Si vous créez un thème, associez le schéma de couleurs au thème et prévisualisez-le ; les modifications seront reflétées en direct.

Créez un nouveau dépôt git avec le schéma de couleurs

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

Pour about.json, ajoutez un fichier de configuration squelette

{
  "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

Validez 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.

(Facultatif) créez un sujet sur Discourse comme espace pour discuter de vos couleurs

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

Remplissez les informations manquantes dans votre fichier about.json

  • Accédez à votre page LICENSE sur GitHub, remplissez cette URL comme votre license_url

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

  • Appuyez sur Copy to Clipboard sur votre schéma de couleurs et collez-le 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"
    }
  }
}

Validez la modification et poussez vers GitHub

git commit -am "added more details"
git push

Testez que votre schéma de couleurs est correct

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

  • Visitez admin/customize/colors et assurez-vous que votre schéma de couleurs s’affiche correctement.

:confetti_ball:

Vous pouvez maintenant facilement partager votre schéma de couleurs avec d’autres !

Voir aussi :


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


Ce document est sous contrôle de version - suggérez 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.