Von Haus aus
Ein Button mit zwei Symbolen, von denen je nach Schema eines sichtbar ist.
In dieser Vorlage
Er ist Teil der Werkzeugleiste im Kopfbereich und teilt deren Maße: 44 × 44 px, gleicher Rahmen, gleiche Ecken wie Suche, Lesemodus und Sprachumschalter. Eine Reihe von Bedienelementen mit unterschiedlichen Höhen liest sich als Fehler.
Beim Überfahren wechselt der Rand auf die Akzentfarbe und die Fläche auf die getönte Variante — dieselbe Rückmeldung wie bei den beiden Nachbarn.
Ein Fund beim Bauen
Die erste Fassung dieser Datei gestaltete ein <input>/<label>-Paar. Das gibt es hier nicht: Die
Komponente ist ein einzelner <button class="darkmode"> mit zwei SVGs darin. Die Regeln trafen
nichts — sichtbar wurde das erst, als jeder Selektor der Vorlage gegen die gebaute Seite geprüft
wurde.
Daraus die Regel, die überall in dieser Vorlage gilt: Vor dem Schreiben einer Regel im gebauten HTML nachsehen. Klassennamen sind kein Vertrag.
Welche Variablen hier greifen
Diese 10 Variablen liest der Abschnitt nav-darkmode in components-header.scss. Ändern lassen sie sich in QuartzControl unter Stile → Variablen — ohne eine Zeile CSS.
| Variable | Wert | gilt außerdem für |
|---|---|---|
--darkgray | #333333 · dunkel #DDDDDD | 18 weitere Komponenten |
--light | #FCFCFA · dunkel #16171A | 14 weitere Komponenten |
--secondary | #1463A3 · dunkel #699DC3 | 19 weitere Komponenten |
--tpl-icon | 1.1rem | 3 weitere Komponenten |
--tpl-motion | 150ms ease | 13 weitere Komponenten |
--tpl-radius-md | 8px | 17 weitere Komponenten |
--tpl-rule-control | color-mix(in srgb, var(--gray) 70%, var(-… | 11 weitere Komponenten |
--tpl-rule-width | 1px | 25 weitere Komponenten |
--tpl-surface-tint | var(--highlight) = rgba(42, 78, 108, 0.10) | 14 weitere Komponenten |
--tpl-target | 44px | 12 weitere Komponenten |
Diese Tabelle ist erzeugt: Sie wird aus den Stylesheets gelesen, nicht von Hand gepflegt.