Theme mode toggle

A three-way segmented control for light, system and dark mode. system is a first-class choice, so people who follow the OS never have to guess which state currently matches.

Default

Reads and writes through useTheme, so it must sit under a FlabThemeProvider. The control below drives the real mode for this page.

<ThemeModeToggle />

Setup

Wrap the app in FlabThemeProvider, and run themeInitScript() in the document head so the resolved mode is applied before first paint (no flash).

import { FlabThemeProvider, ThemeModeToggle } from '@flabbergasted-ai/react';import { themeInitScript } from '@flabbergasted-ai/react/theme-script';
// In the document <head>:<script dangerouslySetInnerHTML={{ __html: themeInitScript() }} />
// Around the app:<FlabThemeProvider>  <ThemeModeToggle /></FlabThemeProvider>

Props

Prop	Type	Default	Notes
`aria-label`	`string`	`'Theme mode'`	Accessible label for the radiogroup.
`className`	`string`	—	Merged onto the pill container for layout overrides.