Skip to main content

White-Labeling & Theming

Quick reference for customizing your app's appearance, colors, and branding.

tip

To dig deeper, check the Mantine theme Documentation and the Tailwind theme Documentation

How do I change the primary color?​

Update the brand color:

// src/theme/whitelabel.config.ts
export const whiteLabelConfig = {
  // Change your primary brand color
  primaryColor: '#fa520f',
  
  // Component styling
  defaultRadius: 'md',
  
  // Typography
  fontFamily: 'Inter, system-ui, sans-serif',
  headingsFontFamily: 'Inter, system-ui, sans-serif',
  
  // Layout colors
  appShellBgColor: '#f8fafc',
  sidebarBgColor: '#ffffff',
  
  // Branding
  logoUrl: '/logo.svg',
  appName: 'My App',
}

The system automatically generates a full color palette:

/* Generated CSS variables (available globally) */
--primary-color-50: #eff6ff;   /* Lightest */
--primary-color-100: #dbeafe;
--primary-color-200: #bfdbfe;
--primary-color-300: #93c5fd;
--primary-color-400: #60a5fa;
--primary-color-500: #3b82f6;  /* Your primary color */
--primary-color-600: #2563eb;
--primary-color-700: #1d4ed8;
--primary-color-800: #1e40af;
--primary-color-900: #1e3a8a;  /* Darkest */
--primary-color-950: #172554;
--primary-color-contrast: #ffffff;

How do I use theme colors in components?​

Using colors with Mantine components:

// components/MyComponent.tsx
import { Button, Card, Badge, Group } from '@mantine/core'

export function ThemedComponent() {
  return (
    <Card className="p-4">
      <Group className="justify-between mb-4">
        <h3 className="text-lg font-semibold">Themed Component</h3>
        <Badge color="primary">New</Badge>
      </Group>
      
      {/* Primary button uses your theme color */}
      <Button color="primary" variant="filled">
        Primary Action
      </Button>
      
      <Button color="primary" variant="outline" className="ml-2">
        Secondary Action
      </Button>
      
      <Button color="primary" variant="subtle" className="ml-2">
        Subtle Action
      </Button>
    </Card>
  )
}

Using colors with Tailwind classes:

export function TailwindThemedComponent() {
  return (
    <div className="bg-primary-50 border border-primary-200 rounded-lg p-4">
      <div className="bg-primary-500 text-white px-4 py-2 rounded mb-4">
        Primary Background
      </div>
      
      <button className="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded transition-colors">
        Primary Button
      </button>
      
      <div className="mt-4 text-primary-700 border-l-4 border-primary-400 pl-4">
        <p>This text uses primary color variants</p>
        <p className="text-primary-500">Lighter primary text</p>
        <p className="text-primary-800">Darker primary text</p>
      </div>
    </div>
  )
}

Load custom fonts:

<!-- In public/index.html -->
<head>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
</head>
/* Or in src/index.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500&display=swap');

Apply typography in components:

export function TypographyExample() {
  return (
    <div className="space-y-4">
      <h1 className="text-3xl font-bold">Main Heading (Poppins)</h1>
      <h2 className="text-2xl font-semibold">Section Heading</h2>
      <h3 className="text-xl font-medium">Subsection</h3>
      
      <p className="text-base">
        This is body text using Roboto. It's designed for readability
        and works well for longer content sections.
      </p>
      
      <p className="text-sm text-gray-600">
        This is smaller text, often used for captions or secondary information.
      </p>
      
      <code className="bg-gray-100 px-2 py-1 rounded text-sm font-mono">
        Code uses monospace font
      </code>
    </div>
  )
}

How do I customize component radius?​

Change the roundedness of components:

// src/theme/whitelabel.config.ts
export const whiteLabelConfig = {
  primaryColor: '#3b82f6',
  
  // Component border radius
  defaultRadius: 'lg', // xs, sm, md, lg, xl, [number_in_px]
  // defaultRadius: '0',    // No rounding (square)
  // defaultRadius: '999',  // Maximum rounding (pills)
}

The radius affects all Mantine components:

export function RadiusExample() {
  return (
    <div className="space-y-4">
      {/* These inherit the theme radius */}
      <Button>Button with theme radius</Button>
      <Card><p className="p-4">Card with theme radius</p></Card>
      <Input placeholder="Input with theme radius" />
      <Badge>Badge with theme radius</Badge>
      
      {/* Override radius for specific components */}
      <Button radius="xl">Extra rounded button</Button>
      <Card radius={0}><p className="p-4">Square card</p></Card>
    </div>
  )
}