Theming

Colours, corners, shadows and sizes are CSS variables in one file, css/base/variables.css. Change a variable and every component that uses it follows.

How theming works

All variables are set on :root in css/base/variables.css. You can edit that file directly, but it's better to keep your changes in a file of your own, so a template update doesn't overwrite them:

1. Create css/custom.css and set only the variables you want to change.
2. Link it on every page, right after css/style.css, so its values win.

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/custom.css">

:root {
  --primary: #4F46E5;
  --radius-xl: 10px;
}

The rest of this page lists the variables by group.

Brand colour

The template's brand colour is teal. It colours primary buttons, links, active menu items, focus rings, checked inputs and charts.

Changing the brand colour

Set all six together, so hover states, tints and text stay in tune. An indigo theme, for example:

:root {
  --primary:       #4F46E5;
  --primary-hover: #4338CA;
  --primary-soft:  rgba(79, 70, 229, .10);
  --primary-bg:    #EEF2FF;
  --primary-text:  #4338CA;
  --shadow-teal:   0 6px 16px -4px rgba(79, 70, 229, .45);
}

Places with a fixed teal

A few gradients, tints and chart colours are written as fixed values instead of variables, so they keep the teal after you change --primary. To match your colour everywhere, search the template for #00B4D8, #0077B6 and rgba(0, 180, 216 (also written rgba(0,180,216) and replace them:

Sidebar colours

The sidebar has its own dark palette:

The current page's link gets a teal tint from the brand colour (see fixed teal). A charcoal sidebar instead of navy, for example:

:root {
  --sidebar-bg:        #111827;
  --sidebar-bg-hover:  #1F2937;
  --sidebar-bg-active: #374151;
  --sidebar-text:      #9CA3AF;
}

Status colours

Alerts, toasts, badges, some buttons and modal icons share one set of status colours. Each colour has four values: the base, a darker shade for solid fills, a soft background and a text colour for that background.

Using a status colour

A component takes the primary colour by default. Add a colour class to switch it — the same class works on every component in the set:

<span class="badge-soft">New</span>              <!-- primary -->
<span class="badge-soft success">Paid</span>
<span class="badge-soft danger">Overdue</span>
<div class="alert-soft warning">…</div>

The classes are .success, .danger, .warning, .info, .violet, .light, .muted and .dark. Task statuses have their own: .st-assigned (violet), .st-progress (primary), .st-review (warning) and .st-completed (success).

How it works: css/base/palette.css turns each colour class into a few short variables — --c (base), --c-solid, --c-on, --c-bg, --c-text and --c-line — and the components only read those.

Adding a colour

Add the values to your custom.css and one rule that maps them, like the existing ones in palette.css:

:root {
  --pink: #EC4899;  --pink-hover: #DB2777;
  --pink-bg: #FCE7F3; --pink-text: #BE185D;
}
.pink { --c: var(--pink); --c-solid: var(--pink-hover); --c-bg: var(--pink-bg); --c-text: var(--pink-text); }

Now <span class="badge-soft pink"> works, and so does every other component in the set.

Text, surfaces and borders

--text-dark is for titles, --text-body for normal text and --text-muted for hints and labels. --bg-body is the page background, --bg-card the background of cards and menus, and --neutral-soft the light grey of read-only fields, chart tracks and small hover backgrounds.

Corners

Six radius variables set how round the corners are. The template is fairly square by default:

:root {
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
}

Shadows

For a completely flat look, set --shadow-card: none;.

Fonts

The template uses Inter from Google Fonts, at 14px for body text. Two places set it:

• the Google Fonts <link> in each page's <head>, which loads the font;
• css/base/base.css, which applies it: * { font-family: 'Inter', system-ui, -apple-system, sans-serif; }.

To use another font, change both — load it in the <head> and override the rule in your custom.css:

<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">

* { font-family: 'Manrope', system-ui, -apple-system, sans-serif; }