角材料自定义主题

时间:2019-05-12 14:25:29

标签: angular angular-material material-design

我尝试在Angular材质中创建自定义主题。使用以下代码

我已经尝试并测试了3个变量primary,accent,warn,我可以根据需要更改这些颜色,但我想再使用一个称为test的变量。但是似乎不允许该主题具有3个以上的属性。 有没有办法在角形材料中使用更多的颜色变量

// Import library functions for theme creation.
@import '~@angular/material/theming';

// Include non-theme styles for core.
@include mat-core();

$my-blue: (
  50: #7fdddd,
  100: #630963,
  200: #86550b,
  300: #7faedd,
  400: #7faedd,
  500: #7faedd,
  600: #7faedd,
  700: #940d0d,
  800: #7faedd,
  900: #7faedd,
  A100: #7faedd,
  A200: #7faedd,
  A400: #7faedd,
  A700: #7faedd,
  contrast: (
    50: white,
    100: white,
    200: white,
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: white,
    A200: white,
    A400: white,
    A700: white,
  )
);
// Define your application's custom theme.
$mat-mytheme-primary: mat-palette($my-blue, 100);
$mat-mytheme-accent:  mat-palette($mat-green, A200, A100, A400);
$mat-mytheme-test: mat-palette($my-blue, 200);
$mat-mytheme-warn: mat-palette($my-blue, 700);

$mat-mytheme: mat-light-theme($mat-mytheme-primary, $mat-mytheme-accent,$mat-mytheme-test,$mat-mytheme-warn);

// Include theme styles for Angular Material components.
@include angular-material-theme($mat-mytheme);

0 个答案:

没有答案