文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >角度材料5中的转换主题

问角度材料5中的转换主题
EN

Stack Overflow用户
提问于 2017-11-22 17:50:53
回答 4查看 37.6K关注 0票数 20

我读了几篇关于这方面的文章，但它们在几种不同的方面似乎相互矛盾。我希望为最新版本的角材料5.0.0-rc0重新创建与角材料文献站点相同的主题切换。

我有两个自定义主题，这是自定义主题. sans和光-自定义主题.sans，它几乎相同，没有垫-暗-主题

代码语言：javascript
复制
@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看起来是这样

代码语言：javascript
复制
@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">中被称为

当我做一个主题时，一切都很好。但我想在这两者之间切换。将这两个主题添加到角-cli.json中，光自定义主题将接管。

代码语言：javascript
复制
"styles": [
  "styles.scss",
  "custom-theme.scss",
  "light-custom-theme.scss"
],

在我的组件中有以下代码来处理切换主题

代码语言：javascript
复制
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覆盖容器”对象。

代码语言：javascript
复制
0:"cdk-overlay-container"
1:"custom-theme"
length:2
value:"cdk-overlay-container custom-theme"

我不知道如何调试这一点，因为棱角材料文档并没有给我太多的工作，任何帮助都会感激！

谢谢!

angular
sass
angular-material
angular5
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-12-11 18:50:01

这是一个角5.1+/角材料5.0+的替代解决方案。

*编辑:如前所述，这仍然适用于角7+。

工作可编辑示例- https://stackblitz.com/edit/dynamic-material-theming

在theme.scss中，包含一个默认主题(请注意，它没有保留在类名下--这是如此的角度将其用作默认主题)，然后是一个轻暗的主题。

theme.scss

代码语言：javascript
复制
@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文件中，包含来自@ar角/cdk/overlay的OverlayContainer。您可以在这里找到https://material.angular.io/guide/theming的相关文档，尽管它们的实现有点不同。请注意，我还必须将OverlayModule作为app.module中的一个导入项。

在我的app.component文件中，我还将@HostBinding('class') componentCssClass;声明为变量，该变量将用于将主题设置为类。

app.component.ts

代码语言：javascript
复制
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

代码语言：javascript
复制
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

代码语言：javascript
复制
<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>

您可能会考虑使用一个可观察的方法，这样功能就会更加动态。

票数 36
EN

Stack Overflow用户

发布于 2017-11-23 06:50:25

您必须使用getContainerElement方法的OverlayContainer。下面是一些示例用法：

代码语言：javascript
复制
this.overlay.getContainerElement().classList.add('my-theme');

至于您的样式文件，我强烈建议删除custom-theme.scss和light-custom-theme.scss的这一行(在本例中，您只需要在类中使用它)：

代码语言：javascript
复制
@include angular-material-theme($custom-theme); // Remove this line from custom-theme.scss and light-custom-theme.scss

如果您还想切换应用程序的主题，则应该在相同的toggleTheme方法中使用此方法：

代码语言：javascript
复制
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");
  }
}
票数 16
EN

Stack Overflow用户

发布于 2018-10-09 04:33:55

您总是可以检查主题选择器是如何在https://material.angular.io/中实现的，只需执行相同的https://github.com/angular/material.angular.io/tree/master/src/app/shared/theme-picker操作，就可以得到永恒的解决方案，因为如果发生任何突然的更改，您总是可以查找材料文档源如何修复。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/47441036

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档