Skip to content
Aback UI

Foundations

Theming

Components never use a raw colour. They read semantic roles from CSS variables, so the whole interface follows light, dark, and your overrides from one file.

How it works

The theme is one stylesheet. aback-ui init writes it to styles/aback.css; the npm package ships the same file as @aback-ui/tokens/tokens.css. It holds three things:

  1. An @theme inline block that turns each variable into Tailwind utilities, so --card becomes bg-card.
  2. A :root block with the light values.
  3. A .dark block with the dark values, used when <html> has the dark class. See Dark mode.
styles/aback.csscss
@theme inline {
  --color-background: var(--background);
  --color-card: var(--card);
  --color-link: var(--link);
  /* one line per role */
}

:root {
  --background: #ffffff;
  --card: #ffffff;
  --link: #005d95;
}

.dark {
  --background: #0a0a0a;
  --card: #171717;
  --link: #33b7ff;
}

Colour roles

Build with the role, not the hex. The swatches below use the live variables; switch the theme in the header to see both sets.

Surfaces

  • bg-background--backgroundThe page canvas.
  • bg-card--cardCards, panels, and popovers.
  • bg-muted--mutedQuiet fills: table headers, code, hover rows.

Text

  • text-foreground--foregroundBody text and headings.
  • text-muted-foreground--muted-foregroundSecondary text. The lowest readable tier.
  • text-link--linkText links and selected navigation.

Actions

  • bg-primary--primaryThe default button. Neutral ink, not blue.
  • bg-brand-fill--brand-fillBrand buttons and step markers.
  • bg-destructive--destructiveDelete and other irreversible actions.

Lines and focus

  • border-border--borderCards, dividers, and table rules.
  • border-input--inputText fields, selects, and checkboxes.
  • ring-focus-ring--focus-ringThe keyboard focus indicator.

Status colours, the full Aback Blue ramp, and every hex value are on the Design tokens page.

Customize the theme

Override variables after the theme import. Every component that reads the role changes with it.

app/globals.csscss
@import "tailwindcss";
@import "../styles/aback.css";

/* Your brand, replacing Aback Blue */
:root {
  --brand-fill: #6d28d9;
  --on-brand-fill: #ffffff;
  --link: #5b21b6;
  --focus-ring: #7c3aed;
}

.dark {
  --brand-fill: #c4b5fd;
  --on-brand-fill: #1e1b4b;
  --link: #c4b5fd;
  --focus-ring: #a78bfa;
}

Check contrast after every override

Body text and links need 4.5:1 against their background, and the focus ring needs 3:1 against what surrounds it. Change light and dark together, then check every status surface.

With the CLI, you can also edit styles/aback.css directly: it is your file. Overriding in your own stylesheet keeps the change obvious when you compare against a newer theme with aback-ui diff theme.

Rules that keep it working

  • Use roles in componentsWrite bg-card and text-link, never a hex value or bg-blue-600.
  • Keep primary neutralThe default button is ink. Brand blue is for brand actions, links, and selection.
  • No opacity on textFaded text fails contrast. Use text-muted-foreground instead.
  • Square cornersEvery radius is zero. Do not add rounded corners or gradient buttons.