Skip to main content

​
Installation

Clone the repository and install dependencies with your preferred package manager. 
git clone https://github.com/yourusername/theme-gen.git
cd theme-gen
npm install

​
Running the Development Server

Start the local development server with Turbopack for fast hot module reloading: 
npm run dev
Open http://localhost:3000 in your browser to see Theme Gen in action.
The dev server uses Next.js 15 with Turbopack for optimal performance during development.

​
Creating Your First Theme

1

Pick Your Colors

Click on any color swatch in the sidebar to open the color picker. Theme Gen provides five core colors that you can customize:
  • Text — Primary text color
  • Background — Page background
  • Primary — Buttons, links, and key actions
  • Container — Cards and container backgrounds
  • Accent — Secondary highlights and CTAs
As you adjust colors, the entire preview updates in real-time.
2

Check WCAG Contrast

Theme Gen automatically audits your palette against WCAG accessibility standards. The sidebar shows contrast ratio badges for each color pair:
  • Text/Background: 7:1 (AAA)
  • Primary/Background: 3:1 (AA)
  • Text/Container: 4.5:1 (AA)
  • Accent pairs: 3:1 (AA)
Use the Shuffle button to generate random palettes that automatically pass all contrast checks. You can lock individual colors before shuffling to preserve them.
3

Toggle Light & Dark Mode

Click the theme toggle in the top toolbar to switch between light and dark modes. Each mode maintains its own independent color palette.Try creating complementary themes for both modes to give users a complete experience.
4

Preview Across Components

Switch between Web and Mobile views using the preview toggle to see how your theme looks across different UI patterns:
  • Hero sections
  • Pricing tables
  • Login forms
  • Mobile app screens
  • Wallet interfaces
This helps ensure your theme works well in real-world scenarios.

​
Sharing Your Theme

Theme Gen automatically encodes your theme in the URL. Simply copy the URL from your browser to share your palette with others.

​
URL Format

/?colors=1a1625-faf9fc-4F46E5-eeedf2-0284C7&mode=light
The colors are encoded as compact hex values in this order: 
text-background-primary-container-accent
Anyone with the URL can open it directly — no export or import needed. The theme loads instantly from the URL parameters.

​
Exporting Your Theme

Click the Export button in the toolbar to open the export modal. Theme Gen supports multiple formats and color systems.

​
Export Options

Formats:
  • CSS Variables
  • Tailwind CSS (v3 & v4)
  • SCSS/Sass
  • SwiftUI
  • React Native
Color Formats:
  • HEX (#4F46E5)
  • RGB (rgb(79, 70, 229))
  • HSL (hsl(244, 76%, 59%))
  • OKLCH (oklch(0.58 0.21 265))
Mode Options:
  • Light only
  • Dark only
  • Both (with media query support)

​
Example: CSS Variables Export

Here’s what the exported CSS looks like for both light and dark modes: 
:root {
  --color-text: #1a1625;
  --color-background: #faf9fc;
  --color-primary: #4F46E5;
  --color-container: #eeedf2;
  --color-accent: #0284C7;
}

.dark {
  --color-text: #ede9f5;
  --color-background: #1a1625;
  --color-primary: #818CF8;
  --color-container: #2a2735;
  --color-accent: #22D3EE;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #ede9f5;
    --color-background: #1a1625;
    --color-primary: #818CF8;
    --color-container: #2a2735;
    --color-accent: #22D3EE;
  }
}
Click the copy button in the export modal to instantly copy your theme code to the clipboard.

​
Next Steps

Live Preview

Learn how real-time preview updates work across your theme

Export Formats

Learn about all export options and how to use them in your projects

API Reference

Dive into the theme structure and color utilities

Accessibility

Understand WCAG standards and contrast requirements

Build docs developers (and LLMs) love

Get started for freeTalk to us