Custom CSS & Advanced Branding

This guide provides everything you need to know about personalizing the platform. From selecting pre-built themes to creating your own custom CSS, you can make the dashboard feel like a native part of your ecosystem.

Pro Tip

Start with a Pre-built Theme for instant results, then use Custom CSS for fine-tuning specific elements.

---

Finding the Branding Suite

Navigate to the branding settings:

1. Open your Dashboard
2. Click Settings (gear icon) in the sidebar
3. Click the Whitelabel tab
4. Scroll to the Advanced Styling section

---

Level 1: Pre-built Themes (Recommended)

The easiest way to transform your dashboard is to select a pre-built theme. Each theme includes a carefully designed color palette that ensures readability and visual harmony.

Available Themes

The easiest way to transform your dashboard is to select a pre-built theme. Below are the available themes. You can copy the CSS for each theme to use as a starting point for your own custom designs.

Arctic Frost (Light blue, crisp and clean)

/* Arctic Frost Theme */
:root {
  --p: 199 89% 48%;
  --pf: 199 89% 43%;
  --pc: 0 0% 100%;
  --b1: 200 100% 99%;
  --b2: 200 100% 97%;
  --b3: 200 100% 95%;
  --bc: 215 25% 15%;
}

Midnight Hustle (Neon Purple, Dark Mode)

/* Midnight Hustle Theme */
:root {
  --p: 271 91% 65%;
  --pf: 271 91% 60%;
  --pc: 0 0% 100%;
  --b1: 222 47% 11%;
  --b2: 222 47% 8%;
  --b3: 222 47% 5%;
  --bc: 210 40% 98%;
}

Golden State (Luxury Gold, Premium)

/* Golden State Theme */
:root {
  --p: 45 93% 47%;
  --pf: 45 93% 42%;
  --pc: 0 0% 100%;
  --b1: 0 0% 100%;
  --b2: 210 20% 98%;
  --b3: 210 15% 95%;
  --bc: 222 47% 11%;
}

Toxic Protocol (Matrix Green, Terminal)

/* Toxic Protocol Theme */
:root {
  --p: 142 71% 45%;
  --pf: 142 71% 40%;
  --pc: 0 0% 100%;
  --b1: 0 0% 0%;
  --b2: 142 71% 5%;
  --b3: 142 71% 10%;
  --bc: 142 71% 95%;
}

Cherry Blossom (Soft Pink, Beauty)

/* Cherry Blossom Theme */
:root {
  --p: 330 81% 81%;
  --pf: 330 81% 76%;
  --pc: 330 81% 20%;
  --b1: 355 100% 99%;
  --b2: 355 100% 97%;
  --b3: 355 100% 95%;
  --bc: 330 81% 25%;
}

Obsidian Stealth (Matte Black, Minimal)

/* Obsidian Stealth Theme */
:root {
  --p: 0 0% 32%;
  --pf: 0 0% 27%;
  --pc: 0 0% 100%;
  --b1: 0 0% 4%;
  --b2: 0 0% 2%;
  --b3: 0 0% 0%;
  --bc: 0 0% 100%;
}

Miami Vice (Synthwave, Retro 80s)

/* Miami Vice Theme */
:root {
  --p: 292 84% 61%;
  --pf: 292 84% 56%;
  --pc: 0 0% 100%;
  --b1: 258 73% 23%;
  --b2: 258 73% 18%;
  --b3: 258 73% 13%;
  --bc: 187 82% 85%;
}

Royal Blood (Crimson & Gold, Royal)

/* Royal Blood Theme */
:root {
  --p: 0 72% 51%;
  --pf: 0 72% 46%;
  --pc: 0 0% 100%;
  --b1: 0 0% 6%;
  --b2: 0 0% 4%;
  --b3: 0 0% 2%;
  --bc: 45 93% 47%;
}

Deep Forest (Nature Green, Organic)

/* Deep Forest Theme */
:root {
  --p: 142 72% 29%;
  --pf: 142 72% 24%;
  --pc: 0 0% 100%;
  --b1: 168 86% 9%;
  --b2: 168 86% 6%;
  --b3: 168 86% 3%;
  --bc: 84 81% 50%;
}

Electric Lemon (Bold Yellow, Industrial)

/* Electric Lemon Theme */
:root {
  --p: 48 96% 53%;
  --pf: 48 96% 48%;
  --pc: 0 0% 10%;
  --b1: 0 0% 9%;
  --b2: 0 0% 7%;
  --b3: 0 0% 5%;
  --bc: 0 0% 100%;
}

