我一直在阅读一些关于此的文章,但它们似乎在几种不同的方式上存在冲突.我希望重新创建与最新版角度材料[5.0.0-rc0] 的角度材料文档站点相同的主题切换
我有两个自定义主题,这是custom-theme.scss,并且有light-custom-theme.scss几乎相同,没有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看起来像这样
@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中调用它
当我做一个主题时,一切正常.但我试图在两者之间切换.将两个主题添加到angular-cli.json中,light-custom-theme接管
"styles": [
"styles.scss",
"custom-theme.scss",
"light-custom-theme.scss"
],
我在我的一个组件中有以下代码来处理切换主题
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"对象
0:"cdk-overlay-container"
1:"custom-theme"
length:2
value:"cdk-overlay-container custom-theme"
我不确定如何调试这个,因为角度材料文档没有给我太多的工作,任何帮助将是赞赏!
谢谢!
1> K. Waite..:
这是Angular 5.1 +/Angular Material 5.0+的替代解决方案.
*编辑:如上所述,这仍然适用于Angular 7+.
工作可编辑的示例 - https://stackblitz.com/edit/dynamic-material-theming
在theme.scss中,包含一个默认主题(注意它不是保存在类名下 - 这是Angular将它用作默认值),然后是一个明暗主题.
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作为导入.
在我的app.component文件中,我还声明@HostBinding('class') componentCssClass;
为一个变量,它将用于将主题设置为一个类.
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函数.
app.component.html
您可以考虑使用observable,以便功能更加动态.
@AaronLavers对于一个简单的实现,我可能会使用COOKIE.我用过的一个很好的包是"ngx-COOKIE-service".您可以存储主题名称,然后在组件控制器中搜索它OnInit.
@AaronLavers如果您希望主题在所有浏览器中与用户保持一致,此外(或代替)将用户选择的主题存储在COOKIE /本地存储中,您可以将其存储在服务器端,并在加载网站时获取有关的信息服务器的用户首选项
在Angular 6工作得很好.非常感谢你!
2> Edric..:
你必须使用的getContainerElement
方法OverlayContainer
.以下是一些示例用法:
this.overlay.getContainerElement().classList.add('my-theme');
至于你的样式文件,我强烈建议删除这条线都custom-theme.scss
和light-custom-theme.scss
(你只需要为你的类在这种情况下):
@include angular-material-theme($custom-theme); // Remove this line from custom-theme.scss and light-custom-theme.scss
如果您还想切换应用程序的主题,您应该在同一toggleTheme
方法中使用它:
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.getContainerElement().classList.remove("light-custom-theme");
this.overlay.classList.add("custom-theme");
} else {
this.overlay.classList.add("light-custom-theme");
}
if (document.body.classList.contains("custom-theme")) {
document.body.classList.remove("custom-theme");
document.body.classList.add("light-custom-theme");
} else if (document.body.classList.contains("light-custom-theme")) {
document.body.classList.remove("light-custom-theme");
document.body.classList.add("custom-theme");
} else {
this.overlay.classList.add("light-custom-theme");
}
}
关于主题的更多信息
Stackblitz演示(对于演示,我必须将应用程序嵌套在Sidenav中)