ColorModeSwitch
A switch that changes between light and dark mode.
Usage
<SColorModeSwitch />
<SColorModeSwitch label="Dark mode" description="Choose your preferred appearance." />
The switch is checked in dark mode and unchecked in light mode. It follows
the resolved appearance when the preference is system; changing it sets
an explicit light or dark preference through useColorMode(). Preferences
are persisted by the color-mode module that Selaras installs automatically.
The switch is disabled on pages with a forced color mode.
During server rendering and its first client render, the switch is unchecked
and disabled. After mounting, it reflects the saved or system appearance.
This keeps hydration consistent on synchronous and async pages without
requiring a ClientOnly wrapper.
It uses the same theme and ui slots as Switch,
with sun and moon icons in the thumb. Use ColorModeToggle
for a button instead.
Props
| Prop | Type | Default |
|---|---|---|
id | string | — |
label | string | — |
description | string | — |
size | 'sm' | 'md' | 'lg' | 'md' |
color | ColorRole | 'primary' |
disabled | boolean | false |
checkedIcon | string | Registered dark-mode icon |
uncheckedIcon | string | Registered light-mode icon |
ui | Switch slot overrides | — |
Without a label, the switch has a localized accessible name. Set aria-label
to customize it. Set either icon prop to an empty string to hide that icon.
Slots
| Slot | Description |
|---|---|
default | Replaces the label. |
description | Replaces the description when description is provided. |