Angular Material theme builder

Stop fighting Angular Material themes

Visually tune tokens, preview real components, and export clean SCSS for your Angular app.

  • Find the right token fastNo more guessing which override controls which state.
  • Preview every change visuallyTune colors, density, typography, and components before shipping.
  • Ship paste-ready SCSSExport the theme and overrides your Angular app needs.
Get started — free Watch 2-min walkthrough

Free. No signup. Open the builder and start tuning.

  • 901+ design tokens
  • Live Preview
  • SCSS export
Profile photo of Paul HothmerProfile photo of mProfile photo of Some UserProfile photo of Anas EL MASSAFIProfile photo of Denis Briceag

155 builders have signed up to try it

Compared with the official Material Foundation Theme Builder

The official builder is great for Material 3 color systems. This builder adds the Angular Material workflow: SCSS export, component overrides, and local app preview.

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

See it in action

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

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.
Portrait of Romain Proteau
Romain ProteauDeveloper, CENSIER PUBLICINEX — cinema advertising, France

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

Everything Angular Material theming, end to end

Visual control over every Angular Material token — tune system colors, component states, and density without writing SCSS.

Live Preview dialog: local app URL field set to http://localhost:4200, Connect and Disconnect actions, and setup instructions to add a script to the app.
cast_connected

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.

Button token overrides with sliders next to a focused component preview of Material buttons.
Proextension

Component Design Tokens

Visually tune 900+ tokens across 33 components — states, density, and roles — with instant preview.

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

System Design Tokens

M3 color roles and scheme variants, typescale, and density — one place to anchor brand and accessibility.

Export SCSS dialog with syntax-highlighted Angular Material theme and theme-overrides code.
code

In-builder preview & SCSS export

Light and dark preview in the builder, then copy mat.theme() and component overrides when you ship.

Theme menu in the builder showing several saved themes with seed color dots and actions to switch, duplicate, or rename.
library_books

Cloud-synced themes

Pro: maintain up to 10 named themes in the cloud — switch, duplicate, and rename from the toolbar while you iterate.

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

What builders ship with it

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.
Portrait of Romain Proteau
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.
Portrait of Sumit Patidar
Sumit PatidarSenior Software Engineer, VIT Infotech Pvt. Ltd
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.
Portrait of Jeph Remley
Jeph RemleySr Application Developer, Kent State University Library
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
Open the builder
Theme menu in the builder showing several saved themes with seed color dots and actions to switch, duplicate, or rename.

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

  • 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 purchase · 30-day refund

Best for shipping polished Angular Material themes

  • check_circle

    Everything in Free

  • check_circle

    Unlimited 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

Secure checkout via Polar

Includes lifetime updates · Refund policy

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