Adjust Colors

Every colour in the interface comes from an environment variable, so an instance can be made to match a company's palette without touching a source file or rebuilding anything. Change the variable, restart, done.

The variables

Each colour has a light and a dark value. The dark one takes the same name with _DARK appended, and it is used when the visitor's system asks for a dark theme.

Variable	Light	Dark
`NUXT_PUBLIC_COLOR_PRIMARY`	`#0066CC`	`#0F72DE`
`NUXT_PUBLIC_COLOR_PRIMARY_HOVER`	`#004C99`	`#1C84EC`
`NUXT_PUBLIC_COLOR_WHITE`	`#ffffff`	`#ffffff`
`NUXT_PUBLIC_COLOR_GRAY`	`#4E4E52`	`#AEAEB2`
`NUXT_PUBLIC_COLOR_SLATE`	`#F5F5F7`	`#2C2C2E`
`NUXT_PUBLIC_COLOR_BLACK`	`#000000`	`#000000`
`NUXT_PUBLIC_COLOR_DARK`	`#1C1C1E`	`#1C1C1E`

PRIMARY is the one that matters. It carries every button, link, active state, completed card and unread dot in the app — and the favicon, which is generated at runtime in your colour rather than shipped as a fixed file.

# Custom colours
NUXT_PUBLIC_COLOR_PRIMARY="#7C3AED"
NUXT_PUBLIC_COLOR_PRIMARY_DARK="#9F6BF5"
NUXT_PUBLIC_COLOR_PRIMARY_HOVER="#6D28D9"
NUXT_PUBLIC_COLOR_PRIMARY_HOVER_DARK="#B18AF8"

Pick a colour that can be read

The interface puts white text on PRIMARY — buttons, the filled status circle, badges. A colour that looks good in a brand guide is not always one you can read white on: aim for a contrast ratio of at least 4.5:1 against white, which in practice means a mid-to-dark tone rather than a bright yellow or a pale mint.

The dark variant exists for the same reason in reverse. Dark mode puts the same colour on a near-black surface, where a dark blue disappears — which is why the default lifts from #0066CC to #0F72DE. If you change one, change both.

How it works

The values are read at runtime, not at build time, so the same image serves any instance. They become CSS custom properties on the document, which is what the whole interface is drawn from — that is also why nothing needs recompiling and why an unset variable simply falls back to the default above.

A note on the removed colour

NUXT_PUBLIC_COLOR_SECONDARY no longer exists. There used to be a second, green accent for "done" states; it made the interface louder without making anything clearer, so it was removed. Everything it used to colour — completed cards, ticked checkboxes, live indicators, unread dots — now uses the primary colour. Setting it has no effect.