Использование цвета, определенного темой, в таблицах стилей - Angular Материал - PullRequest
Новая
       27

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

0 голосов
/ 13 июля 2020

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

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

Это мой файл theme.s css на данный момент: 

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

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

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

MyComponent.scss

:host {
    background-color: primary;
}

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

1 Ответ

1 голос
/ 13 июля 2020

Я создал новый файл 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])
    );
  }
}

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

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

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

...