6.1 – Etwas ändern

Diese Vorlage ist zum Ändern gebaut. Es gibt drei Ebenen dafür, und die erste reicht öfter, als man denkt.

1 · Eine Variable

Der Normalfall. 66 Variablen tragen jede Farbe und jedes Maß dieser Vorlage; keine Zeile CSS ist dafür nötig. In der App unter Stile → Variablen, getrennt nach hell und dunkel.

Welche Variable wo greift, steht auf jeder Seite in Kapitel 5 ganz unten — samt der Spalte, die sagt, was sich noch mit ändert. --tpl-space-md anzufassen bewegt die ganze Website; --tpl-fade bewegt zwei weiche Kanten.

2 · Eine Regel im vorhandenen Stylesheet

Wenn eine Variable nicht reicht, weil es nicht der Wert ist, sondern die Form: die zwölf Stylesheets liegen unter Stile → Eigenes CSS, in Abschnitten je Komponente. In welcher Datei und in welchem Abschnitt eine Komponente steht, sagt die Tabelle unten auf ihrer Seite.

Das ändert die Vorlage selbst. Beim nächsten Import eines Vorlagenpakets kann das überschrieben werden — für eine dauerhafte Änderung ist der dritte Weg der sicherere.

3 · Ein eigenes Stylesheet

Stile → Eigenes CSS → Neue Datei. Eine neu angelegte Datei wird ans Ende der Ladereihenfolge gehängt, und das ist der Punkt: Bei gleicher Spezifität gewinnt die zuletzt geladene Regel. Was hier steht, schlägt die ganze Vorlage, ohne dass man ihr etwas wegnehmen muss.

Auch a11y.scss steht dann nicht mehr am Ende

Diese eine Datei liegt mit Absicht zuletzt: Ihre Regeln müssen Entscheidungen weiter oben gewinnen — eine Bedienhilfe, die nur bei Hover erschiene, ein Zustand, der nur an einer Farbe hinge. Eine eigene Datei landet dahinter. Wenn nach einer Änderung etwas verschwindet, das mit Tastatur, Kontrast oder Druck zu tun hat, ist das die erste Stelle zum Nachsehen.

Die Ausnahme: Diagramme

Bei Mermaid reicht keiner der drei Wege ohne !important. Quartz übergibt dem Diagramm-Renderer neun seiner rund hundert Theme-Variablen (primaryColor, lineColor, secondaryColor und sechs weitere, fest im Quartz-Skript verdrahtet). Alles andere färbt Mermaid selbst — und schreibt es als <style> mit der Kennung des jeweiligen SVG in die Grafik, also mit einem ID-Selektor, den keine Klassenregel schlägt.

Deshalb stehen im Abschnitt body-mermaid von content.scss 129 !important — und deshalb braucht auch deine eigene Regel eins. Zum Vergleich: In allen anderen Abschnitten zusammen sind es 21, jedes mit einer Begründung daneben.

Was du nicht anfassen solltest

Die Ladereihenfolge, die Schriften und die Variablen stehen als Blöcke zwischen Markierungen in _quartzcontrol.scss, einer eigenen Datei neben custom.scss. Die schreibt QuartzControl bei jedem Speichern neu — was du dort von Hand einträgst, ist beim nächsten Klick weg. custom.scss gehört dir; QuartzControl setzt dort nur die eine Zeile @use "./quartzcontrol"; ganz oben, die die Blöcke lädt.