Theming

Every color, radius, and font in Veloria UI is a CSS custom property. Override them in your global CSS to match your brand.

How it works

Veloria UI defines all design tokens as CSS custom properties on the :root element. The Tailwind plugin maps these to Tailwind classes. To customise the theme, override the variables in your global CSS file — after importing the Veloria UI stylesheet.

/* app/globals.css — after @import "veloria-ui/styles" */
 
:root {
  /* Change the primary brand color */
  --primary: 142 70% 45%;          /* green */
  --primary-foreground: 0 0% 100%;
 
  /* Rounder corners */
  --radius: 0.75rem;
}
 
.dark {
  /* Darker primary for dark mode */
  --primary: 142 60% 55%;
}

Colors use the H S% L% format (HSL without the hsl() wrapper). This lets Tailwind compose opacity variants like bg-primary/20.

All tokens

Token	Description
--background	Page background
--foreground	Default text
--primary	Brand / primary action color
--primary-foreground	Text on primary background
--secondary	Secondary surface
--muted	Muted / subtle surface
--muted-foreground	Muted text
--accent	Hover/focus highlight
--destructive	Error / danger color
--success	Success color
--warning	Warning color
--border	Default border color
--input	Form input border
--ring	Focus ring color
--radius	Base border radius

Custom fonts

Override the font variables to use your own typefaces:

json

/* app/globals.css */
:root {
  --font-sans: "Your Sans Font", system-ui, sans-serif;
  --font-mono: "Your Mono Font", monospace;
}

Installation Dark Mode