Skip to content
All 6 kits from $99 · Everything Bundle $149

Theme Switch

InputMIT
View in Storybook

Segmented dark / light / system theme switcher with smooth icon transitions.

bun add @otfdashkit/ui

Preview

Theme Switch
Loading Storybook preview…

Code

import { ThemeSwitch, Body, Caption } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="space-y-3">
      <Caption>Segmented (default)</Caption>
      <ThemeSwitch />
      <Body size="sm" tone="muted">
        Toggles the <code>dark</code> class on <code>&lt;html&gt;</code>.
        Selection persists in localStorage under <code>otf-color-scheme</code>.
      </Body>
    </div>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the ThemeSwitch source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
classNamestring
defaultMode'light' | 'dark' | 'system'Controlled initial mode. Falls back to localStorage + system.
onChange(mode: Mode) => void
variant'segmented' | 'button''segmented'Render as a three-way segmented control (default) or a single cycling button.