Customize Theme | Documentation / Elementar Admin

Install prebuilt theme

There are 4 prebuilt themes by default: default, cyan-orange, magenta-violet, rose-red.

To add a pre-installed theme, simply change @use '@elementar-ui/components/styles/themes/default'; to @use '@elementar-ui/components/styles/themes/magenta-violet';

Create your own theme

Generate a new angular material theme with this command:

ng g @elementar/angular:theme my-theme

Then add to styles.scss:

@use './my-theme' as themeColors;
@use '@angular/material' as mat;
@use "@elementar-ui/components/styles/common" with (
  $m3-light-theme: mat.define-theme((
    color: (
      theme-type: light,
      primary: themeColors.$primary-palette,
      tertiary: themeColors.$tertiary-palette,
      use-system-variables: true,
      system-variables-prefix: sys,
    ),
    typography: (
      brand-family: 'var(--font-sans)',
      plain-family: 'var(--font-sans)',
      use-system-variables: true,
      system-variables-prefix: sys,
    ),
    density: (
      scale: 0,
    ),
  )),
  $m3-dark-theme: mat.define-theme((
    color: (
      theme-type: dark,
      primary: themeColors.$primary-palette,
      tertiary: themeColors.$tertiary-palette,
      use-system-variables: true,
      system-variables-prefix: sys,
    ),
    typography: (
      brand-family: 'var(--font-sans)',
      plain-family: 'var(--font-sans)',
      use-system-variables: true,
      system-variables-prefix: sys,
    ),
    density: (
      scale: 0,
    ),
  ))
);
@include mat.elevation-classes();
@include mat.app-background();

./my-theme - a path to generated angular material theme.