Here is a basic example to set up theming for Angular Material, with both light and dark themes that respect prefers-color-scheme.

@use "@angular/material" as mat;
@use "@s-libs/ng-mat-core/theming";

@include theming.full-theming(
  $dark-palettes: (
    primary: mat.define-palette(mat.$light-blue-palette),
    accent: mat.define-palette(mat.$orange-palette, A200, A100, A400),
  ),
  $light-palettes: (
    primary: mat.define-palette(mat.$blue-palette),
    accent: mat.define-palette(mat.$orange-palette, A400, A200, A700),
  )
);

If you only want one theme, that is possible.

@use "@angular/material" as mat;
@use "@s-libs/ng-mat-core/theming";

@include mat.core(); // needed when you don't use the `full-theming` mixin
@include theming.light-theme(
  (
    light-palettes: (
      primary: mat.define-palette(mat.$blue-palette),
      accent: mat.define-palette(mat.$orange-palette, A400, A200, A700),
    ),
  )
);

Here is a more complex example. It uses the same colors for light and dark themes, and adds a third high-contrast theme. By default, it respects prefers-color-scheme to choose between light and dark. But it allows you to force a specific theme when you add a class to any element (like body), so that you can implement a theme chooser.

This also demonstrates restricting the emitted styles to only the components you include in your app.

@use "@angular/material" as mat;
@use "@s-libs/ng-mat-core/theming";

$main-palettes: (
  primary: mat.define-palette(mat.$blue-grey-palette, 600, 300, 800, 500),
  accent: mat.define-palette(mat.$brown-palette, A400, A200, A700),
);
$high-contrast-palettes: (
  primary: mat.define-palette(mat.$blue-grey-palette, 400, 400),
  accent: mat.define-palette(mat.$orange-palette, 500),
);
$config: (
  dark-palettes: $main-palettes,
  light-palettes: $main-palettes,
  contrast-palettes: $high-contrast-palettes,
  modules: (
    "core",
    "button",
    "card",
    "checkbox",
    "form-field",
    "input",
    "list",
  ),
);

@include theming.full-theming($config...);
.force-light-theme {
  @include theming.light-theme-colors($config);
}
.force-dark-theme {
  @include theming.dark-theme-colors($config);
}
.force-contrast-theme {
  @include theming.light-theme-colors($config, "contrast-palettes");
}

Theming

mixins

dark-theme-colors

@mixin dark-theme-colors($config, $palette-key: "dark-palettes") { ... }

Description

Includes just the colors for a dark theme.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$config`	The config object used for multiple mixins in this library. See the example in `mixin-full-theming()` for a description of all its options.	`Map`	— none
`$palette-key`	Which color to use from `$config`.	`String`	`"dark-palettes"`

light-theme-colors

@mixin light-theme-colors($config, $palette-key: "light-palettes") { ... }

Description

Includes just the colors for a light theme.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$config`	The config object used for multiple mixins in this library. See the example in `mixin-full-theming()` for a description of all its options.	`Map`	— none
`$palette-key`	Which color to use from `$config`.	`String`	`"light-palettes"`

full-theming

@mixin full-theming($config) { ... }

Description

A convenience mixin to set up all Angular Material theming for your app, including separate light and dark themes that respect prefers-color-scheme.

Important: This even does @include mat.core() for you, so do not include it yourself.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$config`	The config object used for multiple mixins in this library. See the example for a description of all its options.	`Map`	— none

Example

$config: (
  // The `color` value in the map passed to `mat.generate-dark-theme()`.
  // Required when defining a dark theme unless you call `dark-theme()`
  // directly and pass it a different `$palette-key`.
  dark-palettes: (
    primary: mat.define-palette(mat.$light-blue-palette),
    accent: mat.define-palette(mat.$orange-palette, A200, A100, A400),
  ),

  // The `color` value in the map passed to `mat.generate-light-theme()`.
  // Required when defining a light theme unless you call `light-theme()`
  // directly and pass it a different `$palette-key`.
  light-palettes: (
    primary: mat.define-palette(mat.$blue-palette),
    accent: mat.define-palette(mat.$orange-palette, A400, A200, A700),
  ),

  // The `typography` value in the map passed to `mat.generate-*-theme()`.
  // Defaults to `mat.define-typography-config()`. Pass `null` to omit
  // typography from your theming.
  typography: mat.define-typography-config("sans-serif"),

  // The `density` value in the map passed to `mat.generate-*-theme()`.
  // Defaults to `0`.
  density: -1,

  // The Angular Material modules to include themes/colors for.
  // Defaults to all modules.
  modules: (
    "core",
    "button",
    "card",
    "checkbox",
    "form-field",
    "input",
    "list",
  ),
);

dark-theme

@mixin dark-theme($config, $palette-key: "dark-palettes") { ... }

Description

Includes a dark theme for your app. This defines colors, typography, and density.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$config`	The config object used for multiple mixins in this library. See the example in `mixin-full-theming()` for a description of all its options.	`Map`	— none
`$palette-key`	Which color to use from `$config`.	`String`	`"dark-palettes"`

light-theme

@mixin light-theme($config, $palette-key: "light-palettes") { ... }

Description

Includes a light theme for your app. This defines colors, typography, and density.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$config`	The config object used for multiple mixins in this library. See the example in `mixin-full-theming()` for a description of all its options.	`Map`	— none
`$palette-key`	Which color to use from `$config`.	`String`	`"light-palettes"`