角度材質主題覆蓋

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