it-swarm.com.ru

Angular 2 Материальные динамические темы

Я создал свою собственную тему scss и объявил ее в angular-cli.json, все работает отлично.

Теперь мне нужно динамически менять тему.

Я попытался добавить вторую тему в angular-cli.json, но, как и ожидалось, она переопределяет первую.

Поэтому, возможно, одним из вариантов будет удалить объявление темы из angular-cli.json и иметь 2 компонента, каждый со своим собственным стилем scss, один переопределяющий другой, единственное отличие между ними - styleUrls.

Или есть другой рекомендуемый способ динамической загрузки scss?

13
Monica L

Начиная с Angular 5.1, именно так я добился динамических изменений темы.

* Правка: это все еще работает с Angular 7+

Рабочий редактируемый пример - https://stackblitz.com/edit/dynamic-material-theming

В моем файле theme.scss я включаю тему по умолчанию (обратите внимание, что она не хранится под именем класса - так Angular будет использовать ее по умолчанию), а затем светлая и темная тема.

theme.scss

@import '[email protected]/material/theming';
@include mat-core();

// Typography
$custom-typography: mat-typography-config(
  $font-family: Raleway,
  $headline: mat-typography-level(24px, 48px, 400),
  $body-1: mat-typography-level(16px, 24px, 400)
);
@include angular-material-typography($custom-typography);

// Default colors
$my-app-primary: mat-palette($mat-teal, 700, 100, 800);
$my-app-accent:  mat-palette($mat-teal, 700, 100, 800);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);
@include angular-material-theme($my-app-theme);

// Dark theme
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);

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

.dark-theme {
  @include angular-material-theme($dark-theme);
}

// Light theme
$light-primary: mat-palette($mat-grey, 200, 500, 300);
$light-accent: mat-palette($mat-brown, 200);
$light-warn: mat-palette($mat-deep-orange, 200);

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

.light-theme {
  @include angular-material-theme($light-theme)
}

В файле app.component я включаю OverlayContainer из @ angular/cdk/overlay. Вы можете найти документацию Angular для этого здесь https://material.angular.io/guide/theming ; хотя их реализация немного отличается. Обратите внимание, я также должен был включить OverlayModule в качестве импорта в app.module.

В моем файле app.component я также объявил @HostBinding('class') componentCssClass; как переменную, которая будет использоваться для установки темы в качестве класса.

app.component.ts

import {Component, HostBinding, OnInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Version } from './classes/version';
import { OverlayContainer} from '@angular/cdk/overlay';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {

  constructor(private http: HttpClient, public overlayContainer: OverlayContainer) {}

  title = 'app';
  version: Version;
  @HostBinding('class') componentCssClass;

  ngOnInit() {
    this.getVersion();
  }

  onSetTheme(theme) {
    this.overlayContainer.getContainerElement().classList.add(theme);
    this.componentCssClass = theme;
  }

  getVersion() {
    this.http.get<Version>('/api/version')
      .subscribe(data => {
        this.version = data;
      });
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';

import { OverlayModule} from '@angular/cdk/overlay';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
    OverlayModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Наконец, вызовите функцию onSetTheme с вашей точки зрения.

app.component.html

<button mat-raised-button color="primary" (click)="onSetTheme('default-theme')">Default</button>
<button mat-raised-button color="primary" (click)="onSetTheme('dark-theme')">Dark</button>
<button mat-raised-button color="primary" (click)="onSetTheme('light-theme')">Light</button>

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

21
K. Waite

Я нашел свой ответ в Изменить тему дизайна материала для Angular 2 . Хороший пример GIT можно найти по адресу https://github.com/jelbourn/material2-app .

Поэтому я использую один и тот же файл темы scss, но я добавил к нему новый класс для новой темы:

.m2app-dark {
  $dark-primary: md-palette($md-pink, 700, 500, 900);
  $dark-accent:  md-palette($md-blue-grey, A200, A100, A400);
  $dark-warn:    md-palette($md-deep-orange);
  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
  @include angular-material-theme($dark-theme);
}

Этот используется в html и активен или нет в зависимости от значения логического:

 <md-sidenav-layout [class.m2app-dark]="isDarkTheme">
5
Monica L

Вы можете переключаться между темами, добавляя или удаляя класс css (включая тему материала) в теге body во время выполнения в зависимости от текущей темы.

например шаг 1.

добавьте id в тег body в html-файле, чтобы вы могли подать элемент за элементом.

<body id="themeTag">
<app-root></app-root>
</body>

шаг 2.

создайте в своем scss-файле вторую тему, файл, который включен в angular.json в Angular 6 и .angular-cli.json в угловой версии ниже 6.

@include mat-core();
$primary: mat-palette($mat-blue);
$accent: mat-palette($mat-yellow);
$warn: mat-palette($mat-red);

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

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

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

.dark-theme { // css class for dark theme
  @include angular-material-theme($dark-theme);
}

шаг 3.

при нажатии кнопки изменить класс тега тела

toggleTheme(){
   this.isDarkTheme = !this.isDarkTheme;
   if(this.isDarkTheme){
     /* here themeTag is id of body tag and dark-theme is css class created in theme file */
     document.getElementById('themeTag').classList.add('dark-theme');
   }else{
     document.getElementById('themeTag').classList.remove('dark-theme');
   }
}
1
Ravi Sevta