feat(theme): add active indicators for theme dropdown

- Create themeDropdown.ts to manage active state highlighting
- Show which theme/wood option is currently selected
- Use CSS classes instead of inline styles for indicators
- Wrap existing functions to update indicators on toggle
- Auto-initialize indicators on DOM ready
This commit is contained in:
2026-02-24 13:00:14 -05:00
parent fffa87009a
commit 245c775f54
+55
View File
@@ -0,0 +1,55 @@
// Theme dropdown active indicator management
// Update visual indicators for theme buttons
const updateThemeIndicators = (): void => {
const currentTheme = localStorage.getItem('theme') || 'tokyo-night';
// Update theme buttons (all buttons with changeThemeTo onclick)
document.querySelectorAll('[onclick^="changeThemeTo"]').forEach(btn => {
const onclick = btn.getAttribute('onclick') || '';
const match = onclick.match(/changeThemeTo\('(.+?)'\)/);
if (match) {
const theme = match[1];
if (theme === currentTheme) {
// Active state - use CSS class instead of inline style
btn.classList.add('bg-theme-active');
btn.classList.remove('bg-theme-inactive');
} else {
// Inactive state
btn.classList.remove('bg-theme-active');
btn.classList.add('bg-theme-inactive');
}
}
});
};
// Make function available globally
(window as any).updateThemeIndicators = updateThemeIndicators;
// Update on dropdown toggle
const originalToggleThemeDropdown = (window as any).toggleThemeDropdown;
if (originalToggleThemeDropdown) {
(window as any).toggleThemeDropdown = () => {
originalToggleThemeDropdown();
updateThemeIndicators();
(window as any).updateWoodPanelingIndicators?.();
};
}
// Update after theme changes
const originalChangeThemeTo = (window as any).changeThemeTo;
if (originalChangeThemeTo) {
(window as any).changeThemeTo = (...args: unknown[]) => {
originalChangeThemeTo(...args);
updateThemeIndicators();
};
}
// Auto-initialize when DOM is ready
if (typeof document !== 'undefined') {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', updateThemeIndicators);
} else {
updateThemeIndicators();
}
}