Theme Toggle

Displays an icon button used to toggle between the light and dark theme.

asChild

boolean

color

grayredpurplegreen

fullyDisabled

boolean

By default, the `disabled` prop will use the `aria-disabled` attribute to ensure that content remains focusable and accessible even when in a disabled state. If you are sure you want to disable the button and take measures to ensure its accessibility, you can set this prop to `true` to use the `disabled` attribute instead.

loading

boolean

size

123

theme

string

Deprecated

state

deprecated
disablednormalloading

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Dashboard

1 variant found

ThemeToggle in Header Theme Toggledashboardstatic
<ThemeToggle theme={theme} onThemeChange={(newTheme) => { setTheme(newTheme); trackThemeChanged({ theme: newTheme }); void analytics.identify({ theme: newTheme === 'system' ? resolvedTheme : newTheme, }); }} />

Context

PropTypeDefaultRequired
asChild
booleanno
color
"gray" | "red" | "purple" | "green"no
fullyDisabled
booleanno
loading
booleanno
size
"1" | "2" | "3"no
statedeprecated
"disabled" | "normal" | "loading"no
theme
stringno

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

stateType: "disabled" | "normal" | "loading"

Usage

Used 1 times across 1 package

Dashboard
1

Where it's used

1 file

packages/dashboard/src/components/page/header-theme-toggle.tsx1