shadcn.io is an independent project built on shadcn/ui
A palette button opens Light, Dark, and System under Theme, each with its own icon. The demo starts on System and only stores the value.
Use it when the theme is a single choice in a navbar. Picking a row does not change the page. A choice that should stay visible can be a Select. In Solid, Ark UI does not toggle the document theme.
Installation
Anatomy
Usage
<DropdownMenu>
<DropdownMenuTrigger asChild={props => <Button {...props()} aria-label="Theme" size="icon-md" variant="outline">
<PaletteIcon aria-hidden="true" />
</Button>} />
<DropdownMenuContent class="w-48">
<DropdownMenuRadioGroup onValueChange={handleThemeChange} value={theme()}>
<DropdownMenuLabel>Theme</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioItem value="light">
<SunIcon aria-hidden="true" />
Light
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="dark">
<MoonIcon aria-hidden="true" />
Dark
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="system">
<MonitorIcon aria-hidden="true" />
System
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>FAQ
How is the theme choice stored?
As one value, system to start: light, dark or system. Picking a row stores it and moves the check.
DropdownMenuRadioGroup takes value, and onValueChange receives details.value.
Which icon is on each row?
A sun for Light, a moon for Dark and a monitor for System, aria-hidden before the label.
What does the trigger look like?
An outline Button with size="icon-md", a palette icon and aria-label set to Theme. The menu is w-48.
Does picking a row change the document theme?
No. The demo only stores the value. Apply it yourself: toggle the dark class on the root element, and for System follow the prefers-color-scheme media query.
API Reference
Dropdown Menu
Sets asChild, props, onValueChange={handleThemeChange}, value={theme()}, value="light" and value="dark". The rest is on the Dropdown Menu page.
Button
Sets props, aria-label="Theme", size="icon-md" and variant="outline". The rest is on the Button page.
