feat: implement color theme switcher with dynamic button colors

Complete color theme system (light/dark/auto) with dynamic UI:

Features:
- Color theme switcher with auto/light/dark modes
- Dynamic button colors on hover (purple/yellow/blue per theme)
- localStorage persistence across sessions
- Proper button positioning (desktop and mobile)
- Mobile: 5-button layout with theme before info button

Fixes:
- CSP updated to allow jsDelivr CDN for iconify icons
- Button repositioning: Download PDF and Print Friendly at top
- Hover-only colors (not persistent)
- Mobile button order corrected

Files:
- static/css/color-theme.css - Theme system with CSS variables
- static/js/color-theme.js - Theme switching logic
- templates/partials/color-theme-switcher.html - Button component
- internal/middleware/security.go - CSP fix for jsDelivr
- tests/mjs/13-color-theme-switcher.test.mjs - Comprehensive test
- tests/TEST-SUMMARY.md - Updated test documentation
This commit is contained in:
juanatsap
2025-11-18 15:49:30 +00:00
parent 481003fcf8
commit f3cce51fb3
13 changed files with 1193 additions and 41 deletions
+4 -2
View File
@@ -24,7 +24,8 @@
<!-- Out-of-band swap: Page 1 content wrapper with fade transition -->
<div id="cv-inner-content-page-1"
class="cv-page-content-wrapper"
hx-swap-oob="innerHTML">
hx-swap-oob="innerHTML"
_="on htmx:oobAfterSwap wait 100ms then remove .loading from me">
{{template "title-badges" .}}
<!-- Page 1 Content Grid: Left Sidebar + Main Content -->
@@ -67,7 +68,8 @@
<!-- Out-of-band swap: Page 2 content wrapper with fade transition -->
<div id="cv-inner-content-page-2"
class="cv-page-content-wrapper"
hx-swap-oob="innerHTML">
hx-swap-oob="innerHTML"
_="on htmx:oobAfterSwap wait 100ms then remove .loading from me">
{{template "title-badges" .}}
<!-- Page 2 Content Grid: Main Content + Right Sidebar -->