Farbschema erstellen und teilen

[Discourse]

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

Zu den Farben navigieren und ein Farbschema hinzufügen

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

Tipps:

• Ich habe eine Chrome-Erweiterung (Farbwähler) verwendet, um Farben aus einem vorhandenen Bild einer Farbpalette im Web auszuwählen.

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

Ein neues Git-Repository mit dem Farbschema erstellen

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

Fügen Sie für about.json eine Grundkonfigurationsdatei hinzu:

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

Fügen Sie eine LICENSE-Datei hinzu. Ich verwende normalerweise die MIT-Lizenz.

vim LICENSE

Änderungen an GitHub pushen

Sichern Sie alle Ihre Änderungen:

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

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

(Optional) Ein Topic auf Discourse erstellen, das als Diskussionsplattform für Ihre Farben dient

Idealerweise erstellen Sie ein Topic in der Kategorie #plugin:theme mit einigen Screenshots Ihres Farbschemas. Diese URL verwenden Sie dann als about_url.

Die fehlenden Informationen in Ihrer about.json-Datei ergänzen

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

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

• Klicken Sie bei Ihrem Farbschema auf „In die Zwischenablage kopieren“ und fügen Sie diesen Inhalt im Abschnitt color_schemes ein.

Am Ende des Vorgangs sieht Ihre about.json-Datei ungefähr so aus:

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

Sichern Sie die Änderung und pushen Sie sie zu GitHub:

git commit -am "added more details"
git push

Prüfen, ob Ihr Farbschema korrekt ist

• Löschen Sie Ihr lokales Farbschema.
• Importieren Sie auf dem Bildschirm admin/customize/theme Ihr Theme von GitHub.

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

Jetzt können Sie Ihr Farbschema 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 · GitHub [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 foll…

---

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

---

Dieses Dokument ist versionskontrolliert – 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.