defineConfig({
// ThemeSelect is rendered automatically in the header.
// No additional configuration needed — dark, light, and auto
// themes are available out of the box.
})Overview
The ThemeSelect component renders a dropdown that lets users switch between dark, light, and auto (system preference) themes. It appears in the header and mobile menu footer.
Try it now — look for the theme toggle in the top-right corner of the header.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
darkLabel | string | "Dark" | Label for the dark theme option |
lightLabel | string | "Light" | Label for the light theme option |
autoLabel | string | "Auto" | Label for the auto/system option |
accessibleLabel | string | "Select theme" | Screen reader label for the dropdown |
themeChanged | (theme: string) => void | — | Callback fired when the user changes the theme |
How It Works
- ThemeProvider renders a hidden
<template>with SVG icons for sun, moon, and laptop - ThemeSelect renders a
Selectdropdown with the three options - On theme change, a callback updates the
<html>element'sdata-themeattribute - CSS custom properties respond to the
data-themevalue to swap colors
Theme Values
| Value | Description |
|---|---|
light | Forces light color scheme |
dark | Forces dark color scheme |
auto | Follows the user's OS/browser preference via prefers-color-scheme |
Related Components
- ThemeProvider — Renders the template icons used by ThemeSelect
- Select — The underlying dropdown component that ThemeSelect wraps
- MobileMenuFooter — Contains a ThemeSelect for mobile users
CSS Custom Properties
The theme system uses CSS layers and custom properties defined in design-tokens/props.css. Key properties that change with theme:
--sl-color-bg— Page background--sl-color-text— Primary text color--sl-color-text-accent— Accent/link color--sl-color-bg-sidebar— Sidebar background--sl-color-bg-nav— Header background