45 lines
2.0 KiB
JavaScript
45 lines
2.0 KiB
JavaScript
/**
|
|
* Theme Switcher Utility
|
|
*/
|
|
|
|
// Theme configuration
|
|
const THEMES = ['crimson', 'dark', 'light'];
|
|
|
|
const THEME_ICONS = {
|
|
crimson: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>`,
|
|
dark: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>`,
|
|
light: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><path d="M12 2c0 0-4 4-4 8a4 4 0 0 0 8 0c0-4-4-8-4-8z"/></svg>`,
|
|
};
|
|
|
|
const THEME_LABELS = {
|
|
crimson: 'Switch to dark mode',
|
|
dark: 'Switch to light mode',
|
|
light: 'Switch to crimson theme',
|
|
};
|
|
|
|
let currentTheme = localStorage.getItem('an-theme') || 'crimson';
|
|
|
|
function applyTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
document.querySelectorAll('.theme-toggle').forEach(btn => {
|
|
btn.innerHTML = THEME_ICONS[theme];
|
|
btn.setAttribute('title', THEME_LABELS[theme]);
|
|
btn.setAttribute('aria-label', THEME_LABELS[theme]);
|
|
});
|
|
localStorage.setItem('an-theme', theme);
|
|
currentTheme = theme;
|
|
}
|
|
|
|
function nextTheme() {
|
|
const idx = THEMES.indexOf(currentTheme);
|
|
return THEMES[(idx + 1) % THEMES.length];
|
|
}
|
|
|
|
// Export for use in other files
|
|
window.ThemeUtils = {
|
|
THEMES,
|
|
applyTheme,
|
|
nextTheme,
|
|
getCurrentTheme: () => currentTheme,
|
|
};
|