Light/Dark/Auto theme toggle with localStorage persistence.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

theme

• Type: Theme - Default: 'auto'
• Initial theme

persistKey

• Type: string - Default: 'cc_theme'
• localStorage key for persistence

labels

• Type: ThemeSwitcherLabels
• Custom labels for theme options

radius

• Type: number - Default: 8
• Border radius in pixels

density

• Type: 'comfortable' | 'compact' - Default: 'comfortable'
• Layout density

animate

• Type: boolean - Default: true
• Enable animations

onChange

• Type: (theme: Theme, resolved: ResolvedTheme) => void
• Callback when theme changes

className

• Type: string
• Additional CSS class

a11yLabel

• Type: string
• Accessibility label

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--cc-transition: var(--cc-motion-normal, 250ms); /* Cc Transition */--cc-easing: var(--cc-motion-ease-out, cubic-bezier(0, 0, 0.2, 1)); /* Cc Easing */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-theme-switcher
• .cc-theme-switcher__button
• .cc-theme-switcher__icon
• .cc-theme-switcher__label