css - Angular Material 主题覆盖

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