98 lines
2.8 KiB
JavaScript
98 lines
2.8 KiB
JavaScript
|
/**
|
||
|
|
* COLOR THEME SYSTEM
|
||
|
|
* Pure JavaScript implementation (replacing hyperscript due to parsing issues)
|
||
|
|
* Handles light/dark/auto theme switching
|
||
|
|
*/
|
||
|
|
|
||
|
|
// Set color theme
|
||
|
|
function setColorTheme(mode) {
|
||
|
|
// Save preference to localStorage
|
||
|
|
localStorage.setItem('color-theme-mode', mode);
|
||
|
|
|
||
|
|
// Apply theme to document
|
||
|
|
document.documentElement.setAttribute('data-color-theme', mode);
|
||
|
|
|
||
|
|
// Update button icon and color based on mode
|
||
|
|
const themeButton = document.querySelector('#color-theme-switcher');
|
||
|
|
const themeIcon = document.querySelector('#themeIcon');
|
||
|
|
|
||
|
|
if (themeButton) {
|
||
|
|
// Set data attribute for CSS styling
|
||
|
|
themeButton.setAttribute('data-theme-mode', mode);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (themeIcon) {
|
||
|
|
if (mode === 'light') {
|
||
|
|
themeIcon.setAttribute('icon', 'mdi:white-balance-sunny');
|
||
|
|
} else if (mode === 'dark') {
|
||
|
|
themeIcon.setAttribute('icon', 'mdi:moon-waning-crescent');
|
||
|
|
} else {
|
||
|
|
themeIcon.setAttribute('icon', 'mdi:theme-light-dark');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update button active states (for hidden compatibility buttons)
|
||
|
|
const buttons = document.querySelectorAll('.theme-option-btn');
|
||
|
|
buttons.forEach(btn => {
|
||
|
|
if (btn.getAttribute('data-theme-mode') === mode) {
|
||
|
|
btn.classList.add('active');
|
||
|
|
} else {
|
||
|
|
btn.classList.remove('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialize color theme
|
||
|
|
function initColorTheme() {
|
||
|
|
// Get saved preference or default to 'auto'
|
||
|
|
const savedTheme = localStorage.getItem('color-theme-mode') || 'auto';
|
||
|
|
setColorTheme(savedTheme);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Setup button click handler
|
||
|
|
function setupColorThemeButton() {
|
||
|
|
const button = document.querySelector('#color-theme-switcher');
|
||
|
|
if (button) {
|
||
|
|
button.addEventListener('click', () => {
|
||
|
|
// Get current theme
|
||
|
|
const currentTheme = localStorage.getItem('color-theme-mode') || 'auto';
|
||
|
|
|
||
|
|
// Cycle: auto → light → dark → auto
|
||
|
|
if (currentTheme === 'auto') {
|
||
|
|
setColorTheme('light');
|
||
|
|
} else if (currentTheme === 'light') {
|
||
|
|
setColorTheme('dark');
|
||
|
|
} else {
|
||
|
|
setColorTheme('auto');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Watch system theme changes (optional enhancement)
|
||
|
|
function watchSystemTheme() {
|
||
|
|
const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||
|
|
|
||
|
|
darkModeQuery.addEventListener('change', () => {
|
||
|
|
const currentMode = localStorage.getItem('color-theme-mode');
|
||
|
|
if (currentMode === 'auto' || currentMode === null) {
|
||
|
|
// Theme will automatically update via CSS
|
||
|
|
// Just ensure the UI reflects the current state
|
||
|
|
setColorTheme('auto');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialize on DOM ready
|
||
|
|
if (document.readyState === 'loading') {
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
initColorTheme();
|
||
|
|
setupColorThemeButton();
|
||
|
|
watchSystemTheme();
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
initColorTheme();
|
||
|
|
setupColorThemeButton();
|
||
|
|
watchSystemTheme();
|
||
|
|
}
|