Créer et partager un schéma de couleurs

[Discourse]

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.

Naviguer vers les couleurs et ajouter un schéma de couleurs.

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

Conseils :

• J’ai utilisé une extension 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, assignez le schéma de couleurs au thème et prévisualisez-le, les changements seront reflétés en direct.

Créer 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 habituellement le MIT

vim LICENSE

Pousser les changements vers GitHub

Validez tous vos changements :

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éer un sujet sur Discourse comme lieu de discussion pour vos couleurs

Idéalement, vous créeriez un sujet dans la catégorie #plugin:theme avec quelques captures d’écran de votre schéma de couleurs. Vous utiliserez ceci comme votre about_url

Remplir les informations manquantes dans votre fichier about.json

• Naviguez vers votre page LICENSE sur GitHub, utilisez cette URL comme votre license_url

• Utilisez l’URL du projet GitHub ou 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 le changement et poussez vers GitHub

git commit -am "added more details"
git push

Tester 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 est correct.

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

Voir aussi :

Structure of themes and theme components

Discourse supports native themes that can be sourced from a .tar.gz archive or from a remote git repository including private repositories. [56] An example theme is at: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme [32] The git repository will be checked for updates (once a day), or by using the Check for Updates button. When changes are detected the Check for Updates button will change to the Update to Latest. [image] To create a theme you need to follow a spec…

---

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

---

Ce document est contrôlé par version - suggérez des modifications sur github.

[j127]

@Discourse

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

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