Theming

Every gel surface derives from a single accent variable. Change one line, retint the whole kit.

The @aqua/theme item overrides the shadcn CSS variables with the Mac OS X palette: Aqua blue #2f7de0 as primary, the soft gray paper background, and the Lucida Grande font stack. Components you already have keep working; they just put on the suit.

installnpx shadcn@latest add @aqua/theme

Accent color

Buttons, tabs, checkboxes, switches, sliders and progress bars all mix their gradients from --aqua-accent with color-mix(). Try it live:

Custom

checked

One accent variable, every gel surface.

The color applies to the whole site and sticks around; it's saved in your browser. In your own app it's one line:

:root {
  --aqua-accent: #2f7de0;
}

It also works scoped: set the variable on any element and everything inside picks it up.

Signature surfaces

The era look leans on a few recurring textures, all done in plain CSS gradients inside the components themselves: the gel highlight (a white-to-transparent cap on buttons and tabs), pinstripes (a 4px repeating gradient) and the dotted desktop background.