Sur*_*eal 14 sass angular-material angular angular5
我一直在阅读一些关于此的文章,但它们似乎在几种不同的方式上存在冲突.我希望重新创建与最新版角度材料[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中调用它 <body class="mat-app-background">
当我做一个主题时,一切正常.但我试图在两者之间切换.将两个主题添加到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"
我不确定如何调试这个,因为角度材料文档没有给我太多的工作,任何帮助将是赞赏!
谢谢!
K. *_*ite 26
这是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
<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,以便功能更加动态.
Edr*_*ric 13
你必须使用的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");
}
}
您总是可以检查主题选择器是如何在https://material.angular.io/中实现的，然后执行相同的操作https://github.com/angular/material.angular.io/tree/master/src/app /shared/theme-picker通过这样做，您将拥有永久的解决方案，因为万一发生任何重大更改，您始终可以查找材料文档源如何修复。
| 归档时间： |
|
| 查看次数： |
15944 次 |
| 最近记录： |