How to Apply a Theme

1. Go to Settings → Whitelabel → Advanced Styling
2. Click on a theme card to preview it
3. The preview applies instantly to your dashboard
4. Click Save Changes to persist the theme

Live Preview

Theme changes preview instantly without saving. If you navigate away without saving, your changes will be lost.

---

Level 2: Custom CSS

For complete control, use the Custom CSS field to override any visual element.

The Design Token System

The platform uses CSS variables (Design Tokens) that control the entire UI. Changing these tokens applies your styling consistently across all components.

Essential CSS Variables

:root {
  /* Primary brand color (HSL format without commas) */
  --p: 262 80% 50%;           /* Primary color */
  --pf: 262 80% 45%;          /* Primary focus/hover */
  --pc: 0 0% 100%;            /* Primary content (text on primary) */

  /* Background colors */
  --b1: 0 0% 100%;            /* Main background */
  --b2: 210 20% 98%;          /* Cards, sidebar background */
  --b3: 210 15% 95%;          /* Elevated surfaces */
  --bc: 215 25% 15%;          /* Base content (main text) */

  /* Border radius */
  --rounded-box: 1rem;        /* Cards, modals */
  --rounded-btn: 0.5rem;      /* Buttons */
}

Color Format

Important: Use HSL values without commas for proper Tailwind integration:

/* ✓ Correct */
--p: 262 80% 50%;

/* ✗ Incorrect */
--p: 262, 80%, 50%;
--p: hsl(262, 80%, 50%);

---

Creating Your Own Theme

Follow this template to create a complete custom theme:

Step 1: Define Your Color Palette

Start with your brand's primary color and build a cohesive palette:

:root {
  /* ========================================
     YOUR BRAND THEME
     ======================================== */

  /* Primary Color - Your main brand color */
  --p: 220 90% 50%;           /* Bright blue */
  --pf: 220 90% 45%;          /* Darker for hover states */
  --pc: 0 0% 100%;            /* White text on primary */

  /* Secondary Color - Complementary accent */
  --s: 180 70% 45%;           /* Teal accent */
  --sf: 180 70% 40%;
  --sc: 0 0% 100%;

  /* Accent Color - For highlights */
  --a: 45 100% 50%;           /* Gold/yellow accent */
  --af: 45 100% 45%;
  --ac: 0 0% 10%;

  /* Neutral/Base Colors */
  --n: 220 15% 20%;           /* Dark neutral */
  --nf: 220 15% 15%;
  --nc: 0 0% 100%;

  /* Background Hierarchy */
  --b1: 220 20% 98%;          /* Main page background */
  --b2: 220 15% 95%;          /* Cards, sidebar */
  --b3: 220 10% 90%;          /* Elevated elements */
  --bc: 220 20% 15%;          /* Main text color */
}

Step 2: Style Key Components

Add component-specific styling for a polished look:

/* Sidebar */
.sidebar-component {
  background-color: hsl(var(--b2)) !important;
  border-right: 1px solid hsl(var(--b3)) !important;
}

/* Cards */
.card, [class*="rounded-lg"][class*="border"] {
  background-color: hsl(var(--b1)) !important;
  border-color: hsl(var(--b3)) !important;
}

/* Buttons */
.btn-primary, button[class*="bg-primary"] {
  background-color: hsl(var(--p)) !important;
  color: hsl(var(--pc)) !important;
}

.btn-primary:hover, button[class*="bg-primary"]:hover {
  background-color: hsl(var(--pf)) !important;
}

Step 3: Ensure Text Readability

Always test contrast ratios. For dark themes, explicitly set text colors:

/* For dark themes - ensure text is readable */
body, .text-gray-900, .text-gray-800, .text-gray-700 {
  color: hsl(var(--bc)) !important;
}

/* Muted text */
.text-gray-500, .text-gray-600 {
  color: hsl(var(--bc) / 0.7) !important;
}

---

Complete Theme Example

Here's a full example of a custom "Ocean Blue" theme:

