Angular Material 18：如何更改背景颜色？

Question

我认为这是一个非常常见的问题，尽管我无法找到解决方案。

我定义了一个深色和一个浅色主题，例如：

styles.scss

@use "@angular/material" as mat;

// Include the common styles for Angular Material.
@include mat.core();

// Define the theme object.
$light-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: -5,
    ),
  )
);

$dark-theme: mat.define-theme(
  (
    color: (
      theme-type: dark,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: -5,
    ),
  )
);

// Include theme styles for core and each component used in your app.
html,
body {
  @include mat.all-component-themes($light-theme);

  .dark-theme {
    // This mixin only generates the color styles now.
    @include mat.all-component-colors($dark-theme);
  }

  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

如何将背景颜色更改为浅色主题的一种颜色和深色主题的一种颜色？ （浅色主题默认为纯黑色，深色主题默认为纯白色）

Answer 1

定义主题中的背景颜色

    $light-theme: mat.define-light-theme((
  color: (
    primary: mat.$azure-palette,
    tertiary: mat.$blue-palette,
    background: (
      background: mat.$white,
      status-bar: mat.$grey-200,
      app-bar: mat.$white,
      hover: rgba(mat.$black, 0.04),
      card: mat.$white,
      dialog: mat.$white,
      disabled-button: rgba(mat.$black, 0.12),
      raised-button: mat.$white,
      focused-button: rgba(mat.$black, 0.12),
      selected-button: mat.$grey-300,
      selected-disabled-button: mat.$grey-400,
      disabled-button-toggle: mat.$grey-200,
      unselected-chip: rgba(mat.$black, 0.12),
      disabled-list-option: rgba(mat.$black, 0.12),
    ),
  ),
  density: -2,
));

$dark-theme: mat.define-dark-theme((
  color: (
    primary: mat.$azure-palette,
    tertiary: mat.$blue-palette,
    background: (
      background: mat.$dark-grey,
      status-bar: mat.$grey-800,
      app-bar: mat.$grey-900,
      hover: rgba(mat.$white, 0.04),
      card: mat.$grey-800,
      dialog: mat.$grey-900,
      disabled-button: rgba(mat.$white, 0.12),
      raised-button: mat.$grey-800,
      focused-button: rgba(mat.$white, 0.12),
      selected-button: mat.$grey-700,
      selected-disabled-button: mat.$grey-600,
      disabled-button-toggle: mat.$grey-800,
      unselected-chip: rgba(mat.$white, 0.12),
      disabled-list-option: rgba(mat.$white, 0.12),
    ),
  ),
  density: -2,
));

根据活动主题应用背景颜色

html, body {
  background-color: mat.get-color-from-palette($light-theme-background, background);
  margin: 0;
  height: 100%;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.dark-theme {
  background-color: mat.get-color-from-palette($dark-theme-background, background);
}

添加切换主题功能

    toggleTheme(isDarkTheme: boolean) {

    document.body.classList.toggle('dark-theme', isDarkTheme);
  }