ColorModeToggle

Switch between light, dark, and optional system color modes. Built on SegmentedControl. Inside DesignSystemProvider it reads context; otherwise pass both colorMode and onColorModeChange.

Examples

Default

Icon-only segments for light and dark. Controlled demos pass colorMode / onColorModeChange.

import { ColorModeToggle } from '@var-ui/react';

<ColorModeToggle colorMode={mode} onColorModeChange={setMode} />

Appearance

Set appearance to labels or iconsAndLabels, and includeSystem to add a System segment.

import { ColorModeToggle, VStack } from '@var-ui/react';
import { useState } from 'react';
import type { ColorMode } from '@var-ui/react';

const [mode, setMode] = useState<ColorMode>('light');

<VStack gap="lg">
  <ColorModeToggle
    appearance="labels"
    includeSystem
    colorMode={mode}
    onColorModeChange={setMode}
  />
  <ColorModeToggle
    appearance="iconsAndLabels"
    includeSystem
    colorMode={mode}
    onColorModeChange={setMode}
  />
</VStack>

Props

Accessibility

Defaults to aria-label="Color mode" on the group. Icon-only appearance adds per-segment aria-labels (“Light”, “Dark”, “System”). Prefer labels or iconsAndLabels when the control is not accompanied by nearby explanatory text.