Customizing Colors

Bufferthemes are built with a flexible color system that makes it easy to customize your site’s appearance. This guide will walk you through different ways to modify your theme’s colors.

Color Customization

Our themes use CSS custom properties (variables) for colors, making it simple to change the color scheme site-wide. The main color variables are defined in your theme’s src/styles/global.css file.

Custom Primary Color

You can change and define your custom primary color palette in src/styles/global.css:

@import "tailwindcss";

@theme {
  --color-primary-50: var(--color-indigo-50);
  --color-primary-100: var(--color-indigo-100);
  --color-primary-200: var(--color-indigo-200);
  --color-primary-300: var(--color-indigo-300);
  --color-primary-400: var(--color-indigo-400);
  --color-primary-500: var(--color-indigo-500);
  --color-primary-600: var(--color-indigo-600);
  --color-primary-700: var(--color-indigo-700);
  --color-primary-800: var(--color-indigo-800);
  --color-primary-900: var(--color-indigo-900);
  --color-primary-950: var(--color-indigo-950);
}

This example uses the tailwind color palettes but you can also use custom color palettes.

Color Palette Generators

To help create harmonious color palettes, you can use these helpful tools:

• Tailwind Color Generator - Generate Tailwind-compatible color scales
• Coolors - Create and explore color schemes
• Huemint - AI-powered color palette generator
• Realtime Colors - Preview colors live on a demo website

These tools can help you generate OKLCH values that you can use directly in your theme customization.

Now you can use utilities like bg-primary-500 or text-primary-600 in your templates.

Overriding the Base Color

In addition to the primary color, the base color of all Bufferthemes can also be easily customized. The base color is the gray tone that is used throughout the application. The tailwind color palette for example includes 5 different gray tones:

• Slate
• Gray
• Zinc
• Neutral
• Stone

@import "tailwindcss";

@theme {
  --color-base-50: var(--color-gray-50);
  --color-base-100: var(--color-gray-100);
  --color-base-200: var(--color-gray-200);
  --color-base-300: var(--color-gray-300);
  --color-base-400: var(--color-gray-400);
  --color-base-500: var(--color-gray-500);
  --color-base-600: var(--color-gray-600);
  --color-base-700: var(--color-gray-700);
  --color-base-800: var(--color-gray-800);
  --color-base-900: var(--color-gray-900);
  --color-base-950: var(--color-gray-950);
}

Using CSS Variables

The colors are also exposed as CSS variables that you can use in your custom CSS:

.custom-element {
  color: var(--color-primary-500);
  background-color: var(--color-gray-100);
}

.custom-element:hover {
  color: var(--color-primary-700);
}