Theming

Per component#

Pass a palette name or any hex value.

<Button color="lime">Approve</Button>
<Badge color="#ff6a00">Beta</Badge>

Per section#

Components that are not given a color inherit --neon-accent from the nearest parent that sets it. neonVars sets it for you.

import { neonVars } from "@/lib/neon"

<section style={neonVars("violet")}>
  <Tabs>…</Tabs>      {/* violet */}
  <Switch />          {/* violet */}
  <Button color="red">Delete</Button> {/* still red */}
</section>

App-wide#

Set the accent once in your global CSS. The value is three space-separated RGB channels, which lets components apply their own alpha.

:root {
  --neon-accent: 255 95 162; /* pink */
}

Palette#

Eleven tuned colors. Each one keeps 4.5:1 contrast with dark text when used as a solid fill.

Changing the palette#

The palette lives in lib/neon.ts. Rename, add or retune entries and the color prop picks them up, types included.

export const neonColors = {
  brand: "0 255 170", // your color, as r g b
  cyan: "34 211 238",
  // …
} as const