Angular material theme override

Question

I found in the _theming.scss file

$mat-light-theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-grey, 50),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
  unselected-chip: map_get($mat-grey, 300),
  disabled-list-option: map_get($mat-grey, 200),
);

I would like to change the background and other components to be different colors such as white. Does anyone know how to configure these settings or override them? Adding styles.css with background white does not work. Any other setting seems to always be overridden by this _theming.scss on compilation

Have a look here https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html — David, Mar 10 '18 at 12:00

score 0 · Answer 1 · answered Jan 28 '20 at 15:24

The solution is create a custom color palette and apply that palette to the background palette.

example:

/* Color Palette */
$your-palette: (
  50: #E1ECF5,
  100: #B5CEE5,
  200: #84AED4,
  300: #067fc3,
  400: #018FD0,
  500: #085DA9,
  600: #0755A2,
  700: #064B98,
  800: #04418F,
  900: #02307E,
  A100: #ACC4FF,
  A200: #79A0FF,
  A400: #467CFF,
  A700: #2C6AFF,
  contrast: (
    50: #ffffff,
    100: #ffffff,
    200: #ffffff,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #ffffff,
    A200: #ffffff,
    A400: #ffffff,
    A700: #ffffff,
  )
);

$mat-light-theme-background: (
  status-bar:               map_get($your-palette, 300),
  app-bar:                  map_get($your-palette, 100),
  background:               map_get($your-palette, 50),
  hover:                    rgba(black, 0.04),
  card:                     map-get(map-get($your-palette, contrast), 50),
  dialog:                   map-get(map-get($your-palette, contrast), 50),
  disabled-button:          rgba(black, 0.12),
  raised-button:            map-get(map-get($your-palette, contrast), 50),
  focused-button:           map_get($your-palette, 500),
  selected-button:          map_get($your-palette, 300),
  selected-disabled-button: map_get($your-palette, 400),
  disabled-button-toggle:   map_get($your-palette, 200),
  unselected-chip:          map_get($your-palette, 300),
  disabled-list-option:     map_get($your-palette, 200),
);

Angular material theme override

1 Answers1