:root {
  /* Ocean Blue Theme */
  
  /* Primary - Deep Ocean Blue */
  --p: 200 80% 45%;
  --pf: 200 80% 40%;
  --pc: 0 0% 100%;
  
  /* Secondary - Coral Accent */
  --s: 15 80% 55%;
  --sf: 15 80% 50%;
  --sc: 0 0% 100%;
  
  /* Accent - Sandy Gold */
  --a: 40 90% 55%;
  --af: 40 90% 50%;
  --ac: 0 0% 15%;
  
  /* Backgrounds - Light and airy */
  --b1: 200 30% 99%;
  --b2: 200 25% 96%;
  --b3: 200 20% 92%;
  --bc: 200 30% 15%;
  
  /* Neutral */
  --n: 200 20% 25%;
  --nf: 200 20% 20%;
  --nc: 0 0% 100%;
  
  /* Rounded corners */
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
}

/* Component overrides */
.sidebar-component {
  background: linear-gradient(180deg, hsl(200 80% 45%), hsl(200 80% 35%)) !important;
}

.sidebar-component span,
.sidebar-component p,
.sidebar-component a {
  color: white !important;
}

/* Primary buttons with gradient */
.btn-primary, button[class*="bg-primary"] {
  background: linear-gradient(135deg, hsl(200 80% 50%), hsl(200 80% 40%)) !important;
  box-shadow: 0 4px 14px hsl(200 80% 45% / 0.3) !important;
}

---

Common Customizations

Change the Sidebar Color

.sidebar-component {
  background-color: #1e293b !important; /* Dark Navy */
  border-right: 1px solid #334155 !important;
}

.sidebar-component span, 
.sidebar-component p {
  color: #ffffff !important;
}

Use a Custom Google Font

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-family: 'Inter', sans-serif;
}

body {
  font-family: var(--font-family);
}

Style Form Inputs

input, textarea, select {
  background-color: hsl(var(--b1)) !important;
  border-color: hsl(var(--b3)) !important;
  color: hsl(var(--bc)) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: hsl(var(--p)) !important;
  box-shadow: 0 0 0 3px hsl(var(--p) / 0.1) !important;
}

Style Dialogs and Modals

[role="dialog"] {
  background-color: hsl(var(--b1)) !important;
  border: 1px solid hsl(var(--b3)) !important;
}

Style the Login & Register Pages

The login and register pages have a special hero section (the left side with your brand message) that uses the .auth-hero class. This allows you to customize it independently from the rest of the theme.

Important for Light Themes

If your theme has light primary colors (pink, light blue, gold), you should darken the hero gradient to ensure white text remains readable.

For light themes (lighter primary colors):

/* Darken the hero gradient for better contrast */
.auth-hero {
  background-image: linear-gradient(
    to bottom right, 
    hsl(var(--p)), 
    hsl(var(--pf)), 
    hsl(var(--p) / 0.9)
  ) !important;
}

/* Force white text in the hero section */
.auth-hero p,
.auth-hero span,
.auth-hero h1,
.auth-hero h2,
.auth-hero h3,
.auth-hero div {
  color: #ffffff !important;
}

/* Keep checkmarks green */
.auth-hero .text-success {
  color: #22c55e !important;
}

For dark themes (already have good contrast):

/* Just ensure text is white */
.auth-hero p,
.auth-hero span,
.auth-hero div {
  color: #ffffff !important;
}

Complete light theme example (Cherry Blossom style):

/* Custom hero gradient - use darker shades of your primary */
.auth-hero {
  background-image: linear-gradient(
    to bottom right, 
    #be185d,  /* pink-700 */
    #9d174d,  /* pink-800 */
    #831843   /* pink-900 */
  ) !important;
}

.auth-hero p,
.auth-hero span,
.auth-hero h1,
.auth-hero h2,
.auth-hero h3,
.auth-hero div,
.auth-hero .text-white,
.auth-hero .text-base {
  color: #ffffff !important;
}

.auth-hero .text-success {
  color: #22c55e !important;
}

---

Tips for Success

1. Use HSL without commas - Required for Tailwind's opacity utilities to work
2. Test on mobile - Always check responsiveness after CSS changes
3. Check contrast - Ensure text is readable on all backgrounds
4. Use !important sparingly - Only when overriding existing styles
5. Start with a theme - Modify a pre-built theme rather than starting from scratch

---

Safety Net

If your CSS breaks the layout:

1. Go to Settings → Whitelabel → Advanced Styling
2. Delete all text in the Custom CSS field
3. Select "No Theme" to clear the theme selection
4. Click Save Changes

This restores the default appearance.

---

Need Help?

• Check our Community Forum for examples
• Contact support with a screenshot of what you're trying to achieve
• Share your Custom CSS and we'll help debug issues