v1.2.2 MIT Zero dependencies 428 tests

salt-theme-gen

OKLCH-based design system generator — generate a complete light/dark theme from a single color. Platform agnostic: React, React Native, Next.js, Vue, Angular, Vanilla JS, Flutter, and more.

npm install salt-theme-gen

Start the guide → Quick start (5 min)

theme.ts

import { generateTheme } from 'salt-theme-gen';

const theme = generateTheme({
  preset: 'ocean',      // or any hex color
  spacing: 'default',
  radius: 'default',
  fontSize: 'default',
});

// theme.light.colors.primary   → '#2563eb'
// theme.dark.colors.background → '#0a0f1e'
// theme.light.spacing.md       → 12
// theme.light.accessibility    → WCAG report

Guide

Sequential tutorial — each chapter builds on the last. Start from the beginning or jump to what you need.

01 Introduction → 02 Quick Start → 03 Understanding the Output → 04 Color Presets → 05 Design Scale Presets → 06 Accessibility Built-in → 07 ColorHarmony & Accents → 08 Adjusting Themes → 09 Comparing Themes → 10 Validation → 11 TypeScript Integration →

Integrations

Every guide opens with the developer pain it solves, then walks you through the integration step by step with a live StackBlitz demo.

React → Next.js → Vue 3 → Nuxt 3 → Astro → SvelteKit → Remix → Angular → Vanilla JS → Tailwind CSS → React Native → Expo → Flutter → Storybook → CSS-in-JS → Sass/SCSS → Bolt.new → Lovable →

AI-ready resources

Use salt-theme-gen with Claude, Cursor, ChatGPT, and any AI coding assistant. Ready-to-copy prompt templates for every framework, plus a machine-readable llms.txt spec.

View AI resources →