Crea e condividi una palette di colori

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

Vai alla sezione colori e aggiungi uno schema di colori.

Accedi a /admin/customize/colors sul tuo sito e crea uno schema di colori.

Suggerimenti:

  • Ho utilizzato un’estensione per Chrome (color picker) per selezionare i colori da un’immagine esistente di una palette su web.

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

Crea un nuovo repository git con lo schema di colori

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

Per about.json, aggiungi un file di configurazione base

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

Aggiungi un file LICENSE, io di solito uso la licenza MIT

vim LICENSE

Invia le modifiche a GitHub

Registra tutte le tue 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.

(Facoltativo) crea un argomento su Discourse come sede per discutere i tuoi colori

Idealmente, creeresti un argomento nella categoria Customization > Theme con alcuni screenshot del tuo schema di colori. Userai questo come tuo about_url

Compila le informazioni mancanti nel file about.json

  • Vai alla pagina LICENSE sul tuo GitHub e inserisci quell’URL come license_url

  • Usa l’URL del progetto GitHub o l’URL dell’argomento Discourse come about_url

  • Premi Copia negli appunti sul tuo schema di colori e incollalo nella sezione color_schemes

Alla fine del processo, il file about.json avrà un aspetto 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"
    }
  }
}

Registra la modifica e inviala a GitHub

git commit -am "added more details"
git push

Verifica che il tuo schema di colori sia corretto

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

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

:confetti_ball:

Ora puoi facilmente condividere il tuo schema di colori con gli altri!

Vedi anche:


Last Reviewed by @SaraDev on 2022-06-03T01:00:00Z


Questo documento è sotto controllo di versione - suggerisci modifiche su github.

23 Mi Piace

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