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:
@@ -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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user