Pro
Live Preview in your app
Point at your dev server and stream theme updates to real screens and routes. Pro — add a small localhost-only script; remove it before production.
For Angular Material teams · Free to try
Real-time Angular Material theming for your app
- See theme changes live in your app
- Control Angular Material tokens visually
- Export production-ready SCSS
Try free in the browser · Upgrade when you ship
85 builders already theming with this
See it in action
Walk through the builder workflow and see how Live Preview brings theme changes into a running Angular app.
Everything Angular Material theming, end to end
System tokens, component overrides, localhost preview, and export — so your shipped theme matches what you designed.
Component Design Tokens
Visually tune 900+ tokens across 33 components — states, density, and roles — with instant preview.
System Design Tokens
M3 color roles and scheme variants, typescale, and density — one place to anchor brand and accessibility.
In-builder preview & SCSS export
Light and dark preview in the builder, then copy mat.theme() and component overrides when you ship.
Cloud-synced themes
Pro: maintain up to 10 named themes in the cloud — switch, duplicate, and rename from the toolbar while you iterate.
Theme management Pro
Multiple themes, one workspace
Create and organize distinct Material themes for products, clients, or experiments — then pick up where you left off on any device.
- Up to 10 cloud-synced themes when you’re on Pro and signed in
- Duplicate, rename, and switch themes without leaving the builder
- Each theme keeps its own seed color, tokens, and component overrides
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
Try the full builder free. Go Pro for unlimited Live Preview and exports.
Free
$0
Free forever
Explore everything in the browser — no card required
Full builder
System and component tokens · Light and dark preview
Signed-in trials
With Google: 1 full SCSS export · 3 Live Preview sessions to localhost
Try free — upgrade only when you need Pro limits
Launch offer
Pro
$19
Ends in 2d 5h 5m 59s
One-time payment, lifetime access
Best for shipping production themes
Everything in Free
Unlimited export & Live Preview
Full component mat.*-overrides · Stream to localhost with dev-only snippet
Up to 10 cloud-synced themes
Access your saved themes on any device
One-time purchase · Lifetime Pro updates · 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.
Yes. Use the full builder in the browser at no cost—no payment to explore. Sign in with Google when you want the signed-in trials (export and Live Preview sessions) or Pro.
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.
Try Material Theme Builder free
Open the full builder in your browser. Upgrade to Pro when you want unlimited Live Preview and export.
Get started — freeTry free in the browser · Upgrade when you ship
© 2026 Material Theme Builder
Created by Zoaib Khan · consult@zoaibkhan.com