BrandCn

Customizing Themes

Learn how to modify BrandCn themes to match your brand identity.

Understanding CSS Variables

BrandCn themes use CSS custom properties (variables) for all colors, spacing, and typography. This makes it easy to customize any aspect of the theme.

:root {
  /* Colors */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  
  /* Border radius */
  --radius: 0.5rem;
  
  /* Typography */
  --font-sans: system-ui, sans-serif;
}

Changing Colors

To change a color, simply update the corresponding CSS variable. BrandCn themes use HSL format for colors (Hue Saturation Lightness).

/* Change primary color to purple */
--primary: 262 83% 58%;

/* Change background to dark */
--background: 222 47% 11%;

Customizing Typography

Update font settings using CSS variables:

/* Use custom font */
--font-sans: 'Inter', system-ui, sans-serif;

/* Adjust heading weights */
--heading-font-weight: 700;

Border Radius

Control the roundness of corners across your entire application:

/* Square corners */
--radius: 0;

/* Fully rounded */
--radius: 9999px;

/* Custom size */
--radius: 1rem;

Pro Tip

Use CSS variables consistently throughout your project for easy theme management. Change variables in one place and it updates across your entire application!