juanatsap
f3cce51fb3
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
18 lines
758 B
HTML
18 lines
758 B
HTML
{{define "color-theme-switcher"}}
|
|
<!-- Color Theme Switcher (Light/Dark/Auto) - Cycles on click -->
|
|
<!-- IMPORTANT: This controls COLOR theme, NOT layout theme (.theme-clean) -->
|
|
<button id="color-theme-switcher"
|
|
class="color-theme-switcher no-print"
|
|
aria-label="Toggle color theme"
|
|
title="Toggle color theme">
|
|
<iconify-icon id="themeIcon" icon="mdi:theme-light-dark" width="28" height="28"></iconify-icon>
|
|
</button>
|
|
|
|
<!-- Hidden buttons for compatibility (not displayed) -->
|
|
<div style="display: none;">
|
|
<button class="theme-option-btn" data-theme-mode="light"></button>
|
|
<button class="theme-option-btn" data-theme-mode="dark"></button>
|
|
<button class="theme-option-btn active" data-theme-mode="auto"></button>
|
|
</div>
|
|
{{end}}
|