Theming · Ivorie

Ivorie colors are CSS variables set in theme.css. Change a variable and every component follows.

Tokens

The :root block holds the light values. The .dark block holds the dark values for the same names, except --radius. The values are the shadcn/ui neutral base color.

Name	Light value	Use
`--radius`	`0.625rem`	Base corner radius.
`--background`	`oklch(1 0 0)`	Page background.
`--foreground`	`oklch(0.145 0 0)`	Default text.
`--card`	`oklch(1 0 0)`	Card background.
`--card-foreground`	`oklch(0.145 0 0)`	Text on cards.
`--popover`	`oklch(1 0 0)`	Popover, menu and dialog background.
`--popover-foreground`	`oklch(0.145 0 0)`	Text on popovers.
`--primary`	`oklch(0.205 0 0)`	Primary buttons and accents.
`--primary-foreground`	`oklch(0.985 0 0)`	Text on primary.
`--secondary`	`oklch(0.97 0 0)`	Secondary surfaces.
`--secondary-foreground`	`oklch(0.205 0 0)`	Text on secondary.
`--muted`	`oklch(0.97 0 0)`	Muted surfaces.
`--muted-foreground`	`oklch(0.556 0 0)`	Muted and placeholder text.
`--accent`	`oklch(0.97 0 0)`	Hover and active surfaces.
`--accent-foreground`	`oklch(0.205 0 0)`	Text on accent.
`--destructive`	`oklch(0.577 0.245 27.325)`	Errors and destructive actions.
`--border`	`oklch(0.922 0 0)`	Borders and dividers.
`--input`	`oklch(0.922 0 0)`	Input borders.
`--ring`	`oklch(0.708 0 0)`	Focus ring.
`--chart-1`	`oklch(0.87 0 0)`	Chart color 1.
`--chart-2`	`oklch(0.556 0 0)`	Chart color 2.
`--chart-3`	`oklch(0.439 0 0)`	Chart color 3.
`--chart-4`	`oklch(0.371 0 0)`	Chart color 4.
`--chart-5`	`oklch(0.269 0 0)`	Chart color 5.
`--sidebar`	`oklch(0.985 0 0)`	Sidebar background.
`--sidebar-foreground`	`oklch(0.145 0 0)`	Sidebar text.
`--sidebar-primary`	`oklch(0.205 0 0)`	Sidebar primary accent.
`--sidebar-primary-foreground`	`oklch(0.985 0 0)`	Text on sidebar primary.
`--sidebar-accent`	`oklch(0.97 0 0)`	Sidebar hover surface.
`--sidebar-accent-foreground`	`oklch(0.205 0 0)`	Text on sidebar accent.
`--sidebar-border`	`oklch(0.922 0 0)`	Sidebar borders.
`--sidebar-ring`	`oklch(0.708 0 0)`	Sidebar focus ring.

Dark mode

Add the class dark to <html>.

<html class="dark">

Style class

A style class on <body> selects the component look: spacing, radius, borders and shadows. Ivorie ships the eight shadcn/ui styles, copied rule for rule, and three of its own:

Style	Class	Look
Vega	`style-vega`	Clean, neutral and familiar.
Nova	`style-nova`	Reduced padding and margins.
Maia	`style-maia`	Rounded, with generous spacing.
Luma	`style-luma`	Fluid, luminous and soft.
Rhea	`style-rhea`	Like Luma, but compact.
Lyra	`style-lyra`	Boxy and sharp. For mono fonts.
Mira	`style-mira`	Made for compact interfaces.
Sera	`style-sera`	Editorial and typographic.
Glass	`style-glass`	Thick panes of neutral glass. Edges drawn with light: a rim on top, a hairline, a shadow below. The faint light under the glass follows `--primary`. Solid when the browser has no backdrop blur or the user asks for less transparency.
Bento	`style-bento`	Tonal tiles on a toned page, no outlines, big type.
Mono	`style-mono`	Flat, with hairlines and a block caret. Font and radius follow the preset like every style; it is made for a mono font (the playground picks Geist Mono).

Import the file for each style you use, then set its class:

@import "@inlaylab/ivorie/styles/style-nova.css";

<body class="style-nova">

Try each style, with your colors and radius, in the playground.

Override a token

Declare your values after the imports. Use :root for light and .dark for dark.

@import "@inlaylab/ivorie/styles/theme.css";
@import "@inlaylab/ivorie/styles/style-nova.css";

:root {
  --primary: oklch(0.55 0.2 260);
  --primary-foreground: oklch(0.98 0 0);
}

.dark {
  --primary: oklch(0.75 0.15 260);
  --primary-foreground: oklch(0.2 0.04 260);
}

Radius

Set --radius once. Other radii derive from it in theme.css.

Token	Value
`--radius-sm`	`calc(var(--radius) * 0.6)`
`--radius-md`	`calc(var(--radius) * 0.8)`
`--radius-lg`	`var(--radius)`
`--radius-xl`	`calc(var(--radius) * 1.4)`
`--radius-2xl`	`calc(var(--radius) * 1.8)`
`--radius-3xl`	`calc(var(--radius) * 2.2)`
`--radius-4xl`	`calc(var(--radius) * 2.6)`

:root {
  --radius: 0.5rem;
}

Accent and chart colors

The base colors are near-gray, so charts are gray too. An accent adds color: it sets --primary, --secondary, --sidebar-primary and the chart colors --chart-1 to --chart-5 over the base color. The 17 accents are shadcn/ui's: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose.

Chart color picks where --chart-1…5 come from: the accent (default), the base color's grays, or another accent.
Menu accent bold paints menu and list highlights (--accent) in the primary color. subtle keeps the base color's.

npx ivorie init --theme blue --chart-color emerald --menu-accent bold

Presets

Base color, accent, chart color, menu accent, font, heading font and radius are preset choices. Pick them in the playground, then run npx ivorie init --preset ivp1_… in a new app or npx ivorie apply ivp1_… in an existing one.

Radius	`--radius`
`default`	`0.625rem` (theme value)
`none`	`0`
`small`	`0.45rem`
`medium`	`0.625rem`
`large`	`0.875rem`

A font sets --font-sans. A heading font sets --font-heading, used by card, dialog, sheet, drawer and empty titles (.cn-font-heading). With no heading font, titles use --font-sans. Fonts come from @fontsource-variable packages.