block

Theme Mode Select

A pre-built block for switching between light, dark, and system theme modes. Renders a button that opens a Menu whose radio group holds the three options — System, Dark, and Light — and persists the selection to localStorage. The button icon updates automatically to reflect the active mode.

Because it’s a menu radio group, the options come with roving focus, typeahead, a keyboard-only focus ring, and a check mark on the active mode for free — and picking one doesn’t dismiss the panel, so modes can be previewed in place.

Default

AstroReactSvelteVueTODO

PreviewCode

---
import ThemeModeSelect from "../theme-mode-select.astro";
import { flex } from "@pindoba/styled-system/patterns";
---

<div
  class={flex({
    justify: "center",
  })}
>
  <ThemeModeSelect id="demo-theme-mode-select" />
</div>

<script lang="ts">
  import ThemeModeSelect from "../theme-mode-select.svelte";
  import { flex } from "@pindoba/styled-system/patterns";
</script>

<div
  class={flex({
    justify: "center",
  })}
>
  <ThemeModeSelect />
</div>

props · 6 shown · 6 total

svelte react astro

required only

all Advanced Behavior

buttonProps deprecated

Record<string, unknown>

Props forwarded to the trigger `<Button>`.

string

Root element id. Also seeds the menu, trigger, and option ids. Defaults to a generated value.

menuProps

Record<string, unknown>

Props forwarded to the internal `<Menu>` (e.g. `size`). `passThrough` is owned by the block — use this component's own `passThrough.trigger` / `passThrough.menuPanel` instead of nesting one here.

passThrough

ThemeModeSelectPassThrough

Per-slot escape hatch. `root` accepts `style` (merged into the slot class) and `props`; `trigger` and `menuPanel` forward onto the Menu's own `passThrough.trigger` / `passThrough.popoverPanel`.

placement

"top""right""bottom""left""top-start""top-end""right-start""right-end""bottom-start""bottom-end""left-start""left-end"

default "bottom-end"

Placement of the menu panel relative to its trigger.

triggerProps

Record<string, unknown>

Props forwarded to the trigger `<Button>` (e.g. `size`, `emphasis`).

#Default

Default