Crea e condividi uno schema di colori

[Discourse]

Discourse ora supporta l’importazione di schemi colore da un repository remoto. Qui dimostrerò come procedere.

Naviga su colori e aggiungi uno schema colore.

Vai su /admin/customize/colors sul tuo sito e crea uno schema colore.

Suggerimenti:

• Ho usato un plugin di Chrome (color picker) per selezionare i colori da un’immagine esistente di una palette sul web.

• Se crei un tema, assegna lo schema colore al tema e visualizzalo in anteprima, le modifiche verranno riflesse in tempo reale.

Crea un nuovo repository git con lo schema colore

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

Per about.json aggiungi un file di configurazione scheletro

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

Aggiungi un file LICENSE, io uso solitamente MIT

vim LICENSE

Carica le modifiche su GitHub

Esegui il commit di tutte le modifiche:

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

Crea un account su GitHub.com e poi crea un nuovo repository.

(Opzionale) Crea un topic su Discourse come sede per discutere i tuoi colori

Idealmente, creeresti un topic nella categoria #plugin:theme con alcuni screenshot del tuo schema colore. Lo userai come tuo about_url

Compila le informazioni mancanti nel tuo file about.json

• Naviga sulla tua pagina LICENSE su GitHub, inserisci quell’URL come tuo license_url

• Usa l’URL del progetto GitHub o l’URL del topic di Discourse come tuo about_url

• Premi Copy to Clipboard sul tuo schema colore e incollalo nella sezione color_schemes

Alla fine del processo il tuo file about.json sarà simile a questo:

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

Esegui il commit della modifica e caricala su GitHub

git commit -am "added more details"
git push

Testa che il tuo schema colore sia corretto

• Elimina il tuo schema colore locale
• Nella schermata admin/customize/theme importa il tuo tema da GitHub

• Visita admin/customize/colors e assicurati che il tuo schema colore sia corretto.

Puoi condividere facilmente il tuo schema colore con altri!

Vedi anche:

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…

---

Ultima revisione da @SaraDev il [data=2022-06-02 ora=18:00:00 fuso orario=“America/Los_Angeles”]

---

Questo documento è controllato in versione - suggerisci modifiche su 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"
    }
  }
}

Penso che ci siano altri due campi che possono essere aggiunti lì: hover e selected.