Использование цвета, определенного темой, в таблицах стилей - угловой материал

У меня есть 2 настраиваемые темы для моего приложения, которые я могу переключать уже во время выполнения. Таким образом, они определяют в файле theme.scss цвета для основного, акцентного и предупредительного. Таким образом, я могу использовать эти цвета темы для стандартных компонентов материала, которые принимают такой цвет в HTML.

У меня вопрос: как я могу использовать эти цвета в файлах .scss моих пользовательских компонентов? Например, мой цвет шрифта или цвет фона должен измениться при изменении темы?

На данный момент это мой файл theme.scss:

@import "~@angular/material/theming";
@include mat-core();

$primary: mat-palette($mat-yellow);
$accent: mat-palette($mat-pink);
$warn: mat-palette($mat-red);

$light-theme: mat-light-theme(
  $primary,
  $accent,
  $warn
);

@include angular-material-theme($light-theme);

$dark-primary: mat-palette($mat-blue);
$dark-accent: mat-palette($mat-green);
$dark-warn: mat-palette($mat-orange);
$dark-theme: mat-dark-theme(
    $dark-primary,
    $dark-accent,
    $dark-warn
);
.dark-theme {
  color: $light-primary-text;
  @include angular-material-theme($dark-theme);
}

Класс css .dark-theme накладывается на компонент приложения во время выполнения, чтобы переключить тему.

Но как мне теперь сделать что-то вроде:

MyComponent.scss

:host {
    background-color: primary;
}

Был бы очень признателен за любую помощь в этом, спасибо! :)


angular sass angular-material theming
person Andreas Rainer    schedule 12.07.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

я создал новый файл theme.service.ts. в этом файле я определяю ключи моей темы, а также удерживаю свои функции для выключения темы. здесь вы также можете добавить больше тем и их функций переключения

export const redTheme= {
  primary: '#f00',
  primaryDark: '#aa0000',
  secondary: '#fff',
  background: '#000'
};

@Injectable({
  providedIn: 'root'
})
export class ThemeService {    
  toggleRed() {
    this.setTheme(redTheme);
  }
  setTheme(theme: {}) {
    Object.keys(theme).forEach(k =>
      document.documentElement.style.setProperty(`--${k}`, theme[k])
    );
  }
}

теперь в вашем основном файле styles.scss вы добавляете ключи, которые будут отключены в верхней части файла. убедитесь, что у вас одинаковые имена ключей.

// styles.scss
@import './app/utils/material/material-custom-theme';
@import '~@angular/material/theming';
@include angular-material-typography($custom-typography);
:root {
  // default theme
  --primary: #00f;
  --primaryDark: #0000bb;
  --secondary: #0f0;
  --background: #000;
}

после этого вы можете импортировать theme.service в свой компонент, где вы переключаете тему (я делаю это в моем sidenavcomponent при нажатии кнопки). Чтобы использовать цвета этой темы в ваших пользовательских компонентах, вам необходимо использовать имена переменных ключей для цвета, который вы хотите использовать. например вот так

// example.component.scss
  .example-custom-class {
    background: var(--primary);
    color: var(--secondary);
    box-shadow: 10px var(--primaryDark);
  }

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

person Fiehra    schedule 12.07.2020
comment
Итак, если я правильно понял, вы в основном устанавливаете значение переменных scss в своем theme.service? - person Andreas Rainer; 13.07.2020
comment
да, я экспортирую константу для каждой темы, которую хочу реализовать в моем файле theme.service. в моем основном файле styles.scss я также устанавливаю имена значений ключа. эти ключевые значения заменяются ключевыми значениями темы, на которую я переключаюсь. - person Fiehra; 13.07.2020