Modify Angular Material 19 Theme with SCSS & CSS

In this quick guide, we will learn how to modify theme for Angular Material 19 with SCSS mixins and CSS variables.

If you like watching videos, you can watch the video version of this article on .

The color variables are defined using the CSS color function .

The mat.theme mixin will only declare CSS variables for the categories included in the input. For example, if typography is not defined, then typography CSS variables will not be included in the output.

Color Palettes

Angular Material provides . It builds custom color palettes based on a single color input for the primary color, and optionally color inputs to further customize secondary, tertiary, and neutral palettes:

ng generate @angular/material:theme-color

And select answers as below:

The schematic will generate an SCSS file named _theme-colors.scss. Let's use $primary-palette and $tertiary-palette to modify the theme.

@use "./styles/_theme-colors.scss" as theme-colors;



html {

  @include mat.theme(

    (

      color: (

        primary: theme-colors.$primary-palette,

        tertiary: theme-colors.$tertiary-palette,

      ),

      typography: Roboto,

      density: 0,

    )

  );

}

You should see the new theme applied to the application.

System Variables

The CSS variables generated by the mat.theme mixin are also known as to get the tokens for your desired theme.

What is it?

Theme builder is a tool for Angular developers who are using Angular Material 15, 16, 17, 18 or 19 in their project. This tool allows you to build, preview and export themes for Angular Material.

You can also share themes simply by using a unique link with your team of developers or designers.

How to use it?

1. Simply go to to get the tokens for your desired theme.
   
   

   
   
   
   Live Playground
   

   
   
   
   
   
   , make sure to subscribe to the newsletter to get notified when it is ready.

   
   
   

   

   Vollständiger Original-Bericht

   Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

   ↗ Original-Artikel auf dev.to lesen
   Wie bewertest du diesen Beitrag?

   1 Klick Feedback

   Hot 0 ️ Patch Now 0 Hilfreich 0 🤔 Diskutieren 0

   Teilen mit Netzwerk & Team:

   𝕏 Twitter 💼 LinkedIn 🦋 Bluesky WhatsApp Slack / Teams 👥 Team-Invite Link kopieren 📸 Social Card
   Hat Ihnen dieser Tipp / Anleitung geholfen?

   👍 Ja, hilfreich! Feedback geben
   Community-Analysen & Experten-Meinungen 0

   Verfasse deine eigene Analyse, teile Workarounds oder diskutiere diesen Vorfall im Blog.

   Eigene Analyse verfassen

   Noch keine Community-Analyse verfasst. Markiere einen Textabschnitt oder klicke oben auf „ Eigene Analyse verfassen“!
   Beitrag teilen Kopieren
   Feedback Experten-Votum

   Hot 0 ️ Patch 0 Hilfreich 0 Top 0

   🔴 Akute Relevanz 🟡 In Evaluierung 🟢 Keine Auswirkung
   Community Pulse: Relevanz-Einschätzung

   1 Klick Experten-Votum

   🔴 Akute Relevanz

   🟡 In Evaluierung

   🟢 Keine Auswirkung

   Spannende Innovation

   🔴 Akute Relevanz 0%

   🟡 In Evaluierung 0%

   🟢 Keine Auswirkung 0%

   Spannende Innovation 0%

   Verwandte Story-Cluster & Quellen (Vektor-KI)

   Port 8095 Engine

   1 Quelle

   Stealing AI Reasoning Traces

   ↗ Analyse öffnen

   1 Quelle

   AIs as Modern Genies

   ↗ Analyse öffnen

   1 Quelle

   Bitcoin: KI-Hacker räumen Millionen ab! Wird Künstliche Intelligenz zum Problem? - ftd.de

   ↗ Analyse öffnen
   ◀ VORHERIGER BEITRAG 1 Min

   „Einwanderer sind Abschaum“: Was laut Facebook nun erlaubt sein soll

   2

   NÄCHSTER BEITRAG 1 Min

   Indiana Jones and the Great Circle im Test: VRAM-Bedarf überfordert viele (Laptop-)GPUs

   2 Weiterlesen ▶

   Tipp: Mit Pfeiltasten [ ← ] und [ → ] blättern