Relocate the light/dark toggle button out of #app1 and into a new
#app3 mount just before the back-to-top element so keyboard focus
reaches it near the end of the page instead of right after the main
nav. Replace the library logo's reactive :src binding with a plain
src plus data-light-src/data-dark-src so app1 no longer needs any
theme state; app3 now owns toggleTheme, overlay updates, logo swap,
and the OS preference listener.
Repositions the dark/light mode button from the header to a fixed
position in the bottom-right corner (always visible). Bumps size
to 44px for WCAG touch target compliance. Also makes login text
and icon white in dark mode.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 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>
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>
Mark Eaton