Out of the box
A button with two symbols, one of which is visible depending on the scheme.
In this template
It is part of the toolbar in the header and shares its measurements: 44 × 44 px, the same border, the same corners as search, reader mode and the language switcher. A row of controls with differing heights reads as a mistake.
On hover the border changes to the accent colour and the surface to the tinted variant — the same feedback as with its neighbours.
A finding while building
The first version of this file styled an <input>/<label> pair. There is none here: the
component is a single <button class="darkmode"> with two SVGs in it. The rules hit nothing —
which only became visible when every selector of the template was checked against the built page.
Hence the rule that applies everywhere in this template: look in the built HTML before writing a rule. Class names are no contract.
Which variables apply here
These 10 variables are read by the section nav-darkmode in components-header.scss. They can be changed in QuartzControl under Styles → Variables — without a line of CSS.
| Variable | Value | also applies to |
|---|---|---|
--darkgray | #333333 · dark #DDDDDD | 18 other components |
--light | #FCFCFA · dark #16171A | 14 other components |
--secondary | #1463A3 · dark #699DC3 | 19 other components |
--tpl-icon | 1.1rem | 3 other components |
--tpl-motion | 150ms ease | 13 other components |
--tpl-radius-md | 8px | 17 other components |
--tpl-rule-control | color-mix(in srgb, var(--gray) 70%, var(-… | 11 other components |
--tpl-rule-width | 1px | 25 other components |
--tpl-surface-tint | var(--highlight) = rgba(42, 78, 108, 0.10) | 14 other components |
--tpl-target | 44px | 12 other components |
This table is generated: it is read out of the stylesheets rather than kept by hand.