Free · No Account Required

Design MUI Themes Visually

The most complete MUI theme editor. Customize colors, typography, spacing, and more — with a live component preview.

Open Theme EditorBrowse Presets
14+ features10 premium presets6 export formats100% free

Color Tokens

primary#7c3aed
secondary#2563eb
success#10b981
warning#f59e0b
theme.ts

export const theme = createTheme({

palette: { ... },

typography: { ... }

});

TSJSJSONCSSTWDiff

Presets

10
SlateMidnightAuroraCrimsonEmeraldHorizonObsidianSapphireRoseMono

WCAG

4/4
Text7.2:1
Button5.1:1
Icons4.8:1
Everything You Need

One tool. 14 features.

From zero to a production-ready MUI theme — no guesswork, no context switching.

Live Preview

30+ MUI components update in real time as you type

10 Premium Presets
SlateMidnightAuroraCrimsonEmeraldHorizonObsidianSapphireRoseMono

WCAG Audit

Auto-fix contrast issues

Primary textAA 7.2:1
Button labelAA 5.1:1
SecondaryAA 4.6:1

6 Export Formats

Ready for any stack

.ts.js.jsoncss varstailwinddiff

URL Theme Sharing

Share themes with a compressed link — no account needed

theme-genie.com/mui-theme-generator?t=N4IgzgpgTiBc...

50-Step Undo / Redo

Applied Midnight preset
Changed primary color
Updated typography

Random Generator

WCAG-safe randomized themes instantly

WCAG Compliant

12 Google Fonts

Live font switching

InterRobotoPoppinsRalewayNunito+7

How it works

Go from idea to production-ready theme in minutes.

01

Customize

Tune colors, typography, spacing, and shape. Pick from 10 presets or start from scratch.

02

Preview

See live MUI components update instantly. Toggle light/dark and run the WCAG audit.

03

Export

Copy TypeScript, CSS variables, or Tailwind config — paste directly into your project.

See the full guide

Frequently Asked Questions

Everything you need to know about Theme Genie.

How do I use the MUI theme generator?
Click "Open Theme Editor" to launch the editor. Use the left panel to adjust colors, typography, spacing, and effects. Your changes appear instantly in the live preview. When ready, export your theme in the format you need.
What export formats are supported?
Six formats: TypeScript (createTheme), JavaScript, JSON, CSS custom properties (:root variables), Tailwind config snippet, and diff-only (just the changes from MUI defaults). Copy or download with one click.
What are the 10 built-in presets?
Slate, Midnight, Aurora, Crimson, Emerald, Horizon, Obsidian, Sapphire, Rose, and Mono — each available in light and dark variants. Browse them at /examples or load directly in the editor.
How does the WCAG audit work?
The live audit checks contrast ratios for primary text, secondary text, and button labels against their backgrounds. It shows AA/AAA pass/fail badges in real time and offers a one-click auto-fix to bring failing pairs into compliance.
Can I share my theme with others?
Yes. Use the Share button in the editor to generate a compressed URL that encodes your full theme. Anyone with the link can open it instantly — no account or login required.
Is Theme Genie free?
Completely free. No registration, no usage limits, no hidden costs. Create and export unlimited themes.
Does it support dark mode?
Yes. The editor lets you tune separate palettes for light and dark modes. Toggle between them to preview and fine-tune each variant, then export both in a single theme file.
Free · No account required

Start Building Your Theme

Join developers shipping better MUI interfaces, faster.

Open Theme EditorBrowse Presets