Components

Blocks

  1. Theme Mode Select
    1. Default
    2. Props

Theme Mode Select

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

Default
Select a theme mode 
---
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>

Props

Prop
id
id

The id attribute for the root element and used to wire up the internal popover and radio button IDs. Defaults to a generated UUID.

Type string
Default undefined
Required No
popoverProps
popoverProps

Props forwarded to the internal Popover component, such as placement or onOpen/onClose callbacks.

Type PopoverProps
Default undefined
Required No
buttonProps
buttonProps

Props forwarded to the trigger Button component, such as size or emphasis to customise the toggle button appearance.

Type ButtonProps
Default undefined
Required No
...rest
...rest

Standard HTML div attributes passed to the root element.

Type HTMLAttributes<HTMLDivElement>
Default -
Required No
  1. Theme Mode Select
    1. Default
    2. Props