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
@@ -4,7 +4,8 @@
aria-live="polite">
<!-- PAGE 1 -->
<div class="cv-page page-1">
<div id="cv-inner-content-page-1" class="cv-page-content-wrapper">
<div id="cv-inner-content-page-1" class="cv-page-content-wrapper"
_="on htmx:oobAfterSwap wait 100ms then remove .loading from me">
{{template "title-badges" .}}
<!-- Page 1 Content Grid: Left Sidebar + Main Content -->
@@ -47,7 +48,8 @@
<!-- PAGE 2 -->
<div class="cv-page page-2">
<div id="cv-inner-content-page-2" class="cv-page-content-wrapper">
<div id="cv-inner-content-page-2" class="cv-page-content-wrapper"
_="on htmx:oobAfterSwap wait 100ms then remove .loading from me">
{{template "title-badges" .}}
<!-- Page 2 Content Grid: Main Content + Right Sidebar -->