Article

Change Angular Material Theme Background

AOAnonymous One· Feb 9, 20231 min read
  • #Angular
  • #Angular Material
  • #Angular Material Theme

Change Angular Material Theme Background

Update your Angular Material Theme background to conform to your web applications design.

@use '@angular/material' as mat;

/* IMPORT BELOW ONLY ONCE */
@include mat.core();

@import 'src/assets/scss/partials/colors';
/* Light Theme */
$light-primary: mat.define-palette($aj-primary-palette, 600, 100, 900);
$light-accent: mat.define-palette($aj-secondary-palette, 600, 100, 900);

$light-theme: mat.define-light-theme((
  color: (
    primary: $light-primary,
    accent: $light-accent
  ),
  // Only include `typography` and `density` in the default theme.
  typography: $aj-typography,
  density: 0
));

$light-palette-color: map-get($light-theme, color);
$light-background: map-get($light-palette-color, background);
$light-background: map-merge($light-background, (background: var(--md-sys-color-background-light)));
$light-palette-color: map-merge($light-palette-color, (background: $light-background));
$light-theme: map-merge($light-theme, (color: $light-palette-color));

0 Comments

Sign in to join the conversation.

Search

Jump to a page, story or project