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.