ThemeStudio 🎨 Zero-config visual theme studio for React & Next.js with shadcn/ui support. Transform your app's look in real-time — no config files, no rebuilds, no hassle. https://www.npmjs.com/package/themestudio https://opensource.org/licenses/MIT ✨ Features 🌗 Theme Toggle — Switch between Light, Dark, and System modes instantly 🎨 Live Color Picker — Change your primary brand color with a visual picker ⚡ Color Scale Generator — Generate full shadcn-compatible color scales from a single hex color 💾 Export / Import — Save, share, and load themes as JSON 🔌 shadcn/ui Native — Auto-detects and overrides shadcn CSS variables at runtime 🚀 Zero Config — Install, add one component, done 📦 Framework Agnostic — Works with React 18+, Next.js App Router & Pages Router 📦 Installation bash npm install themestudio

or

yarn add themestudio

or

pnpm add themestudio Peer Dependencies bash npm install react react-dom 🚀 Quick Start Next.js (App Router) Add to your root layout: tsx // app/layout.tsx import { ThemeStudio } from 'themestudio';

export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {/* ← Floating widget appears */} {children} ); } React (Vite, CRA, etc.) tsx // App.tsx import { ThemeStudio } from 'themestudio';

function App() { return ( <> </> ); } That's it. No configuration required. 🎉 🖼️ What You Get A floating palette button appears at the bottom-right of your app. Click it to open: Table Tab What It Does Theme Toggle Light / Dark / System mode Colors Live hex color picker for your primary brand color Generate Pick one color → auto-generate a full 11-step shadcn scale Export Copy theme JSON to clipboard or import a shared theme 🔌 shadcn/ui Integration ThemeStudio automatically detects shadcn/ui and overrides these CSS variables at runtime: css --primary --primary-foreground --ring --radius --background --foreground /* ... and more */ Your shadcn components will instantly reflect color and theme changes — no rebuild needed. 📤 Export & Import Themes Export Click "Copy Theme JSON" in the Export tab to get: JSON { "name": "Ocean Blue", "mode": "light", "colors": { "primary": "#0066cc", "radius": "0.5rem" }, "generatedScale": { "50": "#f0f9ff", "100": "#e0f2fe", "500": "#0ea5e9", "900": "#0c4a6e" } } Import Paste any theme JSON into the Import textarea and click "Import Theme". 🧪 Programmatic API Want to build your own UI? Use our hooks and utilities directly: tsx import { useTheme, useColorScale, generateScaleFromColor } from 'themestudio';

function MyCustomPanel() { const { config, setMode, setPrimaryColor } = useTheme(); const scale = useColorScale('#ff5722');

return ( Current mode: {config.mode} Primary: {config.colors.primary} <button onClick={() => setMode('dark')}>Go Dark <button onClick={() => setPrimaryColor('#ff5722')}>Set Orange ); } Available Exports Table Export Type Description ThemeStudio Component The floating widget (default export) useTheme Hook Theme state, mode, and color controls useColorScale Hook Generate 11-step color scales from a hex color generateScaleFromColor Function OKLCH-based color scale generator getForegroundColor Function Auto-pick accessible foreground for a background injectCSSVars Function Inject CSS custom properties at runtime detectShadcn Function Detect if shadcn/ui is present saveTheme / loadTheme Function localStorage persistence exportTheme / importTheme Function JSON serialization 🎨 How Color Generation Works We use OKLCH color space (via culori) to generate perceptually uniform color scales: You pick a base color (e.g., #0066cc) We convert it to OKLCH We interpolate lightness and chroma across 11 steps (50 → 950) We map those steps to shadcn-compatible CSS variables Result: A professional color system that looks great in both light and dark modes. ⚙️ Next.js Config (Optional) If you see module resolution issues with local/symlinked packages, add this to next.config.ts: TypeScript import type { NextConfig } from 'next';

const nextConfig: NextConfig = { transpilePackages: ['themestudio'], };

export default nextConfig; 🧩 Requirements React ^18.0.0 || ^19.0.0 React DOM ^18.0.0 || ^19.0.0 TypeScript (optional but recommended) 📁 File Structure plain themeStudio/ ├── dist/ │ ├── index.js # CJS build │ ├── index.mjs # ESM build │ └── index.d.ts # TypeScript declarations ├── src/ │ ├── components/ # React components (Widget, Tabs, etc.) │ ├── hooks/ # useTheme, useColorScale │ ├── utils/ # Color math, CSS vars, storage │ └── types/ # TypeScript interfaces ├── package.json └── README.md 🤝 Contributing Contributions are welcome! Please open an issue or pull request on GitHub. 📄 License MIT © ThemeStudio 💬 Questions? Does it work with Tailwind CSS v4? — Yes, it overrides CSS variables that Tailwind reads. Does it work with Pages Router? — Yes, import in your _app.tsx. Can I hide the widget in production? — Yes, conditionally render it: {process.env.NODE_ENV === 'development' && } Does it support custom color variables? — The full shadcn variable map is coming in v1.1. Currently supports primary, ring, radius, and theme mode.