opinion
ThemeToggle
A visitor-facing theme switch; the Theme button at the top right of this site is this component.
Theme switchStyle, light or dark, and bionic reading in one popover
Light Mode
In context
SettingsOne row in a preferences card
PreferencesTideline, for Maya Chen
Dark mode
Light Mode
Appearance
Props
| Prop | Type | Required | Default |
|---|---|---|---|
label | string | undefined | No | Theme |
size | "sm" | "md" | "lg" | undefined | No | sm |
sections | ThemeToggleSection[] | undefined | No | ["style", "mode", "bionic"] |
styles | ThemeStyle[] | undefined | No | [] |
hideLabel | boolean | undefined | No | false |
className | string | undefined | No | — |
Sections
sections ("style", "mode", "bionic"; default all three) picks the controls. Naming exactly one drops the popover and renders that control directly; naming two keeps the popover with just those two.
data-rebar-* attributes
data-rebar-variant="mode-only"|"style-only"|"bionic-only" on the root when sections names one control. It reads and writes data-rebar-theme, data-theme and data-rebar-bionic on the document root, the same attributes RebarDevTools uses.
Migrating to Ant Design
Not codemod-covered. AntD has no theme-switch component; its theming runs through ConfigProvider tokens.