How to change Angular Material theme color dynamically?

Use the MaterialCssVarsService to set colors at runtime. Inject the service and call methods like setPrimaryColor() with hex values, as shown in the component example. This updates CSS variables instantly without reloading.

angular-material-css-vars vs Angular Material built-in theming?

This library adds dynamic theming via CSS variables for runtime changes, while built-in theming is static. It's better for user-customizable themes but adds setup complexity and lacks M3 support.

How to implement dark mode with angular-material-css-vars?

Call setDarkTheme(true) on the MaterialCssVarsService. The library toggles a body class for dark theme, and you can customize selectors via SCSS variables like $dark-theme-selector during initialization.

Does angular-material-css-vars work with Angular Material M3?

No, it only supports M2. The README links to an issue about M3 support being unavailable, so avoid it if you're using Angular Material v18 or later with M3 themes.

How to set up angular-material-css-vars in standalone Angular?

In standalone apps, use provideMaterialCssVars() in your app.config.ts providers, passing options like primary color. This mirrors the module setup but uses Angular's standalone API, as detailed in the README.

What are the utility mixins for in angular-material-css-vars?

They help integrate theme colors into custom SCSS styles. For instance, use mat-css-color-and-contrast(300) to apply color and contrast together, streamlining styling beyond Angular Material components.

angular-material-css-vars — Dynamic Angular Material Styling

What is angular-material-css-vars?

angular-material-css-vars is a library that enables dynamic theming of Angular Material components using CSS custom properties. It solves the limitation of Angular Material's static theming by allowing developers to change theme colors, contrast, and density at runtime. This provides greater flexibility for applications requiring live theme adjustments.

Target Audience

Angular developers using Angular Material (M2) who need to implement dynamic, runtime-adjustable themes in their applications. It is particularly useful for those building applications with user-customizable themes or requiring theme switching (e.g., light/dark mode).

Value Proposition

Developers choose this library because it bridges Angular Material's static theming with the dynamic capabilities of CSS variables, offering runtime theme control without sacrificing compatibility. Its unique selling point is the ability to programmatically adjust colors, contrast, and density via a service while exposing design tokens as CSS custom properties for custom styling.

Little library to use css variables with @angular/material

Use Cases

Best For

Implementing user-customizable theme colors (primary, accent, warn) in real-time within Angular Material applications.
Building applications that require dynamic light/dark theme toggling with automatic contrast adjustment for accessibility.
Creating Angular Material-based projects where theme colors need to be changed programmatically via a service at runtime.
Integrating CSS custom properties with Angular Material's design tokens to enable custom styling beyond the default theming system.
Adjusting global density levels and typography in Angular Material using SCSS mixins and configuration.
Supporting legacy Angular Material components (pre-MDC) via the separate legacy package, when migrating from older versions.

Not Ideal For

Projects using Angular Material v18 or later that require the modern M3 theme system
Applications with static, unchanging themes where the setup overhead isn't justified
Teams that prefer Angular Material's default theming without modifying core stylesheet imports
Server-side rendered apps where runtime CSS variable changes might cause visual flicker

Pros & Cons

Pros

Dynamic Runtime Theming

Enables changing theme colors, contrast, and density at runtime via MaterialCssVarsService, allowing live adjustments without page reloads, as demonstrated in the setup examples.

CSS Variable Integration

Exposes Angular Material's design tokens as CSS custom properties, providing flexibility for custom styling with utility mixins like mat-css-color-primary for SCSS access.

Auto Contrast Accessibility

Automatically adjusts contrast colors based on thresholds via setAutoContrastEnabled, ensuring WCAG compliance without manual calculations, with options for fine-tuning.

Flexible Configuration Options

Supports custom typography, density levels, and dark/light theme selectors through SCSS mixins and initialization parameters, as shown in the font config and density sections.

Cons

No M3 Theme Support

The README explicitly states it only supports Angular Material M2, not the stable M3 theme introduced in v18, limiting use in newer projects without workarounds.

Complex Initial Setup

Requires removing Angular Material's core mixin (@include mat.core()) and replacing it with library code, which can break existing setups and increase configuration errors.

Tight Angular Version Coupling

The compatibility table shows strict version matching with Angular, leading to frequent breaking changes and maintenance overhead during upgrades.

Legacy Component Fragmentation

For pre-MDC components, a separate legacy package is needed, adding complexity and potential inconsistencies in projects with mixed component versions.

Frequently Asked Questions

What is angular-material-css-vars?

Target Audience

Value Proposition

Use Cases

Best For

Implementing user-customizable theme colors (primary, accent, warn) in real-time within Angular Material applications.
Building applications that require dynamic light/dark theme toggling with automatic contrast adjustment for accessibility.
Creating Angular Material-based projects where theme colors need to be changed programmatically via a service at runtime.
Integrating CSS custom properties with Angular Material's design tokens to enable custom styling beyond the default theming system.
Adjusting global density levels and typography in Angular Material using SCSS mixins and configuration.
Supporting legacy Angular Material components (pre-MDC) via the separate legacy package, when migrating from older versions.

Not Ideal For

Projects using Angular Material v18 or later that require the modern M3 theme system
Applications with static, unchanging themes where the setup overhead isn't justified
Teams that prefer Angular Material's default theming without modifying core stylesheet imports
Server-side rendered apps where runtime CSS variable changes might cause visual flicker

Pros & Cons

Pros

Dynamic Runtime Theming

Enables changing theme colors, contrast, and density at runtime via MaterialCssVarsService, allowing live adjustments without page reloads, as demonstrated in the setup examples.

CSS Variable Integration

Exposes Angular Material's design tokens as CSS custom properties, providing flexibility for custom styling with utility mixins like mat-css-color-primary for SCSS access.

Auto Contrast Accessibility

Automatically adjusts contrast colors based on thresholds via setAutoContrastEnabled, ensuring WCAG compliance without manual calculations, with options for fine-tuning.

Flexible Configuration Options

Supports custom typography, density levels, and dark/light theme selectors through SCSS mixins and initialization parameters, as shown in the font config and density sections.

Cons

No M3 Theme Support

The README explicitly states it only supports Angular Material M2, not the stable M3 theme introduced in v18, limiting use in newer projects without workarounds.

Complex Initial Setup

Requires removing Angular Material's core mixin (@include mat.core()) and replacing it with library code, which can break existing setups and increase configuration errors.

Tight Angular Version Coupling

The compatibility table shows strict version matching with Angular, leading to frequent breaking changes and maintenance overhead during upgrades.

Legacy Component Fragmentation

For pre-MDC components, a separate legacy package is needed, adding complexity and potential inconsistencies in projects with mixed component versions.

Frequently Asked Questions

angular-material-css-vars

What is angular-material-css-vars?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

angular-material-css-vars

What is angular-material-css-vars?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?