Theming

popcn/ui comes with multiple theme presets. Each theme defines aurora gradient colors that flow through all components.

Theme Presets

Badge

Glass

Card Title

This card uses the cosmic theme preset with aurora border effects.

CSS Variables

Themes are defined using CSS custom properties. Add a theme class to switch colors.

/* Apply theme class to container */
<div className="theme-sunset">
  <Button variant="aurora">Sunset Button</Button>
</div>

/* Or use data attribute */
<div data-theme="neon">
  <Card variant="aurora">Neon Card</Card>
</div>

Cosmic (Default)

Indigo, Purple, and Sky blues create a cosmic aurora effect.

:root {
  --ap-primary: 99 102 241;      /* Indigo */
  --ap-secondary: 168 85 247;    /* Purple */
  --ap-aurora-1: 99 102 241;     /* Indigo */
  --ap-aurora-2: 139 92 246;     /* Violet */
  --ap-aurora-3: 56 189 248;     /* Sky */
}

Sunset

Pink, Orange, and Yellow for a warm sunset gradient.

.theme-sunset {
  --ap-primary: 236 72 153;      /* Pink */
  --ap-secondary: 251 146 60;    /* Orange */
  --ap-aurora-1: 236 72 153;     /* Pink */
  --ap-aurora-2: 251 146 60;     /* Orange */
  --ap-aurora-3: 250 204 21;     /* Yellow */
}

Neon

Cyan, Magenta, and Lime for a vibrant neon effect.

.theme-neon {
  --ap-primary: 6 182 212;       /* Cyan */
  --ap-secondary: 217 70 239;    /* Magenta */
  --ap-aurora-1: 6 182 212;      /* Cyan */
  --ap-aurora-2: 217 70 239;     /* Magenta */
  --ap-aurora-3: 163 230 53;     /* Lime */
}

Mono

Grayscale tones for a clean, minimal look.

.theme-mono {
  --ap-primary: 161 161 170;      /* Zinc */
  --ap-secondary: 113 113 122;    /* Gray */
  --ap-aurora-1: 161 161 170;     /* Zinc */
  --ap-aurora-2: 113 113 122;     /* Gray */
  --ap-aurora-3: 82 82 91;        /* Dark Gray */
}

Creating Custom Themes

Create your own theme by defining the aurora color variables.

/* Custom Ocean theme */
.theme-ocean {
  --ap-primary: 20 184 166;      /* Teal */
  --ap-secondary: 59 130 246;    /* Blue */
  --ap-aurora-1: 20 184 166;     /* Teal */
  --ap-aurora-2: 34 211 238;     /* Cyan */
  --ap-aurora-3: 59 130 246;     /* Blue */
  --ap-ring: 20 184 166;
}