Theme Customizer
FeedbackCustomize and preview theme colors with live examples and theme switcher
Note: This tool is for previewing and generating theme CSS code. The site uses the Monochrome theme by default with Light/Dark mode toggle. Theme selection here only affects the preview area below.
Choose Theme to Preview
Theme Preview
Typography Hierarchy
This is a large paragraph of text
This is a regular paragraph of text
This is small muted text
Card Component
This is how cards look with the selected theme.
Generated CSS
:root {
--primary: 0 0% 98%;
--pre-primary: 0 0% 99.5%;
--secondary: 0 0% 10%;
--tertiary: 0 0% 40%;
--accent: 0 0% 20%;
}
.dark {
--primary: 0 0% 8%;
--pre-primary: 0 0% 12%;
--secondary: 0 0% 85%;
--tertiary: 0 0% 40%;
--accent: 0 0% 20%;
}Color Palette
5-Color Theme System
Color Roles
- primary - Main background color
- pre-primary - Light background for cards
- secondary - Text color
- tertiary - Highlights and emphasis
- accent - Actions and links
Tailwind CSS Classes
- bg-primary text-secondary
- bg-pre-primary text-secondary
- text-tertiary
- text-accent hover:text-accent/80
- border-border 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.
Frequently Asked Questions
What colors can I customize in the theme system?
The tool focuses on AIToo's 5-color theme system: primary, pre-primary, secondary, tertiary, and accent. These map to page backgrounds, panel backgrounds, text, highlights, and interactive states.
Can I preview light and dark mode before using a theme?
Yes, the live preview lets you test theme colors across common UI elements and switch between light and dark mode so you can catch contrast or readability issues early.
Is the generated theme useful outside AIToo?
Yes. The CSS variable output can be adapted for Tailwind, design systems, prototypes, and apps that use token-based color naming.
Try Our Browser Extension
Access essential tools instantly from your browser sidebar. Encode, decode, format, and hash - all without leaving your workflow.