Angular Material Runtime Theme

Runtime theming for Angular Material 3 applications. Generate Material Design 3 system color tokens from a single primary hex color and apply them without rebuilding stylesheets.

Built on Google's Material Color Utilities. Tokens are written as CSS custom properties using the light-dark() function so light and dark appearances stay in sync when you toggle color-scheme.

Requirements

• Angular 21+
• Angular Material 21+ with an M3 theme configured via mat.theme() (see Material theming guide)

Installation

npm install angular-material-runtime-theme
# or
pnpm add angular-material-runtime-theme

Setup

1. Configure Angular Material (build time)

In your global styles (for example styles.scss), include the Material theme mixin. The seed palette here is only a starting point — runtime tokens may override the generated CSS variables.

@use "@angular/material" as mat;

html {
  @include mat.theme(
    (
      color: (
        error: mat.$red-palette,
      ),
      typography: Roboto,
      density: 0,
    )
  );
}

body {
  color-scheme: light;
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
  font: var(--mat-sys-body-medium);
  margin: 0;
}

2. Apply a runtime primary color

Inject AngularMaterialRuntimeTheme and call setTheme() with a hex color:

import { Component, inject } from "@angular/core";
import { AngularMaterialRuntimeTheme } from "angular-material-runtime-theme";

@Component({
  selector: "app-root",
  template: `<router-outlet />`,
})
export class App {
  constructor() {
    inject(AngularMaterialRuntimeTheme).setTheme({ primary: "#6750A4" });
  }
}

applyTheme() sets --mat-sys-* variables on the root component host element.

3. Light and dark mode

Toggle color-scheme on a root element (typically document.body). The library stores each token as light-dark(<light>, <dark>), so the correct tone is picked automatically:

document.body.style.colorScheme = isDark ? "dark" : "light";

You can also use color-scheme: light dark in CSS to follow the user's system preference.

How it works

1. Convert the primary hex to an HCT color.
2. Build tonal palettes for primary, secondary, tertiary (analogous accent), neutral, and neutral variant.
3. For each token, map light and dark tone values to light-dark(<light>, <dark>) and assign them on the root host via element.style.setProperty('--mat-sys-…', value).

Angular Material components read these variables, so buttons, form fields, dialogs, and other M3 components pick up the new colors immediately.

Angular compatibility table

Angular	angular-material-runtime-theme
21, 22	0.x

Demo

Open the demo for a live showcase with a color picker, preset swatches, dark mode toggle, and many Material components.

License

MIT