Angular Material 18: как изменить цвет фона?

Я думаю, что это очень распространенная проблема, хотя мне не удалось найти решение.

У меня есть темная и светлая темы, такие как:

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;
}

как изменить цвет фона компонентов Angular Material: один цвет для светлой и один цвет для темной темы? (по умолчанию он простой черный для светлой темы и простой белый для темной темы)

angular sass angular-material

14.08.2024 18:25

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Определите цвета фона в своих темах

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

[ОШИБКА] $config.color имеет неожиданные свойства. Допустимые свойства: тип темы, первичный, третичный, переменные системы использования, префикс системных переменных. Найдено: фон

— 15.08.2024 09:44

14.08.2024 18:39

Ответ принят как подходящий

Добавьте класс mat-app-background к элементу <body> в index.html (см. документацию ):

<body class = "mat-app-background">
  <!-- content -->
</body>

При этом будут применены цвета фона по умолчанию #fafafa в светлой теме и #303030 в темной теме. Если вы хотите переопределить эти цвета, вы можете установить новое значение для переменной --mat-app-background-color в вашем styles.scss:

body {
  --mat-app-background-color: #eee;
  
  .dark-theme {
    --mat-app-background-color: #111;
  }
}

Чтобы переопределить цвета фона компонентов, вы можете установить значения для соответствующих переменных CSS:

body {
  --mdc-outlined-card-outline-color: #eee;
  --mat-table-background-color: #eee;
  // this is not a complete list, add more variables as needed
}

Я настоятельно советую не использовать всегда один и тот же цвет фона для всех компонентов Material: они намеренно имеют разные цвета фона, чтобы визуально разделить их.

Спасибо, но это не меняет цвет фона компонентов углового материала.

— 15.08.2024 09:48

@Victor обновил мой ответ.

— 15.08.2024 10:05

15.08.2024 08:42