Theming

Every visual value lives in macos.css as a CSS variable. Change a variable and every component follows.

Accent color

Like macOS, the theme has one accent color. Pick one here to see it everywhere on this site, or try the theme editor.

Accent color

To change it in your project, point --mac-accent at another system color:

app/globals.css

:root {
  --mac-accent: var(--mac-purple);
}

"use client"

import { Switch } from "@/components/ui/switch"

export default function SwitchSizes() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <Switch size="mini" defaultChecked aria-label="Mini" />
      <Switch size="sm" defaultChecked aria-label="Small" />
      <Switch defaultChecked aria-label="Medium" />
      <Switch size="lg" defaultChecked aria-label="Large" />
      <Switch disabled aria-label="Disabled" />
    </div>
  )
}

Tokens

The most used variables, with their light and dark values. Design Sources lists where each one comes from.

Accent and selection

Variable	Light	Dark	Used for
`--mac-accent`	var(--mac-blue)	var(--mac-blue)	Default buttons, switches, checkboxes, focus rings.
`--mac-selection`	#0064e1	#0059d1	Selected rows in a focused list.
`--mac-selection-unfocused`	rgb(0 0 0 / 0.14)	rgb(255 255 255 / 0.18)	Selected rows in an unfocused list.
`--mac-menu-highlight`	#0069f9	#0069f9	The highlighted menu item.
`--mac-link`	#0068da	#419cff	Links.

Labels

Variable	Light	Dark	Used for
`--mac-label`	rgb(0 0 0 / 0.85)	rgb(255 255 255 / 0.85)	Primary text.
`--mac-label-secondary`	rgb(0 0 0 / 0.5)	rgb(255 255 255 / 0.55)	Subtitles, values, placeholders.
`--mac-label-tertiary`	rgb(0 0 0 / 0.26)	rgb(255 255 255 / 0.25)	Disabled text, section headers.
`--mac-label-quaternary`	rgb(0 0 0 / 0.1)	rgb(255 255 255 / 0.1)	Watermarks.

Fills and surfaces

Variable	Light	Dark	Used for
`--mac-fill-primary`	rgb(0 0 0 / 0.1)	rgb(255 255 255 / 0.1)	Checkboxes, radio buttons, switch tracks.
`--mac-control`	rgb(0 0 0 / 0.08)	rgb(255 255 255 / 0.08)	Bordered buttons, pop-ups, tabss.
`--mac-window`	#ffffff	#1e1f20	Window background.
`--mac-content`	#ffffff	#1e2023	Lists and tables.
`--mac-group`	rgb(0 0 0 / 0.03)	rgb(255 255 255 / 0.03)	Grouped form boxes.
`--mac-glass`	rgb(255 255 255 / 0.82)	#323435	Liquid Glass toolbar capsules.

Shape

Variable	Light	Dark	Used for
`--mac-radius-control`	6px	6px	Medium buttons, fields, pop-ups.
`--mac-radius-menu`	12px	12px	Menus.
`--mac-radius-group`	12px	12px	Grouped form boxes.
`--mac-radius-popover`	20px	20px	Popovers.
`--mac-radius-alert`	34px	34px	Alerts.
`--mac-radius-window`	16px	16px	Windows and dialogs.

shadcn tokens

The theme also sets shadcn’s own tokens, so components from the regular shadcn/ui registry pick up macOS colors and radii:

--radius: var(--mac-radius-control);
--background: var(--mac-window);
--foreground: var(--mac-label);
--primary: var(--mac-accent);
--secondary: var(--mac-control);
--muted-foreground: var(--mac-label-secondary);
--border: var(--mac-border);
--ring: var(--mac-accent);

When a window loses focus, macOS greys out its accent color. A <Window inactive> does the same by overriding the variables inside it, so switches, selections and checkboxes in the background window turn grey automatically.

Override variables on any element to theme just that part of the page, e.g. <div style={{ "--mac-accent": "var(--mac-green)" }}>.