Der Lesemodus blendet die Seitenleisten aus, solange man auf der Seite bleibt.
Von Haus aus
Ein Button, der den Modus umschaltet. Die einzige Rückmeldung ist, dass die Seite anders aussieht.
In dieser Vorlage
Der Button zeigt seinen Zustand: Bei eingeschaltetem Lesemodus wechseln Rand, Fläche und Symbol auf die Akzentfarbe. Wer ihn versehentlich getroffen hat, sieht woran es liegt — sonst ist die einzige Rückmeldung, dass plötzlich die halbe Seite fehlt.
Maße wie bei den Nachbarn: 44 × 44 px, gleicher Rahmen.
Was der Lesemodus nicht ist
Er ändert nichts am Inhalt und nichts am Ausdruck. Für den Druck entfernt diese Vorlage die Leisten ohnehin — siehe Barrierefreiheit.
Welche Variablen hier greifen
Diese 10 Variablen liest der Abschnitt nav-reader-mode 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.