35 lines
1.0 KiB
JavaScript
35 lines
1.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const themeOptions = document.querySelectorAll('.theme-option');
|
|
const html = document.documentElement;
|
|
|
|
// Set initial theme from localStorage or default to latte
|
|
const savedTheme = localStorage.getItem('catppuccin-theme') || 'latte';
|
|
html.setAttribute('data-theme', savedTheme);
|
|
updateActiveTheme(savedTheme);
|
|
|
|
// Theme switcher functionality
|
|
themeOptions.forEach(option => {
|
|
option.addEventListener('click', () => {
|
|
const theme = option.dataset.theme;
|
|
html.setAttribute('data-theme', theme);
|
|
localStorage.setItem('catppuccin-theme', theme);
|
|
updateActiveTheme(theme);
|
|
});
|
|
});
|
|
|
|
// Update active theme indicator
|
|
function updateActiveTheme(theme) {
|
|
themeOptions.forEach(opt => {
|
|
const isActive = opt.dataset.theme === theme;
|
|
opt.classList.toggle('active', isActive);
|
|
|
|
// Update border color immediately
|
|
if (isActive) {
|
|
opt.style.borderColor = `var(--theme-mantle)`;
|
|
} else {
|
|
opt.style.borderColor = 'transparent';
|
|
}
|
|
});
|
|
}
|
|
});
|