Description
The ThemeSelect component provides a dropdown select for users to choose between Light, Dark, and System Default themes. It extends the ShadowComponent class and uses the theme utility internally for state management, persistence, and synchronization.
If child content is provided, it renders as a label above the select. If no children are provided, no label is rendered.
Note: You can manage theme state without this component by directly importing the theme utility.
Basic Usage
Use the ThemeSelect component without any children to render just the select dropdown.
<k-theme-select></k-theme-select>With Label
Provide child content to render a label above the select.
<k-theme-select>Theme</k-theme-select>JavaScript Reference
Constructor
Extends ShadowComponent
new ThemeSelect()
Requirements
- ShadowComponent
- theme utility
Properties
currentTheme: string
Gets or sets the current theme. Possible values are "auto", "light", or "dark". This property is reactive and will trigger a re-render when changed. Syncs to current-theme attribute.
Slots
default
The default slot renders as a label above the select. If no content is provided, no label is rendered.
Static Methods
Note: These static methods are convenience wrappers around the theme utility. For direct theme management without the component, use the theme utility directly.
static setTheme(theme): void
Sets the specified theme. Internally calls the theme utility which handles persistence and DOM updates.
- theme
string- The theme to set. Must be one of:"auto","light", or"dark"
ThemeSelect.setTheme('dark');static getCurrentTheme(): string
Gets the current theme. Returns "auto" if no theme is set. Internally calls the theme utility.
const currentTheme = ThemeSelect.getCurrentTheme();
console.log(currentTheme);static getCalculatedCurrentTheme(): string
Returns the effective theme, always "dark" or "light". If the current theme is "auto", this method uses the user's system preference (prefers-color-scheme media query) to determine the theme. Internally calls the theme utility.
const effectiveTheme = ThemeSelect.getCalculatedCurrentTheme();
console.log(effectiveTheme);Related
See the theme utility documentation for programmatic theme management without using this component.
See the ThemeSwitcher component for a button-based toggle alternative.