Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Theme Selector Dropdown Menu for Vue

A theme picker behind a palette button, offering Light, Dark and System, with one of them checked.

UI library: Ark 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 Vue, Ark UI does not toggle the document theme.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Dropdown Menu anatomy: trigger, label, item, shortcut, separator, sub trigger, content

Usage

<DropdownMenu>
  <DropdownMenuTrigger :asChild="true">
    <Button aria-label="Theme" size="icon-md" variant="outline">
      <PaletteIcon aria-hidden="true" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-48">
    <DropdownMenuRadioGroup @value-change="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 @value-change 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.

Can I change the theme from the keyboard?

Yes. Open the menu with Enter, Space or Arrow Down, move with the arrow keys or type the first letter, and press Enter to pick. Escape closes the menu.

Is Theme a choice?

No. It's the DropdownMenuLabel that names the group, followed by a separator, and it can't be focused.

API Reference

Dropdown Menu

Sets asChild, value-change="handleThemeChange", value="theme", value="light", value="dark" and value="system". The rest is on the Dropdown Menu page.

Button

Sets aria-label="Theme", size="icon-md" and variant="outline". The rest is on the Button page.

All 30 dropdown menu examples