角度材质:将主题的颜色用作背景

时间:2019-10-30 12:24:54

标签: angular angular-material

我想为Angular Material mat-button-toggle申请一种不同于标准的背景色。我目前有

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

@include mat-core();

$app-primary: mat-palette($mat-indigo);
$app-primary-light:  mat-palette($mat-indigo, A200, A100, A400);
$app-purple: mat-palette($mat-pink, A200, A100, A400);

$app-theme: mat-light-theme($app-primary, $app-primary-light);

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);
  $purple: map-get($app-theme, warn);

  .mat-button-toggle {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }
  .mat-button-toggle.purple {
    background-color: mat-color($purple, 700);
  }

我找到了list个可用的主题。现在,我想申请mat-button-toggle中的Deep Purple颜色。 $purple某种程度上不起作用,我也不知道如何正确提取颜色。

Deep Purple中提取出来的正确语法是什么?

2 个答案:

答案 0 :(得分:0)

您的with open('config.py', 'a') as f: f.write(text) if os.path.isfile('config.pyc'): os.unlink('config.pyc') 变量是一张地图。 您可以使用Python 2.7.17 (default, Oct 24 2019, 12:57:47) [GCC 4.2.1 Compatible Apple LLVM 11.0.0 (clang-1100.0.33.8)] on darwin Type "help", "copyright", "credits" or "license" for more information. # /Users/akx/Desktop/config.pyc has bad mtime import config # from /Users/akx/Desktop/config.py # wrote /Users/akx/Desktop/config.pyc Before: ['item1', 'item2'] LIST += [ 'item3', ] import config # from /Users/akx/Desktop/config.py # wrote /Users/akx/Desktop/config.pyc After: ['item1', 'item2', 'item3'] 函数获得一种颜色:

$purple

答案 1 :(得分:0)

我最终发现,我需要将定义的主题包含在$app-theme中-这样我才能很容易地使用它:

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

@include mat-core();

$app-primary: mat-palette($mat-indigo);
$app-purple: mat-palette($mat-deep-purple);

$app-theme: mat-light-theme($app-primary, $app-purple);

// https://material.io/archive/guidelines/style/color.html#color-color-palette

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);

  .mat-button-toggle {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }
  .mat-button-toggle.purple {
    background-color: mat-color($app-purple, 700);
  }