Eigene Farbe für Überschriften im Dawn Theme

[Roland]

Hallo. Aktuell kann man im Dawn Theme nur eine Farbe für Text und Überschrift eingeben. Ich möchte aber ein eigenes Eingabefeld haben für die Überschrift in jedem Color-Schema. Das ist mir auch gelungen mit folgendem Code:

Ich habe in der settings_schema.json folgendes hinzugefügt:

{
"type": "color",
"id": "heading_color",
"label": "Farbe der Überschrift",
"default": #000000;}

Das hat auch funktioniert. Ich habe nun ein zusätzliches Eingabefeld für die Farbe der Überschrift.

Danach habe ich in der base.css die Variable geändert von:

color-foreground auf heading-color.

Siehe Screenshot.

 

Leider übernimmt er die Farbe aber nicht. Was fehlt hier noch? Danke für eure Unterstützung.  

[Finer]

@Roland in der theme.liquid Datei musst du die Variable --heading-color den Wert zuweisen, welchen du in der settings_schema zugeordnet hast.

Du solltest ab Zeile 98 (ab :root) sehen, wie diese Variablen zugeordnet werden.

 

[Roland]

ich habe die Zeile in der theme.liquid hinzugefügt. Funktioniert aber leider weiterhin nicht.

[Roland · Accepted solution]

Ich konnte es nun lösen.

Schritt 1) Das Eingabefeld im Frontend hinzufügen

dazu musst du

in der settings_schema.json folgende Code hinzufügen

{
 "type": "color",
 "id": "heading_color",
 "label": "Überschrift H1-H6",
 "default": "#000000"
},

danach sieht es so aus: Backend sowie Frontend

Schritt 2: in der theme.liquid musst folgende Codezeile hinzufügen, damit du den Wert in einer Variable abspeicherst.

--color-heading: {{ scheme.settings.heading_color.red }}, {{ scheme.settings.heading_color.green }}, {{ scheme.settings.heading_color.blue }};        

Schritt 3:  Den Wert musst du ins :root statt der Textfarbe verwenden. Du musst --color-foreground mit --color-heading tauschen.

color: rgb(var(--color-heading)); /*rgb(var(--color-foreground));*/

Danach klappt es.

Die Überschriften H1-H6 haben nun eine eigene Farbe