相关疑难解决方法(0)

为其他元素获取Material 2主题配色方案/调色板

我正在构建一个应用程序,但我想保持一致的颜色方案,可以通过设置更改,所以我使用材料(2)与角度(2 +),但我不知道如何获得不直接的元素的配色方案提供了为它们着色的能力,color="primary"因此我试图弄清楚如何获得我的Material 2主题使用的颜色/颜色方案.我希望它在主题发生变化时进行更改,例如我的导航栏将适应主题更改,因为它设置为

<mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">
Run Code Online (Sandbox Code Playgroud)

但是材质2中的网格元素并没有采用相同的参数,所以我试图用足够接近的颜色来设置它的样式,或者根本不匹配它(并且它不会适应主题变化),如下所示:

在此输入图像描述

我希望它与主题垫匹配颜色,这是在这里(并在导航栏设置中选择的选项上更改)

@import '~@angular/material/theming';

@include mat-core();



$candy-app-primary: mat-palette($mat-red);
$candy-app-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
.default {
  @include angular-material-theme($candy-app-theme);
}
.light {
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, …
Run Code Online (Sandbox Code Playgroud)

css themes angular-material angular

15
推荐指数
3
解决办法
1万
查看次数

更改Angular 2的材质设计主题

我正在尝试将Angular Material 2与我的Angular 2应用程序一起使用.

我没有找到如何全局更改材料主题(primaryColor等).我知道Angular Material 2仍处于alpha状态,但目前有办法吗?

material-design angular

6
推荐指数
2
解决办法
1万
查看次数

标签 统计

angular ×2

angular-material ×1

css ×1

material-design ×1

themes ×1