60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
// Theme management module
|
|
class ThemeManager {
|
|
constructor() {
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.setupTheme();
|
|
this.setupSystemListener();
|
|
}
|
|
|
|
setupTheme() {
|
|
const savedTheme = localStorage.getItem('theme');
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
if (savedTheme) {
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
} else if (prefersDark) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
}
|
|
this.updateToggleIcon();
|
|
}
|
|
|
|
toggle() {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
|
|
document.documentElement.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
this.updateToggleIcon();
|
|
}
|
|
|
|
updateToggleIcon() {
|
|
const themeToggle = document.querySelector('.theme-toggle');
|
|
if (themeToggle) {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
themeToggle.textContent = currentTheme === 'dark' ? '☀️' : '🌙';
|
|
}
|
|
}
|
|
|
|
setupSystemListener() {
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
if (!localStorage.getItem('theme')) {
|
|
document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
|
|
this.updateToggleIcon();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Initialize theme manager
|
|
const themeManager = new ThemeManager();
|
|
|
|
// Global function for the HTML onclick
|
|
function toggleTheme() {
|
|
themeManager.toggle();
|
|
}
|