Angular Material theme builder

Build Angular Material themes in minutes, not days

Tune 900+ tokens visually, preview real components, export paste-ready SCSS.

Get started — free Watch 2-min walkthrough

Free. No signup required.

36 Pro customers · 158 sign ups

Built by an Angular Material instructor

Manual Material theming: the hidden time tax

Without a visual builder, theming Angular Material often looks like this:

Time receipt
  • 1–2 hrsfinding the right Material token
  • 2–3 hrschecking light and dark states
  • 2 hrstesting buttons, forms, dialogs, tables, and edge states
  • 1 hrcleaning up mat.theme() and component overrides

≈ 1 full day

before the UI feels right

There’s an easier way.

Watch 2-min walkthrough

See it in action

Watch the basic workflow: pick a theme, tune tokens visually, preview components, and export SCSS.

Speeds up Angular Material CSS for our site overhaul.
Portrait of Jeph Remley
Jeph RemleySr Application Developer, Kent State University Library Verified Pro customer

How it works

Color editor showing seed color, vibrant scheme variant, and system color roles such as primary and on-primary.

Step 1: Pick a seed color

No more edge-case Material components left behind

Buttons, form fields, dialogs, tables, steppers, tabs, and 27 more components — 901 tokens in total — so your theme holds up beyond the happy path.

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

Ready to theme your Angular Material app?

Open the full builder, tune tokens visually, and export paste-ready SCSS — no card required.

Get started — free

Free. No signup required.

What builders say

Used by 158 Angular builders, including 36 paid Pro customers.

Inbox
Pro customer
Portrait of Thorsten Westheider
Thorsten WestheiderBackend developer, Germany

Material 3 theming sorted in hours

The Material Theme Builder by Zoaib Khan is a great piece of software and a real timesaver, I highly recommend it! I'm working on a private project and, being the backend developer that I am, had a hard time getting to grips with Material 3 theming. Thanks to the builder I got that sorted in a matter of hours instead of days or even weeks. That was money well spent!
Inbox
Pro customer
Portrait of Romain Proteau
Romain ProteauDeveloper, CENSIER PUBLICINEX — cinema advertising, France

Huge help iterating without a designer

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.
Inbox
Portrait of Sumit Patidar
Sumit PatidarSenior Software Engineer, VIT Infotech Pvt. Ltd

Really enjoying the theme builder

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.
Inbox
Pro customer
Portrait of Jeph Remley
Jeph RemleySr Application Developer, Kent State University Library

Speeds up our Material site overhaul

Speeds up Angular Material CSS for our site overhaul and helps me learn on-the-fly—without digging through docs for examples that do not fit. Clean, easy-to-use interface too.

Why not just use the official Material Theme Builder?

The official Material Foundation builder is great for Material 3 color palettes. This builder is built for Angular Material: paste-ready SCSS, 900+ component overrides, and Live Preview on localhost.

Official builder This builder +Pro
Material 3 color roles and palettes Material 3 color roles and palettes — M3 palette:YesMaterial 3 color roles and palettes — This builder:YesMaterial 3 color roles and palettes — Pro:Yes
Angular Material mat.theme() SCSS Angular Material mat.theme() SCSS — M3 palette:NoAngular Material mat.theme() SCSS — This builder:YesAngular Material mat.theme() SCSS — Pro:Yes
Angular Material component overrides Angular Material component overrides — M3 palette:NoAngular Material component overrides — This builder:YesAngular Material component overrides — Pro:Yes
Local Live Preview Local Live Preview — M3 palette:NoLocal Live Preview — This builder:TrialLocal Live Preview — Pro:Yes
Portrait of Zoaib Khan, Angular Material instructor and YouTube educator
zoaibkhan.com

Built by an Angular Material instructor

I’m Zoaib Khan, an Angular instructor with 8+ years of Angular development experience and 1.1M+ views teaching Angular on YouTube. I’ve spent years building Angular Material templates, dashboards, forms, and production UI patterns, so this builder is shaped by the theming problems developers hit in real projects.

  • 8+ years Angular experience
  • 1.1M+ YouTube tutorial views
  • Angular Material templates and project source code used by developers
  • Dedicated Angular Material theming video playlist
Watch the Angular Material theming playlist
Money well spent — sorted Material 3 theming in hours, not weeks.
Portrait of Thorsten Westheider
Thorsten WestheiderBackend developer, Germany Verified Pro customer

Simple pricing for Angular Material theming

Free to explore in the browser. Pro unlocks unlimited exports and Live Preview.

Free

$0

Free forever

Explore everything in the browser — no card required

  • check_circle

    Full builder

    System and component tokens · Light and dark preview

  • check_circle

    Bonus when you sign in

    Get 1 full SCSS export and 3 Live Preview sessions on top of the free builder

Start free

Try free — upgrade only when you need Pro limits

Recommended

Pro

$39

One-time payment

Best for shipping polished Angular Material themes

  • check_circle

    Everything in Free

  • check_circle

    Unlimited paste-ready SCSS exports

    Generate full themes and component overrides whenever you need them

  • check_circle

    Live Preview for localhost

    Tune the theme while your Angular app updates in real time

  • check_circle

    10 cloud-synced themes

    Save client, product, or brand themes

  • check_circle

    Lifetime updates

    Future Pro features included — no subscription

Join 30+ others who've upgraded to Pro

Secure checkout via Polar 30-day refund

Frequently asked questions

No — Google's M3 Theme Builder generates a base Material 3 palette. This tool is built specifically for Angular Material 19+ and adds component-level token overrides, Live Preview to your localhost app, and SCSS export ready to paste.

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 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 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 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. See the pricing section for the current Pro price.

System tokens (color, typography, density) control the global theme. Component tokens (900+) override individual components down to specific states/variants.

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. The current price is shown in the pricing section on the site.

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 — free

No card required · 30-day refund on Pro

© 2026 Material Theme Builder

Created by Zoaib Khan · consult@zoaibkhan.com · Refund policy