Remove the theme toggle

2 files changed, 13 insertions, 161 deletions

diff --git a/assets/cgit.css b/assets/cgit.cssindex 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.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.jsindex 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/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);
-
-})();