Remove the theme toggle

author: Bryce Kwon <bryce@brycekwon.com> 2026-09-06 20:15:27 -1000
committer: Bryce Kwon <bryce@brycekwon.com> 2026-09-06 20:15:27 -1000
commit: 1c0918295bf88a4219df71d2950dd7373b6ce5d1 (patch)
parent: 27741c1909346fa0f819f652041a3b0bdc8a53de (diff)
tree: aa47b28362477d91ba09f1971d5e52c3952b0f0e
download: cgit-1c0918295bf88a4219df71d2950dd7373b6ce5d1.tar.gz
cgit-1c0918295bf88a4219df71d2950dd7373b6ce5d1.zip
3 files changed, 13 insertions, 163 deletions
diff --git a/assets/cgit.css b/assets/cgit.css
index 225af98..66d9bb8 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -2,9 +2,8 @@
  * 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 and can be flipped
- * with the header toggle (which sets data-theme on <html>). All rules
- * stay scoped under div#cgit so cgit can be embedded in another page.
+ * whole theme follows the reader's system preference. All rules stay
+ * scoped under div#cgit so cgit can be embedded in another page.
  */
 
 div#cgit {
@@ -82,7 +81,7 @@ div#cgit {
 
   /* Shared horizontal inset so every region lines up down the page. */
   --gutter: 1.25rem;
-  /* Shared height so the toggle, dropdowns and fields all agree. */
+  /* Shared height so the dropdowns and fields all agree. */
   --control-h: 2em;
 
   --radius: 5px;
@@ -101,15 +100,6 @@ div#cgit {
   background: var(--bg);
 }
 
-/* Set on <html> by the script before the body parses. */
-html[data-theme="light"] div#cgit {
-  color-scheme: light;
-}
-
-html[data-theme="dark"]  div#cgit {
-  color-scheme: dark;
-}
-
 /* Scoped so an embedding host page is left alone. */
 html.cgit-standalone {
   color-scheme: light dark;
@@ -198,10 +188,10 @@ div#cgit button:focus-visible {
 
 div#cgit #header {
   display: grid;
-  grid-template-columns: auto 1fr auto auto;
+  grid-template-columns: auto 1fr auto;
   grid-template-areas:
-    "logo heading switch theme"
-    "logo desc    owner  owner";
+    "logo heading switch"
+    "logo desc    owner";
   align-items: center;
   column-gap: 10px;
   width: 100%;
@@ -209,49 +199,6 @@ 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: var(--radius);
-  cursor: pointer;
-  line-height: 1;
-}
-
-/* The display rule above would defeat 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;
-}
-
-/* Reserved up front so the reveal does not shift the header. */
-html.cgit-js div#cgit #header {
-  grid-template-columns: auto 1fr auto var(--control-h);
-}
-
 /* Reserved so the header holds still while the image loads. */
 div#cgit #header .logo {
   grid-area: logo;
@@ -1450,10 +1397,10 @@ div#cgit table.ssdiff td.space {
   }
 
   div#cgit #header {
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto 1fr;
     grid-template-areas:
-      "logo heading theme"
-      "desc desc    desc";
+      "logo heading"
+      "desc desc";
     row-gap: 6px;
   }
 
@@ -1461,11 +1408,6 @@ div#cgit table.ssdiff td.space {
     display: none;
   }
 
-  /* Outranks the base reservation, whose fourth column would sit here empty. */
-  html.cgit-js div#cgit #header {
-    grid-template-columns: auto 1fr var(--control-h);
-  }
-
   div#cgit #header::before {
     grid-column: 1 / -1;
   }
diff --git a/assets/cgit.js b/assets/cgit.js
index 34927d0..636ad33 100644
--- a/assets/cgit.js
+++ b/assets/cgit.js
@@ -2,11 +2,11 @@
  * The client side script that cgit serves with every page. Its main job is
  * to refresh the relative ages that cgit_print_age renders in
  * source/ui-shared.c, so the thresholds, suffixes and class names tabulated
- * below mirror the constants there and the two have to move together. Three
+ * below mirror the constants there and the two have to move together. Two
  * smaller pieces follow, the selects that reload the page when they change,
