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';
		}
	    });
	}
});