我正尝试在我的Angular 2应用程序中使用Angular Material 2。更改Angular 2的材质设计主题
我没有找到如何改变全球物质主题(primaryColor
等)。 我知道Angular Material 2仍然处于alpha阶段,但目前有什么方法可以做到这一点?
我正尝试在我的Angular 2应用程序中使用Angular Material 2。更改Angular 2的材质设计主题
我没有找到如何改变全球物质主题(primaryColor
等)。 我知道Angular Material 2仍然处于alpha阶段,但目前有什么方法可以做到这一点?
https://github.com/angular/material2/issues/287
@ samio80的风格正在写在心中的主题化,但我们并没有对主题化还没有准备好部署策略。作为一种解决方法,您可以直接拉动源代码并通过修改_default-theme.scss和创建npm包(通过脚本stage-release.sh)来自定义主题。
请记住,我们仍然处于alpha过程的早期阶段,因此API或行为可以在不同版本之间更改。
这里是链接到角材料主题化指南 - https://material.angular.io/guide/theming
而这里是实现指南中描述的主题化的方法一个示例应用程序 - https://github.com/jelbourn/material2-app
这里的动态角材料主题实现的示例如角5.1和角材5.0。
编辑工作的例子 - https://stackblitz.com/edit/dynamic-material-theming
在theme.scss文件,包括默认的主题(注意它下一个类名没有保持 - 这是这么角将用它作为默认设置),然后光明和黑暗的主题。
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文件,包括从@角蛋白/ cdk /重叠OverlayContainer。你可以在这里找到Angular的文档https://material.angular.io/guide/theming;尽管他们的实施有些不同。请注意,我也必须在app.module中包含OverlayModule作为导入。
在我的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>
您可以考虑使用可观察到的,这样的功能会更有活力。
虽然这可能会回答这个问题, [这将是更可取的](http://meta.stackoverflow.com/q/8259)在这里包括 的答案的基本部分,并提供链接供参考。 –
对不起,我在帖子中提供了更多细节。 –
请不要发布相同的答案多个问题。发布一个很好的答案,然后投票/标记以重复关闭其他问题。如果问题不重复,*定制您的问题答案。* –
您是否阅读过角材料1的文档?也许它是相似的。如果还没有2的文档,请尝试查看源代码以找出它。或者在他们的github项目上提出问题。 –