Erstelle und teile ein Farbschema

[Discourse]

Discourse unterstützt jetzt den Import von Farbschemata aus einem Remote-Repository. Hier zeige ich Ihnen, wie Sie dabei vorgehen.

Navigieren Sie zu Farben und fügen Sie ein Farbschema hinzu.

Gehen Sie auf Ihrer Seite zu /admin/customize/colors und erstellen Sie ein Farbschema.

Tipps:

• Ich habe ein Chrome-Plugin (Color Picker) verwendet, um Farben aus einem vorhandenen Bild einer Palette im Web auszuwählen.

• Wenn Sie ein Theme erstellen, weisen Sie das Farbschema dem Theme zu und zeigen Sie es in der Vorschau an, Änderungen werden live übernommen.

Erstellen Sie ein neues Git-Repository mit dem Farbschema

mkdir mein-tolles-schema
cd mein-tolles-schema
git init .
nvim about.json

Fügen Sie für about.json eine Skelett-Konfigurationsdatei hinzu

{
  "name": "Meine tollen Farbschemata",
  "about_url": "",
  "license_url": "",
  "color_schemes": {}
}

Fügen Sie eine LICENSE-Datei hinzu, ich verwende normalerweise MIT

nvim LICENSE

Änderungen auf GitHub pushen

Übernehmen Sie alle Ihre Änderungen:

git add LICENSE
git add about.json
git commit -am "erster Commit"

Erstellen Sie ein Konto auf GitHub.com und erstellen Sie dann ein neues Repository.

(Optional) Erstellen Sie ein Thema auf Discourse als zentrale Anlaufstelle, um Ihre Farben zu diskutieren

Idealerweise erstellen Sie ein Thema in der Kategorie #plugin:theme mit einigen Screenshots Ihres Farbschemas. Dieses werden Sie als Ihre about_url verwenden.

Füllen Sie die fehlenden Informationen in Ihrer about.json-Datei aus

• Navigieren Sie zu Ihrer LICENSE-Seite auf GitHub und tragen Sie diese URL als Ihre license_url ein.

• Verwenden Sie entweder die GitHub-Projekt-URL oder die Discourse-Themen-URL als Ihre about_url.

• Drücken Sie auf Ihrem Farbschema auf In die Zwischenablage kopieren und fügen Sie dies in den Abschnitt color_schemes ein.

Am Ende des Prozesses sollte Ihre about.json-Datei etwa so aussehen:

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

Übernehmen Sie die Änderung und pushen Sie sie auf GitHub

git commit -am "weitere Details hinzugefügt"
git push

Testen Sie, ob Ihr Farbschema korrekt ist

• Löschen Sie Ihr lokales Farbschema
• Wählen Sie im Bildschirm admin/customize/theme Ihr Theme von GitHub aus

• Besuchen Sie admin/customize/colors und stellen Sie sicher, dass Ihr Farbschema korrekt aussieht.

Sie können Ihr Farbschema jetzt ganz einfach mit anderen teilen!

Siehe auch:

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…

---

Zuletzt überprüft von @SaraDev am 2022-06-03T01:00:00Z

---

Dieses Dokument wird versioniert – schlagen Sie Änderungen auf github vor.

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

Ich denke, dort können zwei weitere Felder hinzugefügt werden: hover und selected.