Angular Material Theming

Q: What is a theme in Angular Material and how do you apply one to your app?

A theme defines the colors, typography, and density used across every Angular Material component in your app. You either use one of the prebuilt themes that ship with Angular Material, or define your own custom theme using Sass, then include it once in your project's global styles file.

Q: How would you define custom primary and accent colors for an Angular Material theme?

You define color palettes using Material's color definition functions, choosing specific colors for your primary and accent roles, then pass these into your theme definition, which Angular Material uses to generate consistent colors across every component automatically.

Q: How would you implement a light and dark mode toggle using Angular Material theming?

You define two separate theme classes, one for light mode and one for dark mode, and toggle a CSS class on your app's root element based on the user's chosen preference. Angular Material's components automatically pick up the correct colors based on whichever theme class is currently active.

Q: What is theme density in Angular Material, and how does adjusting it affect the size of components?

Density controls how compact or spacious Material components appear, letting you shrink padding and sizing across buttons, form fields, and other components uniformly, which is useful for data heavy applications like admin dashboards that need to fit more information on screen at once.

Q: How does Angular Material's newer Material 3 design system differ from the earlier Material 2 theming approach?

Material 3, Google's newer design system, introduces a more flexible color system based on a single seed color that automatically generates a full, harmonious palette, along with updated typography and component shapes, replacing the earlier approach of manually choosing separate primary and accent palettes.

5 questions found

What is a theme in Angular Material and how do you apply one to your app?

Beginner

A theme defines the colors, typography, and density used across every Angular Material component in your app. You either use one of the prebuilt themes that ship with Angular Material, or define your own custom theme using Sass, then include it once in your project's global styles file.

// styles.scss
@use '@angular/material' as mat;

$my-theme: mat.define-theme();

html {
  @include mat.all-component-themes($my-theme);
}

Real-world example A company applies a consistent brand color theme across their entire Angular Material based dashboard by defining one custom theme file, instantly changing the color of every button, input, and dialog throughout the app.

Common follow-ups: What is the difference between using a prebuilt theme and defining a custom one?;How do you support both a light and dark theme in the same app?

Angular Material & UI Component Libraries;Build Environments & Deployment

How would you define custom primary and accent colors for an Angular Material theme?

Intermediate

You define color palettes using Material's color definition functions, choosing specific colors for your primary and accent roles, then pass these into your theme definition, which Angular Material uses to generate consistent colors across every component automatically.

$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette);

$my-theme: mat.define-light-theme((
  color: (primary: $my-primary, accent: $my-accent)
));

Real-world example A travel booking app defines a custom blue and orange theme matching their brand colors, and every Material button, checkbox, and progress bar throughout the app automatically reflects those exact brand colors.

Common follow-ups: How do you create a custom color palette instead of using one of the predefined ones?;What is the difference between the primary, accent, and warn color roles?

Angular Material & UI Component Libraries;Angular Style Guide & Best Practices

How would you implement a light and dark mode toggle using Angular Material theming?

Intermediate

You define two separate theme classes, one for light mode and one for dark mode, and toggle a CSS class on your app's root element based on the user's chosen preference. Angular Material's components automatically pick up the correct colors based on whichever theme class is currently active.

// styles.scss
.light-theme { @include mat.all-component-colors($light-theme); }
.dark-theme { @include mat.all-component-colors($dark-theme); }

// In your component
toggleDarkMode() {
  document.body.classList.toggle('dark-theme');
}

Real-world example A productivity app lets users switch between light and dark mode with a single toggle button, instantly updating the colors of every Angular Material component on the screen without reloading the page.

Common follow-ups: How would you remember the user's chosen theme preference across visits?;How do you also detect and respect the user's operating system's dark mode setting automatically?

State Management;Angular CDK (Component Dev Kit)

What is theme density in Angular Material, and how does adjusting it affect the size of components?

Advanced

Density controls how compact or spacious Material components appear, letting you shrink padding and sizing across buttons, form fields, and other components uniformly, which is useful for data heavy applications like admin dashboards that need to fit more information on screen at once.

$my-theme: mat.define-theme((
  density: (scale: -2)
));

// A negative scale value makes components more compact

Real-world example An internal analytics dashboard applies a denser theme setting across the whole app, letting data tables and forms fit noticeably more content on screen compared to the default, more spacious Material design.

Common follow-ups: What is the valid range of density scale values Angular Material supports?;Does adjusting density affect accessibility, such as touch target sizes on mobile devices?

Angular Material & UI Component Libraries;Accessibility (a11y) in Angular

How does Angular Material's newer Material 3 design system differ from the earlier Material 2 theming approach?

Beginner

Material 3, Google's newer design system, introduces a more flexible color system based on a single seed color that automatically generates a full, harmonious palette, along with updated typography and component shapes, replacing the earlier approach of manually choosing separate primary and accent palettes.

$my-theme: mat.define-theme((
  color: (theme-type: light, primary: mat.$violet-palette)
));

// Material 3 generates a complete, harmonious palette from this single seed color

Real-world example A team upgrading their Angular Material app to Material 3 replaces their manually chosen primary and accent palette definitions with a single seed color, letting the framework automatically generate a cohesive, updated look.

Common follow-ups: What visual differences will users actually notice after migrating to Material 3?;Is migrating an existing app from Material 2 to Material 3 theming considered a big undertaking?

Angular Material & UI Component Libraries;Build Environments & Deployment