Referenz für vollständige Farbanpassung

Entwickler
1

Ich möchte zwei eigene Farbschemata erstellen, bei denen ich alle Farbvariablen selbst wähle (die berechneten/transformierten Werte gefallen mir nicht).

Gibt es dafür eine Referenz? Die Beispiel-JSON-Datei in diesem Beitrag:

listet nur wenige der Werte auf (scheinbar die, die standardmäßig über das Admin-Panel anpassbar sind). Während einige Farbschemata, die ich gesehen habe, wie die WCAG-Schemata, ein paar mehr Variablen freigeben.

Dieser Beitrag sprach über die Erstellung eines Plugins für erweiterte Farbanpassung: Customizing colors - #10 by awesomerobot

Aber ich glaube, das ist nicht notwendig, wenn es möglich wäre, einfach eine Referenz-JSON-Datei mit allen benannten Farbvariablen zu haben, die überschrieben werden können, und die berechneten Werte zu umgehen.

1 „Gefällt mir“
2

Wenn Sie eine Discourse-Instanz in Ihrem Browser untersuchen, finden Sie im Tab „Styles“ alle Root-Variablennamen:

image
image394×1320 110 KB

Deklarieren Sie dann einfach die zusätzlichen Variablen in Ihrer JSON-Datei. Zum Beispiel:

{
  "about_url": null,
  "license_url": null,
  "name": "Full Color Schemes",
  "color_schemes": {
    "Colors Light": {
      "primary": "222",
      "secondary": "fff",
      "tertiary": "08c",
      "quaternary": "e45735",
      "header_background": "fff",
      "header_primary": "333",
      "highlight": "ffff4d",
      "danger": "c80001",
      "success": "090",
      "love": "fa6c8d",
      "primary-very-low": "f8f8f8",
      "primary-low": "e9e9e9",
      "primary-low-mid": "bdbdbd",
      "primary-medium": "919191",
      "primary-high": "646464",
      "primary-very-high": "434343",
      "secondary-low": "4d4d4d",
      "secondary-medium": "gray",
      "secondary-high": "a6a6a6",
      "secondary-very-high": "ededed"
    },
    "Colors Dark": {
      "primary": "ddd",
      "secondary": "222",
      "tertiary": "0f82af",
      "quaternary": "c14924",
      "header_background": "111",
      "header_primary": "ddd",
      "highlight": "a87137",
      "danger": "e45735",
      "success": "1ca551",
      "love": "fa6c8d",
      "primary-very-low": "282828",
      "primary-low": "313131",
      "primary-low-mid": "7a7a7a",
      "primary-medium": "909090",
      "primary-high": "a6a6a6",
      "primary-very-high": "c7c7c7",
      "secondary-low": "bdbdbd",
      "secondary-medium": "919191",
      "secondary-high": "646464",
      "secondary-very-high": "313131"
    }
  }
}

Das Schöne daran ist, dass diese Variablen dann auch im Backend angezeigt werden:

image
image1632×1747 210 KB

6 „Gefällt mir“
3

Vielen Dank – nachdem ich diesen Beitrag erstellt hatte, sah ich, dass alles auch auf der /styleguide-Seite eines Instanzes unter colors aufgeführt ist – ich gehe davon aus, dass dies die vollständige Liste ist…

Ich frage mich jetzt, was der Unterschied in der Verwendung zwischen den beschreibenden (z. B. primary-high) und den nummerierten (z. B. primary-800) Variablen ist und wie ich dies bei der Erstellung meines eigenen Themas berücksichtigen kann.

4

Soweit ich weiß, handelt es sich nur um zusätzliche, fein abgestimmte Berechnungen, die Sie in einem Theme oder einer Theme-Komponente verwenden könnten. Sie werden jedoch nicht im Discourse-Kern verwendet.

Wenn Sie Ihr Farbschema nur mit den nummerierten Werten schreiben möchten, könnten Sie die beschreibenden Werte in Ihrem Theme wie folgt neu deklarieren:

:root {
  --primary-high: var(--primary-800);
}

Aber dann gibt es nur nummerierte Werte für primäre und tertiäre.

1 „Gefällt mir“
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.