Skip to content
Beautiful UI

ActionsLumen Halo

Color ModeFreev1.0.0

Light, Dark and System in one small control with a lit thumb that slides to the choice, or one round button that cycles. It applies the .dark class and remembers the choice, with System following the OS live, or drives your own theme code.

Built on shadcn/ui

.md
Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-color-mode.json
Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-color-mode.json

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.

Set up the Beautiful UI registry

Free pieces install from their URL with no setup (that URL gives the Base UI build; Radix projects use /r/radix-nova/<name>.json, or add the registries below and the CLI picks your build). Pro pieces need the registries below and BEAUTIFUL_UI_TOKEN in .env.local.

components.json
{
  "registries": {
    "@beautiful-ui": "https://beautiful-ui.dev/r/{style}/{name}.json",
    "@beautiful-ui-pro": {
      "url": "https://beautiful-ui.dev/r/pro/{style}/{name}.json",
      "headers": { "Authorization": "Bearer ${BEAUTIFUL_UI_TOKEN}" }
    }
  }
}

MCP server

claude mcp add --transport http beautiful-ui https://beautiful-ui.dev/api/mcp
Catalog for agents: /llms.txt
Words

Usage

Import it and pass your content. The props that matter most are listed next.

Example
import { ColorMode } from "@/components/ui/lumen/controls/color-mode";

<ColorMode />

// With next-themes
const { theme, setTheme } = useTheme();
<ColorMode apply={false} value={theme as "light" | "dark" | "system"} onValueChange={setTheme} />

Props

  • look"segmented"

    "segmented" | "toggle"

    Three choices side by side, or one button that cycles.

  • showLabelsfalse

    boolean

    Words beside the icons (segmented).

  • value / defaultValue / onValueChange"system"

    "light" | "dark" | "system"

    Controlled or not.

  • applytrue

    boolean

    Set .dark on <html> and remember the choice. false: only report it (use with next-themes' setTheme).

  • storageKey"theme"

    string

    Where the choice is remembered.

  • labels–

    Partial<Record<choice, string>>

    The words, for other languages.

Source

components/ui/lumen/controls/color-mode.tsx

87 more Pro pieces in Lumen HaloEvery story chart, block and screen in the same language. Previews are live for everyone; the code comes with Pro.See the plans

More in Actions