add dark/light mode toggle with OS preference detection

Uses Bootstrap 5.3 data-bs-theme attribute for automatic component
theming. Adds CSS custom properties for dark mode, a toggle button
in the header, localStorage persistence, and a flash-prevention
script. Background image overlay adjusts per theme.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

groups/home/bootstrap5/home1.css

@@ -3,11 +3,27 @@
     --kbccblue: #003466;
     --kbccorange: #ff4e00;
     --text: #111;
+    --bg: #fff;
+    --bg-surface: #fff;
+    --hover-dark: #444;
+    --focus-outline: #0056b3;
+    --link-color: black;
+  }
+
+  [data-bs-theme="dark"] {
+    --text: #e0e0e0;
+    --bg: #1a1a2e;
+    --bg-surface: #25253e;
+    --hover-dark: #555;
+    --focus-outline: #6ea8fe;
+    --link-color: #ccc;
   }
 
   body {
     color: var(--text);
+    background-color: var(--bg);
     overflow-x: hidden;
+    transition: background-color 0.3s ease, color 0.3s ease;
   }
 
   a,
@@ -53,14 +69,14 @@
   #hamburger:active {
     border: none;
     outline: none;
-    background-color: #fff;
+    background-color: var(--bg-surface);
     color: var(--kbccblue);
   }
   #hamburger::after {
     display: none;
   }
   #hamburger-ul > li > .searchmenu {
-    background-color: #fff;
+    background-color: var(--bg-surface);
   }
   #hamburger-ul {
     padding: 25px 0;
@@ -133,7 +149,7 @@
   /* Navigation dropdown toggles */
   .dropdown-toggle:focus,
   .dropdown-toggle:focus-visible {
-    outline: 3px solid #0056b3; /* high-contrast blue */
+    outline: 3px solid var(--focus-outline); /* high-contrast blue */
     outline-offset: 2px;
   }
 
@@ -153,8 +169,8 @@
 
   /* style navbar */
   nav.navbar-light.main-nav-container {
-    background-color: white !important;
-    background: white !important;
+    background-color: var(--bg-surface) !important;
+    background: var(--bg-surface) !important;
     border: none;
     font-size: 1.4em;
     color: var(--text);
@@ -167,7 +183,7 @@
   .nav .show > a,
   .nav .show > a:focus,
   .nav .show > a:hover {
-    background-color: #fff;
+    background-color: var(--bg-surface);
   }
   .nav > li > a:hover {
     outline: none;
@@ -252,7 +268,7 @@
     margin-top: 10px;
   }
   #advanced > strong > a {
-    color: black;
+    color: var(--link-color);
   }
   /* add flex so that blue box-shadows line up */
   #flex-search-form {
@@ -310,7 +326,7 @@
     margin-top: 4px;
   }
   .nav-divs-by-jumbotron:hover {
-    background-color: #444;
+    background-color: var(--hover-dark);
   }
   #eq_32886 {
     background-color: var(--kbccblue);
@@ -318,7 +334,7 @@
   }
   .nav-divs-by-jumbotron:hover > h2 > #eq_32886,
   #eq_32886:hover {
-    background-color: #444;
+    background-color: var(--hover-dark);
   }
   #bookastudyroom {
     cursor: pointer;
@@ -473,6 +489,48 @@
     max-width: 150px;
   }
 
+  /* dark mode toggle button */
+  #theme-toggle {
+    float: right;
+    background: none;
+    border: 2px solid var(--kbccblue);
+    color: var(--kbccblue);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    font-size: 1.2em;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+    margin-top: 5px;
+  }
+  #theme-toggle:hover {
+    background-color: var(--kbccblue);
+    color: #fff;
+  }
+  [data-bs-theme="dark"] #theme-toggle {
+    border-color: #ffc107;
+    color: #ffc107;
+  }
+  [data-bs-theme="dark"] #theme-toggle:hover {
+    background-color: #ffc107;
+    color: #1a1a2e;
+  }
+
+  /* card body dark mode background */
+  .card-body {
+    background-color: var(--bg-surface);
+    transition: background-color 0.3s ease;
+  }
+
+  /* dropdown menu dark mode background */
+  .dropdown-menu {
+    background-color: var(--bg-surface);
+    transition: background-color 0.3s ease;
+  }
+
   /* media queries */
 
   @media only screen and (min-width: 1px) {