# Day / night switch
> Day/night switch whose sun pixels rebuild as a crescent moon while night sweeps the sky; it can set the page theme.
- Element: `<px-theme>`
- React: `import { PxTheme } from "@/components/lumesec/px-theme"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-theme.json
- Page: https://elements.lumesec.ai/components/pixel-lab/theme



Live preview: https://elements.lumesec.ai/view/px-theme

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-theme.js"></script>

<px-theme controls-page></px-theme>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/px-theme
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-theme.json
```

## Usage

React:

```tsx
import { PxTheme } from "@/components/lumesec/px-theme";

export function Example() {
  return (
    <PxTheme controlsPage />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-theme.js"></script>

<px-theme controls-page></px-theme>
```

## Behaviour

The sun’s pixels fly apart and rebuild as a crescent moon while night sweeps across the sky and stars come out. In this demo it switches the theme of the whole page.

## API reference

### Attributes

| Attribute       | React prop     | Type      | Default | Description                                                                                                                                                              |
| --------------- | -------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `controls-page` | `controlsPage` | `boolean` | `false` | Presence attribute. When set, each toggle writes `data-theme="dark"` or `"light"` on the `<html>` element, and a hint under the switch says so. Checked on every toggle. |

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail              | Description                               |
| -------- | ---------- | ------------------- | ----------------------------------------- |
| `change` | `onChange` | `{ dark: boolean }` | Fires on every toggle with the new state. |

### Methods

Call them on the element, for example through a React ref.

| Method     | Description                                        |
| ---------- | -------------------------------------------------- |
| `toggle()` | Switches between day and night and fires `change`. |

## Accessibility

* The control is a native button with `role="switch"`, `aria-label="Dark mode"` and `aria-checked` for the night state.
* The "Light" / "Dark" label below is an `aria-live="polite"` region.
* Reduced motion: the switch changes state at once without the pixel morph, the clouds stop drifting and the stars stop twinkling.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-muted`.

## Notes

* The initial state comes from `data-theme` on `<html>` (`dark` or `light`), falling back to `prefers-color-scheme`. Later page theme changes do not move the switch.
* The sky, sun and moon use fixed colours rather than theme tokens. The switch is a fixed 156 by 72px.