在角度材料 5 中切换主题 [英] Switch themes in angular material 5
问题描述
我一直在阅读一些关于此的文章，但它们似乎在几个不同的方面存在冲突.我希望为最新版本重新创建与 angular material 文档站点 相同的主题切换角材料[5.0.0-rc0]
I been reading a few articles on this but they seem to be conflicting in several different ways. I am hoping to re-create the same theme switching as the angular material documentation site for the latest version of angular material [5.0.0-rc0]
我有两个自定义主题，这是 custom-theme.scss 和 light-custom-theme.scss 几乎相同，没有 mat-dark-theme
I have two custom themes, this is custom-theme.scss and there is light-custom-theme.scss which is nearly identical, sans the mat-dark-theme
@import '~@angular/material/theming';
$custom-theme-primary: mat-palette($mat-blue);
$custom-theme-accent: mat-palette($mat-orange, A200, A100, A400);
$custom-theme-warn: mat-palette($mat-red);
$custom-theme: mat-dark-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
@include angular-material-theme($custom-theme);
我的styles.scss看起来像这样
My styles.scss looks like so
@import '~@angular/material/theming';
@include mat-core();
@import 'custom-theme.scss';
@import 'light-custom-theme.scss';
.custom-theme {
@include angular-material-theme($custom-theme);
}
.light-custom-theme {
@include angular-material-theme($light-custom-theme);
}
然后在 index.html <body class="mat-app-background">
And then it's called in the index.html <body class="mat-app-background">
当我做一个主题时，一切正常.但我正在尝试在两者之间切换.将两个主题添加到 angular-cli.json 中，light-custom-theme 接管
Everything works fine when I do one theme. But I am trying to switch between the two. Adding both themes into angular-cli.json, the light-custom-theme takes over
"styles": [
"styles.scss",
"custom-theme.scss",
"light-custom-theme.scss"
],
我在我的一个组件中放置了以下代码来处理切换主题
I have the following code in place in one of my components to handle toggling themes
toggleTheme(): void {
if (this.overlay.classList.contains("custom-theme")) {
this.overlay.classList.remove("custom-theme");
this.overlay.classList.add("light-custom-theme");
} else if (this.overlay.classList.contains("light-custom-theme")) {
this.overlay.classList.remove("light-custom-theme");
this.overlay.classList.add("custom-theme");
} else {
this.overlay.classList.add("light-custom-theme");
}
}
但是无论何时运行，主题都保持不变.值得一提的是，overlay.classList 中的位置 0 处已经有一个cdk-overlay-container"对象
But whenever it runs the theme remains the same. For what it is worth, there is already a "cdk-overlay-container" object at position 0 in overlay.classList
0:"cdk-overlay-container"
1:"custom-theme"
length:2
value:"cdk-overlay-container custom-theme"
我不确定如何调试它，因为角度材料文档并没有给我太多的工作，任何帮助将不胜感激！
I am unsure how to debug this as the angular material documentation doesn't give me too much to work with, any help would be appreciative!
谢谢！
推荐答案
这是 Angular 5.1+/Angular Material 5.0+ 的替代解决方案.
Here's an alternative solution for Angular 5.1+/Angular Material 5.0+.
*如前所述，这在 Angular 7+ 中仍然有效.
* As noted, this still works in Angular 7+.
工作可编辑示例 - https://stackblitz.com/edit/dynamic-material-theming
在 theme.scss 中，包含一个默认主题(注意它没有保留在类名下 - 这样 Angular 将使用它作为默认主题)，然后是一个明暗主题.
In theme.scss, include a default theme(notice it isn't kept under a class name - this is so Angular will use it as the default), and then a light and dark theme.
theme.scss
@import '~@angular/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 文件中，包含来自@angular/cdk/overlay 的 OverlayContainer.你可以在这里找到 Angular 的文档https://material.angular.io/guide/theming;虽然它们的实现有点不同.请注意，我还必须在 app.module 中包含 OverlayModule 作为导入.
In the app.component file, include OverlayContainer from @angular/cdk/overlay. You can find Angular's documentation for this here https://material.angular.io/guide/theming; though their implementation is a little different. Please note, I also had to include OverlayModule as an import in app.module as well.
在我的 app.component 文件中，我还将 @HostBinding('class') componentCssClass; 声明为一个变量，用于将主题设置为一个类.
In my app.component file, I also declared @HostBinding('class') componentCssClass; as a variable, which will be used to set the theme as a class.
app.component.ts
import {Component, HostBinding } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { OverlayContainer} from '@angular/cdk/overlay';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
constructor(public overlayContainer: OverlayContainer) {}
@HostBinding('class') componentCssClass;
onSetTheme(theme) {
this.overlayContainer.getContainerElement().classList.add(theme);
this.componentCssClass = theme;
}
}
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 函数.
Finally, call the onSetTheme function from your view.
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>
您可能会考虑使用 observable 以使功能更加动态.
You might consider using an observable so that the functionality would be more dynamic.
这篇关于在角度材料 5 中切换主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
