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.
---
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>| prop | type | default | req | description |
|---|---|---|---|---|
| id | string | undefined | The id attribute for the root element and used to wire up the internal popover and radio button IDs. Defaults to a generated UUID. | |
| popoverProps | PopoverProps | undefined | Props forwarded to the internal Popover component, such as placement or onOpen/onClose callbacks. | |
| buttonProps | ButtonProps | undefined | Props forwarded to the trigger Button component, such as size or emphasis to customise the toggle button appearance. | |
| ...rest | HTMLAttributes<HTMLDivElement> | - | Standard HTML div attributes passed to the root element. |