Add "theme switch" menu to top commits nav bar (#312)

Author: jbampton

doc/source/_static/css/custom.css

@@ -25,7 +25,7 @@ body.light-theme {
 body.dark-theme {
     /* Primary Colors */
     --text-color: #c9c9c9;          /* Light Gray */
-    --heading-color: red;   /* Off-White */
+    --heading-color: red;           /* Off-White */
     --main-bg-color: #282c34;       /* Charcoal Main Background */
     --sidebar-bg-color: rgba(40, 44, 52, 0.9); /* Charcoal (Slight transparency) */
     --border-color: #3e4451;        /* Darker Border */
@@ -43,31 +43,27 @@ body.dark-theme {
 
 /* --- 2. Apply Variables to Global Elements --- */
 
-/* Apply to the main body and body wrapper */
 body {
     color: var(--text-color);
-    background-color: var(--main-bg-color); /* Fallback if no background image */
+    background-color: var(--main-bg-color);
     transition: background-color 0.3s, color 0.3s;
 }
 
-/* Ensure headings use the heading color */
 h1, h2, h3, h4, h5, h6,
 div.document > h1, div.document > h2, div.document > h3 {
     color: var(--heading-color);
 }
 
 /* --- 3. Sidebar Styling --- */
 
-/* Target the main sidebar wrapper */
 div.sphinxsidebar {
     background: var(--sidebar-bg-color) !important;
     border-right: 1px solid var(--border-color);
-    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* Keep shadow dark */
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
     color: var(--text-color);
     transition: background-color 0.3s, color 0.3s;
 }
 
-/* Sidebar Headings */
 div.sphinxsidebar h1,
 div.sphinxsidebar h3,
 div.sphinxsidebar .caption {
@@ -78,28 +74,24 @@ div.sphinxsidebar .caption {
     font-size: 16pt;
 }
 
-/* Sidebar Normal Links */
 div.sphinxsidebar a {
     color: var(--link-color);
     text-decoration: none;
 }
 
-/* Sidebar Links on Hover */
 div.sphinxsidebar a:hover {
     color: var(--link-hover-color);
     text-decoration: underline;
 }
 
-/* Fix Current/Active Navigation Links */
 div.sphinxsidebar li.toctree-l1.current > a,
 div.sphinxsidebar li.toctree-l2.current > a {
     font-weight: bold;
     color: var(--current-link-color) !important;
-    border-left: 3px solid var(--link-color); /* Use the standard link color for the border */
+    border-left: 3px solid var(--link-color);
     padding-left: 5px;
 }
 
-/* Ensure the link text for all navigation items is dark/correct */
 div.sphinxsidebar ul li a, div.sphinxsidebar p {
     color: var(--text-color);
     padding-left: 8px;
@@ -128,7 +120,6 @@ div.sphinxsidebar ul li a, div.sphinxsidebar p {
 
 .bodywrapper {
     background-color: var(--main-bg-color);
-    /* Transition to smooth the background change when toggling background image */
     transition: background-color 0.3s;
 }
 
@@ -142,12 +133,12 @@ body.dark-theme .bodywrapper .body {
 
 /* --- 7. Random Theme Overrides --- */
 
-/* Define the new CSS variables for random colors (they will be set via JS) */
+/* Define the new CSS variables for random colors (set via JS) */
 :root {
-    --random-main-bg-color: #282c34;     /* Default Dark */
-    --random-text-color: #c9c9c9;        /* Default Light Gray */
-    --random-heading-color: #ffffff;     /* Default White */
-    --random-link-color: #92b0ff;        /* Default Blue */
+    --random-main-bg-color: #282c34;
+    --random-text-color: #c9c9c9;
+    --random-heading-color: #ffffff;
+    --random-link-color: #92b0ff;
     --random-link-hover-color: #a8c1ff;
     --random-sidebar-bg-color: rgba(40, 44, 52, 0.9);
     --random-border-color: #3e4451;
@@ -164,8 +155,8 @@ body.custom-random-theme {
     --border-color: var(--random-border-color);
     --link-color: var(--random-link-color);
     --link-hover-color: var(--random-link-hover-color);
-    --current-link-color: var(--random-heading-color); /* Use a bright color */
-    --search-bg-color: var(--random-border-color); /* Use a darker color */
+    --current-link-color: var(--random-heading-color);
+    --search-bg-color: var(--random-border-color);
     --footer-bg-color: var(--random-footer-bg-color);
     --footer-text-color: var(--random-text-color);
 
@@ -174,23 +165,20 @@ body.custom-random-theme {
     --commit-date-color: #ffcc00; /* Yellow */
 }
 
-/* Ensure the bodywrapper also uses the random background color if background image is off */
 body.custom-random-theme .bodywrapper {
     background-color: var(--random-main-bg-color);
 }
 
 /* --- 8. Custom Vertical Orange Gradient for bodywrapper --- */
 
-/* Target the bodywrapper element for the gradient background */
 .bodywrapper .body {
     background-image: linear-gradient(
         to bottom,
-        #FFF3E0 0%,      /* Very Light Orange / Creamy */
-        #FFB74D 50%,      /* Medium Orange */
-        #E65100 100%      /* Dark Orange */
+        #FFF3E0 0%,
+        #FFB74D 50%,
+        #E65100 100%
     ) !important;
 
-    /* Fallback color for non-supporting browsers */
     background-color: #E65100;
 }
 
@@ -207,43 +195,78 @@ div.body .caption {
 
 #full-width-commit-banner {
     width: 100%;
-    background-color: #333; /* Dark background for banner */
+    background-color: #333;
     color: white;
     padding: 10px 0;
-    text-align: left; /* Aligns the button */
+    text-align: left;
     box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    position: relative; /* Essential for dropdown positioning */
-    z-index: 1000; /* Ensure it stays on top */
+    position: relative;
+    z-index: 1000;
 }
 
-#commit-dropdown-button {
-    margin-left: 20px; /* Left align from page edge */
+/* Base style for banner buttons */
+.banner-button {
+    margin-left: 20px;
     padding: 8px 15px;
     background-color: #555;
     color: white;
     border: none;
     cursor: pointer;
+    margin-right: 10px; /* Space between buttons */
 }
 
-#commit-dropdown-content {
+/* Base style for both dropdowns */
+.dropdown-content {
     position: absolute;
-    left: 20px;
-    top: 100%; /* Position below the button */
-    background-color: white;
-    color: black;
+    top: 100%;
     border: 1px solid #ccc;
     max-height: 400px;
     overflow-y: auto;
-    width: 300px;
     z-index: 1001;
     padding: 10px;
 }
 
-/* Class to control the initial visibility */
-#commit-dropdown-content.commit-dropdown-hidden {
+/* Initial hidden state for the dropdown content (used by JS to toggle) */
+.commit-dropdown-hidden {
     display: none;
 }
 
+/* Positioning the commit dropdown */
+#commit-dropdown-content {
+    left: 20px;
+    width: 300px;
+}
+
+/* Positioning the theme dropdown (adjust '250px' based on layout/button width) */
+#theme-options-content {
+    left: 250px;
+    width: 180px;
+}
+
+
+/* Theme/Background options list formatting */
+#theme-options-content h3 {
+    margin-top: 10px;
+    margin-bottom: 5px;
+    font-size: 1em;
+    color: var(--heading-color);
+}
+
+.theme-option-group {
+    padding-left: 5px;
+    margin-bottom: 15px;
+}
+
+.theme-option-group p {
+    margin: 3px 0;
+}
+
+.theme-switch-link {
+    color: var(--link-color) !important;
+    text-decoration: none;
+    font-size: 0.9em;
+}
+
 #commit-search {
     width: 95%;
     padding: 5px;
@@ -254,7 +277,7 @@ div.body .caption {
     border-color: var(--border-color);
 }
 
-/* --- 10. CSS Class Styles for Dynamic Content (Commits) --- */
+/* --- 10. CSS Class Styles for Dynamic Content (Commits and Dropdowns) --- */
 
 /* Style for the short SHA link (used in renderCommits) */
 .commit-sha-link {
@@ -279,8 +302,8 @@ div.body .caption {
     text-decoration: underline;
 }
 
-/* Ensure the dropdown content itself uses the theme colors correctly */
-body #commit-dropdown-content {
+/* Ensure ALL dropdown content uses the correct theme colors */
+body .dropdown-content {
     background-color: var(--main-bg-color);
     color: var(--text-color);
     border-color: var(--border-color);

doc/source/_static/js/background-switcher.js

@@ -0,0 +1,73 @@
+// Map page IDs to their corresponding background image URLs
+const BG_MAP = {
+  'shades-games-club': 'the-big-issue',
+  'first-event': 'first-event-second-game',
+  'second-event': 'second-event',
+  'third-event': 'third-event-beers-in-play',
+  'fourth-event': 'fourth-event',
+  'fifth-event': 'fifth-event',
+  'sixth-event': 'sixth-event',
+  catan: 'catan',
+  chess: 'chess',
+  'c-o-o-l-chess': 'cool-chess',
+  harmegedo: 'harmegedo',
+  'history-of-64-shades': 'history',
+  quaternity: 'quaternity-wooden-set',
+  'the-first-challenger': 'first-event-first-game',
+  'top-pitfalls': 'top-pitfalls',
+  'uno-show-em-no-mercy': 'uno-show-em-no-mercy',
+};
+
+const BACKGROUND_KEY = 'sphinx_background_preference';
+
+/**
+ * Public function to turn the background image on or off.
+ * Defined globally so the HTML `href="javascript:setBackground(...)` works.
+ * @param {string} state - 'on' or 'off'
+ */
+window.setBackground = function (state) {
+  const mainSection = document.querySelector('[role="main"] > section:first-child');
+  if (!mainSection) return;
+
+  const pageId = mainSection.id;
+  const bgUrl = BG_MAP[pageId];
+  const body = document.body;
+  const bodyWrapper = document.querySelector('.bodywrapper');
+
+  // The updateBackgroundLinks function is now in commit-banner.js,
+  // but since that file is loaded first, we can rely on it being available.
+  const updateBackgroundLinks = window.updateBackgroundLinks || function () {}; // Fallback
+
+  if (state === 'on' && bgUrl) {
+    body.style.backgroundImage = `url('_static/images/backgrounds/${bgUrl}.jpg')`;
+    body.style.backgroundSize = 'cover';
+    body.style.backgroundAttachment = 'fixed';
+    body.classList.add('background-on');
+
+    if (bodyWrapper) {
+      bodyWrapper.style.background = 'transparent';
+    }
+  } else {
+    body.style.backgroundImage = 'none';
+    body.style.backgroundSize = '';
+    body.style.backgroundAttachment = '';
+    body.classList.remove('background-on');
+
+    if (bodyWrapper) {
+      bodyWrapper.style.background = 'var(--main-bg-color)';
+    }
+  }
+
+  localStorage.setItem(BACKGROUND_KEY, state);
+  updateBackgroundLinks(state);
+};
+
+function loadBackgroundPreference() {
+  const storedBackground = localStorage.getItem(BACKGROUND_KEY) || 'on';
+  window.setBackground(storedBackground); // Use the global function
+}
+
+// Wait for the document to fully load and load background preference
+document.addEventListener('DOMContentLoaded', function () {
+  loadBackgroundPreference();
+});