Diff options
| author | Bryce Kwon <bryce@brycekwon.com> | |
|---|---|---|
| committer | Bryce Kwon <bryce@brycekwon.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
Add a light and dark theme toggle
The button is emitted hidden and only revealed by the script, so a
browser without JavaScript never shows a control that cannot work and
the page keeps tracking the system theme.
Diffstat (limited to 'assets/cgit.css')
| -rw-r--r-- | assets/cgit.css | 54 |
1 file changed, 49 insertions, 5 deletions
diff --git a/assets/cgit.css b/assets/cgit.css index 73b61f1..a65bc49 100644 --- a/assets/cgit.css +++ b/assets/cgit.css @@ -2,8 +2,9 @@ * cgit.css: styling for the cgit web interface * * Colours are driven by CSS custom properties via light-dark(), so the - * whole theme follows the reader's system preference. All rules stay - * scoped under div#cgit so cgit can be embedded in another page. + * whole theme follows the reader's system preference and can be flipped + * with the header toggle (which sets data-theme on div#cgit). All rules + * stay scoped under div#cgit so cgit can be embedded in another page. */ div#cgit { @@ -94,6 +95,10 @@ div#cgit { background: var(--bg); } +/* Explicit theme choices made through the header toggle. */ +div#cgit[data-theme="light"] { color-scheme: light; } +div#cgit[data-theme="dark"] { color-scheme: dark; } + /* On a standalone cgit page, paint the page background to match the app * and drop the default body margin so the interface is part of the page * rather than a card floating on a mismatched canvas. Scoped to the @@ -188,10 +193,10 @@ div#cgit button:focus-visible { div#cgit #header { display: grid; - grid-template-columns: auto 1fr auto; + grid-template-columns: auto 1fr auto auto; grid-template-areas: - "logo heading switch" - "logo desc owner"; + "logo heading switch theme" + "logo desc owner ."; align-items: center; column-gap: 10px; width: 100%; @@ -199,6 +204,45 @@ div#cgit #header { margin-bottom: 0; } +div#cgit #header .theme-toggle { + grid-area: theme; + justify-self: end; + align-self: center; + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--control-h); + height: var(--control-h); + padding: 0; + color: var(--muted); + background-color: var(--surface); + border: solid 1px var(--border); + border-radius: 5px; + cursor: pointer; + line-height: 1; +} + +/* Keep the button hidden until the script reveals it, since the display + * rule above would otherwise override the hidden attribute. */ +div#cgit #header .theme-toggle[hidden] { + display: none; +} + +div#cgit #header .theme-toggle:hover { + color: var(--fg); + border-color: var(--border-mid); +} + +div#cgit #header .theme-toggle svg { + width: 1.1em; + height: 1.1em; + fill: none; + stroke: currentColor; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; +} + div#cgit #header .logo { grid-area: logo; align-self: start; |