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.

View as Markdown

<px-theme>· loading

Playground

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

Loading <px-theme>

Props

controls-pageremounts

<PxTheme controlsPage />

Installation

pnpm dlx shadcn@latest add @lumesec/px-theme

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-theme.json

Usage

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

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

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

controls-pageReact propcontrolsPageTypebooleanDefaultfalse

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.

changeReact proponChangeDetail{ dark: boolean }

Fires on every toggle with the new state.

Methods

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

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.

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.

<px-hourglass>

Rate-limit hourglasspx-hourglass

<px-materialize>

Materializing streampx-materialize

<px-secret>

Secret fieldpx-secret

<px-focus>

Focus timerpx-focus

Was this page helpful?

Related