Theme Tool
Client-side color palette studio for generating, importing, previewing, and exporting cross-platform themes.
Status: released
- Platforms
ThemeTool is a client-side web app for creating, importing, inspecting, previewing, and exporting color themes for web and mobile products. It helps designers and developers move from a palette to usable design tokens and platform-specific theme files without a backend.
What it does
- Generates perceptually balanced semantic palettes for text, background, primary, secondary, and accent roles.
- Produces tonal shade scales from 50 through 950 and reports WCAG contrast ratios.
- Imports palettes from Coolors, ColorKit, UIColors/Tailwind, Realtime Colors, JSON, CSS variables, and raw hex values.
- Lets users edit colors, lock roles, randomize palettes, inspect shades, swap roles, and create light/dark duality themes.
- Previews the active palette in Tailwind web UI, Material 3, Android, and iOS-inspired interfaces, with target visibility controls.
- Exports Tailwind v3/v4 themes, Android XML resource bundles, iOS Swift and asset catalog data, standard theme JSON, and shareable URLs.
Technology
- React 19 and TypeScript
- Vite and Tailwind CSS v4
- Vitest and Testing Library
- JSZip for Android resource bundle generation
- Lucide React icons
- Static deployment to GitHub Pages
Links
- Live app: https://headhunter45.github.io/ThemeTool/
- Repository: https://github.com/headhunter45/ThemeTool
- Reference: https://www.realtimecolors.com
Project status
The core color engine, importers, palette workflow, previews, accessibility checks, exporters, share URLs, and application shell are implemented. Future scope includes gradients and additional theme tokens such as borders, radii, shadows, typography, and background patterns.
Image assets
No project image assets are currently present. The JSON companion includes generation prompts in the url and prompt fields for the logo, application screenshot, and social preview image.