How to re-brand a Next.js SaaS kit from one file

Open src/config/theme.ts, change accent to your brand colour, and save. In AURORA that one value re-colours the marketing site and the dashboard: buttons, links, focus rings, soft fills, glows, the first chart line and the hero light. This guide shows what to change, why it works, and the two things to check before you ship.

AURORA is our AI SaaS kit on Pulse. We built it so that a buyer's first job, making it look like their product, takes minutes instead of a day of hunting through components.

Before you start

You need the kit running locally (npm ci, then npm run dev; the Documentation folder in the download walks through it). Have your brand colour as a hex value, and a second colour from the same family for the gradient.

Step 1: change the theme file

This is the whole file a buyer edits (shortened here; the real file explains every value in a comment at the top).

// src/config/theme.ts
export const theme = {
  accent: "#7458F7",     // your brand colour
  accentTo: "#56CCF2",   // the gradient fades from accent into this
  onAccent: "#FFFFFF",   // text on a solid accent button
  radius: 12,            // corner roundness in px (0 = sharp, 20 = soft)
  fonts: { display: "geist", body: "inter" },
  defaultMode: "dark",   // or "light"; visitors can still switch
  showThemeDial: true,   // the "Try your colour" swatches in the hero
};

Save, and the dev server reloads with the new colour everywhere. There is no second place to change it.

Step 2: check the text on your buttons

onAccent is the colour of text on a solid accent button. It has to stay readable. The rule we follow is the WCAG one: at least 4.5 to 1 contrast for normal text.

Here are AURORA's own presets, with the ratio each one gets:

Light, bright accents like green and amber fail with white text (about 2 : 1), so they get near-black text instead. If your brand colour is light, do the same. Any contrast checker will give you the number; aim for 4.5 or more.

Step 3: remove the colour dial before you launch

showThemeDial: true shows six swatches in the hero so people trying the demo can see the kit in other colours. Your customers don't need it. Set it to false and the swatches and their small script are gone.

Why one value is enough

The trick is that nothing else in the kit names a colour. Everything is derived from the accent in one stylesheet:

/* src/app/globals.css (shortened) */
:root {
  --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 45%, transparent);
  --accent-glow: color-mix(in oklab, var(--accent) 50%, transparent);
  --aurora: linear-gradient(100deg, var(--accent),
    color-mix(in oklab, var(--accent), var(--accent-to)) 55%, var(--accent-to));
}

color-mix() blends two colours in the browser. Mixing in oklab keeps the blends looking even, so a 14% tint of rose looks as light as a 14% tint of blue. Components only ever use --accent-soft, --accent-line and the rest, never a hex value.

The root layout writes your theme.ts values into :root once, on the server, so the first paint is already in your colour. No flash of violet before your brand loads.

How the live colour change animates

The demo's dial changes the colour smoothly over 0.6 seconds. Normally a CSS variable can't animate: the browser doesn't know it is a colour, so it jumps. Registering it tells the browser its type:

@property --accent { syntax: "<color>"; inherits: true; initial-value: #7458f7; }
:root.dial-anim { transition: --accent 0.6s ease, --accent-to 0.6s ease; }

The dial adds the dial-anim class, sets the new values, and removes the class 0.7 seconds later. If the visitor has reduced motion turned on, it skips the class and the colour changes at once.

You can use the same three lines in any project that keeps its brand colour in a CSS variable.

Dark mode, for free

Colours that differ between light and dark are written once with light-dark():

--accent-text: light-dark(
  color-mix(in oklab, var(--accent) 78%, #000),
  color-mix(in oklab, var(--accent) 58%, #fff)
);

Accent-coloured text is darkened on light backgrounds and lightened on dark ones, from the same accent. You never pick a separate "dark mode brand colour", and the two modes can't drift apart.

What it doesn't do

It doesn't change your product name, logo, fonts beyond Geist and Inter, or images. Those are separate steps in the README: the name lives in src/content/site.ts, the logo files in public/assets/, and other fonts load through next/font/local. It also can't make a colour accessible for you; Step 2 is still your job.

If you want to see it before you buy, the dial is live on the AURORA demo. Pick a swatch and watch the dashboard follow.