Theming Guide

Customize the visual appearance of your platform using CSS variables, the brand pattern system, category gradients, and dynamic theme classes.

CSS Variables

The platform uses Tailwind CSS v4 with CSS custom properties for theming. Override these variables in your tenant's stylesheet to customize colors.

css
@theme inline {
  /* Core colors */
  --color-background: #ffffff;
  --color-foreground: #0a0a0a;

  /* Brand accent */
  --color-primary: #10b981;       /* Emerald green */
  --color-primary-foreground: #ffffff;

  /* Secondary accent */
  --color-secondary: #6366f1;     /* Indigo */
  --color-accent: #f59e0b;        /* Amber */

  /* Surface colors */
  --color-card: #ffffff;
  --color-muted: #f5f5f5;
  --color-muted-foreground: #737373;

  /* Border */
  --color-border: #e5e5e5;
}

Dynamic Theme Classes

Each tenant gets a dynamic theme class applied to the root element based on its domainId. This allows tenant-specific CSS overrides without code changes.

css
/* Base theme (Islamic / default) */
.brand-pattern {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(16, 185, 129, 0.03) 10px,
    rgba(16, 185, 129, 0.03) 20px
  );
}

/* Christian tenant theme */
.theme-christian .brand-pattern {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(99, 102, 241, 0.03) 10px,
    rgba(99, 102, 241, 0.03) 20px
  );
}

/* Add more tenant themes as needed */
.theme-jewish .brand-pattern {
  background-image: /* custom pattern */;
}

The theme class is applied automatically in the root layout:

typescript
// apps/web/app/layout.tsx
const themeClass = siteConfig.domainId !== 'islamic'
  ? `theme-${siteConfig.domainId}`
  : '';

<body className={themeClass}>...</body>

Brand Pattern

The brand-pattern CSS class adds a subtle decorative background pattern to sections. It's used throughout the app for hero sections, cards, and feature highlights.

html
<!-- Apply the brand pattern to any element -->
<section class="brand-pattern">
  <h1>Welcome to the Platform</h1>
</section>

<!-- Pattern adapts automatically based on theme class -->
<div class="brand-pattern bg-card rounded-lg p-8">
  Content with branded background
</div>

Category Gradients

Each creator category defines its own gradient for profile banners and avatars. These are specified in the SiteConfig categories array.

typescript
categories: [
  {
    id: "scholar",
    label: "Scholar",
    gradient: "from-blue-600 to-blue-800",      // Profile banner
    avatarGradient: "from-blue-400 to-blue-600", // Avatar fallback
    colorClasses: "bg-blue-100 text-blue-700",   // Badge/pill
    pillColors: {
      bg: "bg-blue-50",
      text: "text-blue-700",
      border: "border-blue-200",
    },
  },
]
Scholar
Educator
Community Leader

Customizing Colors

To customize your tenant's color palette, create a theme override in your CSS. The simplest approach is to override CSS variables for your theme class.

css
/* Example: Custom "cooking" tenant theme */
.theme-cooking {
  --color-primary: #ef4444;       /* Red accent for food */
  --color-secondary: #f97316;     /* Orange */
  --color-accent: #fbbf24;        /* Yellow */
}

.theme-cooking .brand-pattern {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(239, 68, 68, 0.03) 10px,
    rgba(239, 68, 68, 0.03) 20px
  );
}