Reactify
NPMGitHub

Zero-Config Theming with Brand Tokens

Instantly generate a theme by providing your brand's primary, accent, and background colors. Preview live updates and download your theme tokens as JSON or SCSS.

Theme Controls
Adjust your brand colors below. Foreground colors will be adapted.

Foreground colors (--primary-foreground, --accent-foreground, --foreground, --card-foreground) are automatically adjusted for basic contrast. For full control, define them directly in your CSS.

Live Preview
Components update in real-time as you change theme variables.
Card Component

This card also adapts to the theme settings, using --card and --card-foreground variables.

How Theming Works & Token Export

Reactify components use CSS custom properties (variables) defined in HSL format (Hue Saturation Lightness) for all colors. The controls above allow you to set the base --primary, --accent, and --background colors. Other variables like --foreground, --primary-foreground, --secondary, --card, --border, etc., are defined in globals.css and adapt to these primary settings or have their own base values.

You can download the currently active theme's HSL values as JSON or SCSS using the "Download" buttons in the "Theme Controls" card. This helps you integrate the customized theme into your own projects.

Example CSS Variables (from globals.css):

1/* In your globals.css or theme file */ 
2:root { 
3  --primary: 209 100% 60%; /* HSL value for Deep Sky Blue */ 
4  --primary-foreground: 210 40% 98%; 
5  
6  --accent: 266 100% 46%; /* HSL value for Electric Indigo */ 
7  --accent-foreground: 210 40% 98%; 
8  
9  --background: 210 29% 95%; /* HSL value for Light Gray */ 
10  --foreground: 222.2 84% 4.9%; 
11   
12  /* ... and many more for secondary, muted, card, border, input, ring etc. */ 
13}