dark mode tweaks: card/nav/logo/input refinements

- Card bodies use page background color instead of surface color
- Hours container matches page background in dark mode
- Main nav uses kbccblue background with white text in dark mode
- Radio buttons and labels are white in dark mode
- Library links are white in dark mode
- Search input stays white with dark text in dark mode
- Slick carousel arrows are white in dark mode
- LibGuides boxes use page background in dark mode
- Logo swaps to inverted version (white on dark) in dark mode

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

groups/home/bootstrap5/home1.css

@@ -166,6 +166,13 @@
   #hours-content-container > a {
     color: #fff
   }
+  [data-bs-theme="dark"] #hours-content-container {
+    background-color: var(--bg);
+    color: var(--text);
+  }
+  [data-bs-theme="dark"] #hours-content-container > a {
+    color: var(--text);
+  }
 
   /* style navbar */
   nav.navbar-light.main-nav-container {
@@ -177,6 +184,15 @@
     border-radius: 0;
     padding: 5px 0;
   }
+  [data-bs-theme="dark"] nav.navbar-light.main-nav-container {
+    background-color: var(--kbccblue) !important;
+    background: var(--kbccblue) !important;
+    color: white;
+  }
+  [data-bs-theme="dark"] .navbar-light .navbar-nav > li > a,
+  [data-bs-theme="dark"] .caret-text {
+    color: white;
+  }
   .main-nav-dropdown {
     margin: 0 8px;
   }
@@ -263,6 +279,12 @@
   #radios label {
     font-weight: bolder;
   }
+  [data-bs-theme="dark"] #radios label {
+    color: white;
+  }
+  [data-bs-theme="dark"] #radios input[type="radio"] {
+    accent-color: white;
+  }
   #advanced {
     float: right;
     margin-top: 10px;
@@ -284,6 +306,13 @@
   #primoQueryTemp {
     border-radius: 0;
   }
+  [data-bs-theme="dark"] #primoQueryTemp {
+    background-color: #fff;
+    color: #111;
+  }
+  [data-bs-theme="dark"] #primoQueryTemp::placeholder {
+    color: #666;
+  }
   .onesearchsubmit {
     border-radius: 0;
     padding: 6px 12px;
@@ -359,6 +388,10 @@
     font-size: 1.7em;
   }
 
+  [data-bs-theme="dark"] .link-list a {
+    color: white;
+  }
+
   /* External link icon styling (WCAG 2.4.4) */
   .external-link-icon {
     font-size: 0.7em;
@@ -419,6 +452,10 @@
     padding: 3px;
     padding-left: 30px;
   }
+  [data-bs-theme="dark"] .slick-prev:before,
+  [data-bs-theme="dark"] .slick-next:before {
+    color: white;
+  }
 
   /* style to make all imported boxes floating */
   .s-lib-box-title {
@@ -434,6 +471,10 @@
     box-shadow: none !important;
     border: 0 !important;
   }
+  [data-bs-theme="dark"] .s-lib-box,
+  [data-bs-theme="dark"] .s-lg-box {
+    background-color: var(--bg);
+  }
 
   /* style the dropdown menus */
   .dropdown-margin {
@@ -521,7 +562,7 @@
 
   /* card body dark mode background */
   .card-body {
-    background-color: var(--bg-surface);
+    background-color: var(--bg);
     transition: background-color 0.3s ease;
   }
 

groups/home/bootstrap5/home1.html

@@ -88,7 +88,7 @@
               id="library-logo"
               class="image-fail"
               alt="Kibbee Library logo"
-              src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg"
+              :src="isDark ? 'https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/Kibbee_library_logo_inverted.jpg' : 'https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg'"
             />
             {{content_box_33471502}}
           </div>