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