Угловая материальная тема

Question

Я нашел в файле _theming.scss

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

Я хотел бы изменить цвет фона и других компонентов, например, на белый. Кто-нибудь знает, как настроить эти параметры или переопределить их? Добавление styles.css с белым фоном не работает. Любая другая настройка, кажется, всегда переопределяется этим _theming.scss при компиляции

Answer 1

Решение состоит в том, чтобы создать собственную цветовую палитру и применить ее к палитре фона.

пример:

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