Pro
Live Preview in your app
Stream theme changes into your Angular app on localhost so you can validate real screens, routes, and component states while you iterate. Pro feature.
Free builder · Pro Live Preview
The fastest way to build Angular Material themes
Design and refine Angular Material themes in the browser — free.
Go Pro when you want Live Preview on localhost and unlimited export.
- 33 Material components
- 901+ design tokens
- Localhost Live Preview (Pro feature)
- Built for design systems
65 builders already theming with this
Seed color
Select a color
Diagram showing a theme builder feeding a browser preview on localhost. Choosing a swatch updates colors and briefly highlights an orthogonal link from the source panel’s right edge toward the preview, with a vertical drop near the address bar.
See it in action
Walk through the builder workflow and see how Live Preview brings theme changes into a running Angular app.
From tokens to your app — without guesswork
From global theme foundations to component-level overrides, the builder helps you move from token editing to real app validation without guesswork.
Component Design Tokens
Tune 900+ tokens across 33 Angular Material components with immediate in-builder feedback.
System Design Tokens
Color (38 M3 roles, 4 scheme variants), typography (5-input typescale), and density — the foundation for large themes and design systems.
In-builder preview & SCSS export
Preview light and dark themes in the builder, then export Angular Material-ready SCSS when you are ready to ship.
How it works
Step 1: Pick a seed color
All 33 Material components (901 tokens)
Deep control across every major Angular Material component, so your design system stays consistent from global roles to edge-case component states.
Autocomplete
Badge
Bottom Sheet
Button
Icon Button
FAB
Button Toggle
Card
Checkbox
Chips
Datepicker
Dialog
Divider
Expansion Panel
Form Field
List
Menu
Paginator
Progress Bar
Progress Spinner
Radio Button
Select
Sidenav
Slider
Slide Toggle
Snack Bar
Sort Header
Stepper
Table
Tabs
Timepicker
Toolbar
Tooltip
What builders say
Early feedback from teams using Angular Material in production.
"We don't have a designer on the team; the Angular Material Theme Builder will be a huge help iterating on our visual theme and should save us a lot of time."
Romain ProteauDeveloper, CENSIER PUBLICINEX — cinema advertising, France
"Really enjoying the Angular Material Theme Builder. It saves a lot of time, and customizing individual components is a great feature—makes UI tweaks super easy."
Sumit PatidarSenior Software Engineer, VIT Infotech Pvt. Ltd
Simple pricing for Angular Material theming
Start free in the builder, then upgrade when you want Live Preview in your app, unlimited exports, and cloud sync.
Free
$0
Free forever
Best for exploring the builder and trying production features
- Full builder: system and component tokens, light and dark preview in the browser
- After Google sign-in: trial of production features — 1 full SCSS export (component mat.*-overrides) and 3 Live Preview sessions to localhost
Launch offer
Pro
$19
Ends in 3d 0h 23m 2s
One-time payment, lifetime access
Best for shipping production themes
- Everything in Free
- Unlimited full export (900+ component tokens, 33 Material components) and unlimited Live Preview to localhost (dev-only snippet)
- Up to 10 cloud-synced themes — access your themes on any device
One-time purchase · Lifetime Pro feature updates · Sign in with Google at checkout
Frequently asked questions
Design tokens were introduced in Angular Material v19 onwards. This theme builder is built to support any project using @angular/material v19 or newer.
No. You can explore the builder without an account. Sign in with Google when you want trial access or Pro features.
Free includes the full builder: design and preview themes, edit system and component tokens, and light and dark preview. Sign in with Google for 1 free full export (component-level SCSS) and 3 Live Preview sessions to localhost.
Pro is a one-time purchase with lifetime access: unlimited full export (900+ component tokens across 33 Material components), unlimited Live Preview streaming to your local app, and up to 10 cloud-synced themes. The pricing section shows a live countdown when the early adopter price is active.
System tokens (color, typography, density) control the global theme. Component tokens (900+) override individual components down to specific states/variants.
No. Independent tool built on the official Angular Material M3 design token API.
SCSS using mat.theme() and mat.<component>-overrides(). Drop it into your project.
One-time payment for lifetime access to Pro features, including future Pro feature updates. A limited-time early adopter price ($19, normally $39) is shown with a countdown on the site until the offer ends.
Yes. Independent light/dark role values, exported with light-dark() CSS for automatic scheme switching.
Connect the builder to your dev server (http://localhost or https://localhost). Theme changes stream to your app in near real time via a small script in index.html for local use. Remove that snippet before production. Free users get 3 trial sessions after signing in; Pro unlimited. Open Live Preview in the builder toolbar to copy the exact setup steps.
Ready to build your perfect theme?
Start building for free. Upgrade to Pro when you're ready to validate themes in your app and ship faster.
Open the Builder© 2026 Material Theme Builder
Created by Zoaib Khan · consult@zoaibkhan.com