Docs / Angular Material dark mode and CSS variable theming

Angular Material dark mode and CSS variable theming

The library is themed with CSS variables. EasyThemeService switches between light, dark and the operating system preference without reloading the page.

Switch the theme

import { inject } from '@angular/core';
import { EasyThemeService } from 'easy-mat-ui-ng20';

const theme = inject(EasyThemeService);
theme.setTheme('dark');   // 'light' | 'dark' | 'system'
theme.toggle();
theme.theme();            // the applied theme, as a signal

The service does nothing until you call it. In dark mode it adds the dark-theme class to body and sets a data-easy-theme attribute and the CSS color-scheme on html. Pass a storageKey through EASY_THEME_OPTIONS if you want the choice remembered.

Customize with CSS variables

:root {
  --color-primary-blue: #1f6f8b;
  --text-color: #0f172a;
  --card-bg: #ffffff;
  --border-color: #e2e8f0;
  --radius-md: 10px;
}
body.dark-theme {
  --card-bg: #1e293b;
  --text-color: #f8fafc;
}

Other variables: --color-success, --color-warning, --color-danger, --color-info, --focus-ring, --disabled-bg, --shadow-sm, --shadow-md, --shadow-lg, --row-selected-bg and --table-header-bg.

Open the live demo or read the source on GitHub.