ThemeKit Studio — Material UI Edition

A white-label theming studio for a card-centric ERP, built with real @mui/material components driven by a token system (createTheme + an augmented theme.tokens). Everything you change in the studio re-themes the entire app live — and the studio itself.

What's inside

mui-themekit/
├─ index.html              # Vite entry + Google Fonts
├─ package.json
├─ vite.config.ts
├─ tsconfig*.json
└─ src/
   ├─ main.tsx             # React root + StudioProvider
   ├─ settings.ts          # Settings type, DEFAULTS, every option list
   ├─ theme.ts             # ★ the token system: Settings -> MUI createTheme + theme.tokens
   ├─ store.tsx            # StudioProvider (state) -> ThemeProvider
   ├─ data.ts              # sample app content + theme-aware color helpers
   ├─ export.ts            # streamlined ZIP export + single-theme download + import (MUI theme / CSS vars / Tailwind / JSON / brand guide / .themekit.json)
   ├─ ThemeStudio.tsx      # the studio rail (all controls, real MUI inputs)
   ├─ screens.tsx          # 9 screens as MUI components (Login, Dashboard, Operations,
   │                       #   Cameras, Reports, Orders, Form, Components, Settings)
   └─ App.tsx              # shell: studio rail + app frame (AppBar, sidebar, router, toast)

The token system is the important part: buildTheme(settings) in src/theme.ts turns the flat Settings object into a genuine MUI theme. Standard design decisions go into the normal MUI slots (palette, shape, typography, components), and everything MUI doesn't model (overlay surfaces, chart palette, card-style/header, status intensity, density, studio chrome) goes into a typed theme.tokens extension that components read via useTheme().

Run it on your local PC

You need Node.js 18+ (includes npm). Then:

cd mui-themekit
npm install        # one-time: downloads React + MUI + Vite
npm run dev        # starts dev server, opens http://localhost:5173

That's it — edit any file and it hot-reloads.

Production build / deploy

npm run build      # outputs static files to mui-themekit/dist/
npm run preview    # serve the built dist/ locally to verify

dist/ is a plain static bundle — host it anywhere (Nginx, Apache, GitHub Pages, Netlify, Vercel, an S3 bucket, or npx serve dist).

Using an exported theme in your own app

Export downloads a single *-theme-package.zip containing every asset (*-theme.js, CSS vars, Tailwind config, tokens JSON, brand-guide, and a round-trippable *.themekit.json). Download (in Saved Themes) saves just the current theme as one .themekit.json; each saved chip has its own download icon. Import loads any .themekit.json back in and applies it live. In a real MUI app:

import { ThemeProvider, CssBaseline } from '@mui/material';
import { theme } from './nexus-erp-theme';   // the exported file

<ThemeProvider theme={theme}><CssBaseline /><App /></ThemeProvider>

Notes

• Fonts load from Google Fonts via <link> in index.html (needs internet on first paint). To go fully offline, self-host the font files and update the link.
• Custom logo/login-image upload from the original HTML build is represented here as URL fields; wiring a file picker is a small addition if you need it.