Kern 0.12.0 GitHub
Navigation

<kern-theme-toggle>

Icon button switching between dark (default) and light; remembers the choice (localStorage kern-theme). The icon shows the current theme (moon = dark). Set the theme before first paint with initTheme() or the inline snippet from the README.

Examples

Dark and light theme

The button switches between dark (default) and light and remembers the choice in localStorage (kern-theme). small makes it 28px for the topbar. Its accessible label describes the action (label-light, label-dark).

<div style="display:flex;gap:12px;align-items:center"> <kern-theme-toggle></kern-theme-toggle> <kern-theme-toggle small></kern-theme-toggle> </div>

Properties

labelDarkattribute label-dark · default Switch to dark theme · de Zu dunklem Design wechseln
string | undefined

Accessible label while light.

labelLightattribute label-light · default Switch to light theme · de Zu hellem Design wechseln
string | undefined

Accessible label while dark.

smalldefault false
boolean

28px instead of 34px.