- * the highlight laid over the source line a URL fragment names, and the
- * colour theme toggle. Each piece is wrapped in a function of its own so
- * that nothing is left behind in the global scope.
+ * and the highlight laid over the source line a URL fragment names. Each
+ * piece is wrapped in a function of its own so that nothing is left behind
+ * in the global scope.
  */
 
 (function () {
@@ -167,93 +167,3 @@ document.addEventListener("DOMContentLoaded", place_bar, false);
 window.addEventListener("hashchange", place_bar, false);
 
 })();
-
-/*
- * The colour theme toggle, which cycles from auto through light to dark and
- * remembers the choice. Auto sets no override at all, leaving the page to
- * follow the system preference the way the stylesheet does on its own.
- */
-
-(function () {
-
-var STORAGE_KEY = "cgit-theme";
-var ORDER = [ "auto", "light", "dark" ];
-var ICONS = {
-  auto:  '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/></svg>',
-  light: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 1v3M12 20v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M1 12h3M20 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>',
-  dark:  '<svg viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z"/></svg>'
-};
-
-/*
- * Local storage throws instead of answering when the browser has storage
- * switched off for the site, and a colour preference is not worth breaking
- * the page over, so both of these swallow the failure and the reader is left
- * on the automatic theme.
- */
-function saved() {
-  try {
-    return localStorage.getItem(STORAGE_KEY);
-  } catch (e) {
-    return null;
-  }
-}
-
-function persist(theme) {
-  try {
-    localStorage.setItem(STORAGE_KEY, theme);
-  } catch (e) { }
-}
-
-function apply(theme, button) {
-  var html = document.documentElement;
-
-  if (theme === "auto")
-    html.removeAttribute("data-theme");
-  else
-    html.setAttribute("data-theme", theme);
-
-  // The browser paints the page canvas and the scrollbars from
-  // color-scheme rather than from the stylesheet, so it has to be told
-  // the choice as well.
-  html.style.colorScheme = (theme === "auto") ? "" : theme;
-
-  if (button) {
-    button.innerHTML = ICONS[theme];
-    button.title = "Colour theme: " + theme;
-  }
-}
-
-var theme = saved();
-if (ORDER.indexOf(theme) < 0)
-  theme = "auto";
-
-// This runs while the file is being parsed rather than on DOMContentLoaded.
-// The script is fetched from the head and so runs before the body exists,
-// which lands the choice ahead of the first paint and stops the page showing
-// the other theme for a moment. The marker goes on the same element for the
-// same reason, since div#cgit has not been parsed yet, and cgit-js reserves
-// the toggle's column so that revealing the button below does not shift the
-// header sideways.
-apply(theme, null);
-document.documentElement.classList.add("cgit-js");
-
-document.addEventListener("DOMContentLoaded", function () {
-  var root = document.getElementById("cgit");
-  if (!root)
-    return;
-  var button = root.querySelector(".theme-toggle");
-  if (!button)
-    return;
-
-  apply(theme, button);
-  // The button is served hidden so that a reader without scripting is
-  // never shown a control that cannot do anything.
-  button.hidden = false;
-  button.addEventListener("click", function () {
-    theme = ORDER[(ORDER.indexOf(theme) + 1) % ORDER.length];
-    persist(theme);
-    apply(theme, button);
-  });
-}, false);
-
-})();
diff --git a/source/ui-shared.c b/source/ui-shared.c
index eb81aac..307dba0 100644
--- a/source/ui-shared.c
+++ b/source/ui-shared.c
@@ -561,8 +561,6 @@ static void print_header(void)
 		html("</p>\n");
 	}
 
-	html("<button type='button' class='theme-toggle' hidden "
-	     "aria-label='Toggle color theme'></button>\n");
 	html("</header>\n");
 }
author	Bryce Kwon <bryce@brycekwon.com>	2026-09-06 20:15:27 -1000
committer	Bryce Kwon <bryce@brycekwon.com>	2026-09-06 20:15:27 -1000
commit	1c0918295bf88a4219df71d2950dd7373b6ce5d1 (patch)
parent	27741c1909346fa0f819f652041a3b0bdc8a53de (diff)
tree	aa47b28362477d91ba09f1971d5e52c3952b0f0e
download	cgit-1c0918295bf88a4219df71d2950dd7373b6ce5d1.tar.gz cgit-1c0918295bf88a4219df71d2950dd7373b6ce5d1.zip
-rw-r--r--	assets/cgit.css	76
-rw-r--r--	assets/cgit.js	98
-rw-r--r--	source/ui-shared.c	2