Theme Customizer

Customize and preview your theme colors in real-time

Theme Settings

Dark Mode

Toggle between light and dark appearance

Choose Theme

Generated CSS

:root {
    --primary: 270 35% 95%;
    --pre-primary: 270 35% 98%;
    --secondary: 270 35% 15%;
    --tertiary: 290 70% 50%;
    --accent: 250 80% 60%;
}

.dark {
    /* Dark mode colors will be automatically applied */
    --primary: hsl(270, 35%, 8%);
    --pre-primary: hsl(270, 35%, 12%);
    --secondary: hsl(270, 35%, 85%);
    --tertiary: 290 70% 50%;
    --accent: 250 80% 60%;
}

Color Palette Preview

primary

Background

#f2eef7

pre Primary

Light Background

#faf8fc

secondary

Text Color

#261934

tertiary

Highlights

#bb26d9

accent

Actions

#6347eb

Button Styles

Card Variations

Light Card

Using pre-primary background

Main Card

Using primary background

Form Elements

Input Field

Select

Typography

Heading 1

Heading 2

Heading 3

Regular text content

Tertiary text for highlights

Accent text for links

Muted text

Interactive Elements

Progress

Status

Active

Warning

Inactive

5-Color Theme System Usage

Color Roles

primary - Main background color
pre-primary - Light background for cards
secondary - Text color
tertiary - Highlights and emphasis
accent - Actions and links

CSS Classes

bg-primary text-secondary
bg-pre-primary text-secondary
text-tertiary - for highlights
text-accent hover:text-accent/80
border-accent focus:ring-accent

About Theme Customizer

Comprehensive theme customization tool featuring the 5-color theme system with primary, pre-primary, secondary, tertiary, and accent colors. Includes live preview examples of buttons, cards, forms, typography, and interactive elements. Features an integrated theme switcher to test different color schemes and dark mode in real-time.

Explore Design Tools

Discover all tools in the design tools category

Browse Category