Theming

Customizing Colors

Tessera UI uses CSS variables for theming. You can customize colors by modifying the CSS variables in your global CSS file.

Color Tokens

All color tokens use HSL format:

:root {
  --background: 0 0% 100%;        /* Page background */
  --foreground: 0 0% 3.9%;        /* Main text color */
  --primary: 0 0% 9%;             /* Primary brand color */
  --primary-foreground: 0 0% 98%; /* Text on primary */
  --secondary: 0 0% 96.1%;        /* Secondary color */
  --destructive: 0 84.2% 60.2%;   /* Error/danger color */
  --border: 0 0% 89.8%;           /* Border color */
  --radius: 0.5rem;               /* Border radius */
}

Example: Blue Theme

:root {
  --primary: 221 83% 53%;          /* Blue */
  --primary-foreground: 210 40% 98%;
}

Example: Green Theme

:root {
  --primary: 142 71% 45%;          /* Green */
  --primary-foreground: 144 61% 98%;
}

Dark Mode

Tessera UI includes dark mode support. Override the .dark class variables:

.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
}

Enabling Dark Mode

Use a theme provider like next-themes:

import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Border Radius

Customize the global border radius:

:root {
  --radius: 0rem;     /* Square corners */
  --radius: 0.5rem;   /* Default (8px) */
  --radius: 1rem;     /* More rounded (16px) */
}

Per-Component Customization

You can also customize individual components using Tailwind classes:

<Button className="rounded-full bg-purple-600">
  Custom Button
</Button>

Theming

On this page