css - 使用 CSS 变量创建 Angular Material 主题

Question

我正在从事一个需要在运行时可主题化的元素。所以我创建了一个主题系统，结合了 SCSS 变量和 CSS 变量。这是它的样子。

:root {
  --primary-color: 196;
}


// Primary
$primary-100: hsl(var(--primary-color), 90%, 98%);
$primary-400: hsl(var(--primary-color), 90%, 65%);
$primary-main: hsl(var(--primary-color), 90%, 50%);
$primary-700: hsl(var(--primary-color), 90%, 30%);
$primary-900: hsl(var(--primary-color), 90%, 10%);

虽然这对我的自定义组件来说效果惊人，但我很难让它与 Material Design 主题系统一起工作。

我的想法是，我将按照 Angular Material 文档中的说明创建主题，而不是使用静态颜色，而是使用我的 SCSS 变量。这就是我的 theme.scss 文件的样子。

@import '~@angular/material/theming';
@import 'var.scss';

@include mat-core();

$shop-primary: (
  50: $primary-100,
  100: $primary-100,
  200: $primary-200,
  300: $primary-300,
  400: $primary-400,
 // ..... all other colors
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
     // ..... all other colors
  )
);


$shop-app-primary: mat-palette($shop-primary);
$shop-app-accent:  mat-palette($shop-primary);
$shop-app-warn: mat-palette($shop-primary);


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

@include angular-material-theme($shop-app-theme);

我收到一个错误:

 Argument `$color` of `rgba($color, $alpha)` must be a color

推测是因为 Angular Material mixin 需要一个 color 而不是 hsl() 值。

所以我的问题是如何使用运行时 CSS 变量创建自定义 Material 主题？

Answer 1

我创建了一个 little library使这更容易一些。

你可以这样使用它:

1. 安装:

   npm i angular-material-css-vars -S
   

2. 然后从您的主样式表文件中删除任何现有的 @import '~@angular/material/theming';。

3. 改为将此添加到您的主样式表中:

   @import '~angular-material-css-vars/main';
   @include initMaterialCssVars();
   

4. 像这样更改主主题颜色:

   import {MaterialCssVarsService} from 'angular-material-css-vars';
   
   export class SomeComponentOrService {
     constructor(public materialCssVarsService: MaterialCssVarsService) {
       const hex = '#3f51b5';
       this.materialCssVarsService.changePrimaryColor(hex);
     }
   }