new ThemeController()
ThemeController - Manages light/dark theme switching
This class handles theme detection, switching, and persistence using CSS custom properties and data attributes. It respects system preferences and remembers user choices.
- Since:
- 1.0.0
Methods
getCurrentTheme() → {string}
Get current active theme
Returns:
Current theme
- Type
- string
getSavedTheme() → {string|null}
Get saved theme from localStorage
Returns:
Saved theme or null if not found
- Type
- string | null
getSystemTheme() → {string}
Get system theme preference
Returns:
System theme preference
- Type
- string
handleSystemThemeChange(event)
Handle system theme changes
Parameters:
| Name | Type | Description |
|---|---|---|
event |
MediaQueryListEvent | Media query change event |
init()
Initialize the theme controller
initializeTheme()
Initialize theme based on user preference or system setting
log(…args)
Debug logging utility
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
args |
any |
<repeatable> |
Arguments to log |
resetToSystemTheme()
Reset theme to system preference
saveTheme(theme)
Save theme preference to localStorage
Parameters:
| Name | Type | Description |
|---|---|---|
theme |
string | Theme to save |
setTheme(theme)
Set the active theme
Parameters:
| Name | Type | Description |
|---|---|---|
theme |
string | Theme to set (light or dark) |
setupSystemThemeListener()
Set up system theme change listener
setupThemeToggle()
Set up theme toggle button event listeners
toggleTheme()
Toggle between light and dark themes
updateThemeToggleButton(theme)
Update theme toggle button appearance
Parameters:
| Name | Type | Description |
|---|---|---|
theme |
string | Current theme |