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.

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;