角度材质主题覆盖

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

Answer 1

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),
);