Loyalty
Docs

Search...

⌘K

Theming

Customize the look and feel of Loyalty UI components to match your brand. The theming system supports colors, typography, spacing, and component-level overrides.

Theme Configuration

Define your theme in the loyalty.config.ts file under the theme key:

typescript

import { defineConfig } from "@loyalty/sdk";

export default defineConfig({
  theme: {
    colors: {
      primary: "#10b981",
      secondary: "#6366f1",
      accent: "#f59e0b",
      background: "#ffffff",
      surface: "#f9fafb",
      text: "#111827",
      textMuted: "#6b7280",
    },
    fonts: {
      heading: "'Inter', sans-serif",
      body: "'Inter', sans-serif",
      mono: "'Fira Code', monospace",
    },
    borderRadius: {
      sm: "4px",
      md: "8px",
      lg: "12px",
      full: "9999px",
    },
  },
  // ... other config
});

Dark Mode

Loyalty UI components support dark mode out of the box. You can provide dark mode color overrides:

typescript

{
  theme: {
    colors: {
      primary: "#10b981",
      background: "#ffffff",
      text: "#111827",
    },
    darkMode: {
      background: "#0a0a0a",
      surface: "#111111",
      text: "#f9fafb",
      textMuted: "#9ca3af",
    },
  }
}

System preference

By default, Loyalty respects the user's system color scheme preference. You can override this by setting the initial mode explicitly.

Component Overrides

Override styles for specific Loyalty UI components using the components key:

typescript

{
  theme: {
    components: {
      PointsBadge: {
        borderRadius: "full",
        fontWeight: "bold",
        fontSize: "sm",
      },
      RewardCard: {
        borderRadius: "lg",
        shadow: "md",
        hoverShadow: "lg",
      },
      TierProgress: {
        height: "8px",
        borderRadius: "full",
        animate: true,
      },
    },
  }
}

CSS Variables

All theme values are exposed as CSS custom properties for use in your own styles:

css

:root {
  --loyalty-color-primary: #10b981;
  --loyalty-color-secondary: #6366f1;
  --loyalty-color-accent: #f59e0b;
  --loyalty-font-heading: 'Inter', sans-serif;
  --loyalty-font-body: 'Inter', sans-serif;
  --loyalty-radius-md: 8px;
}

Using Variables in Custom CSS

Reference these variables anywhere in your stylesheet to ensure consistency with your Loyalty theme:

css

.my-custom-component {
  color: var(--loyalty-color-primary);
  font-family: var(--loyalty-font-body);
  border-radius: var(--loyalty-radius-md);
}