我正在做一個(gè)需要在運(yùn)行時(shí)可主題化的項(xiàng)目。所以我創(chuàng)建了一個(gè)結(jié)合了SCSS變量和CSS變量的主題系統(tǒng)。 這是它看起來的樣子。

: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%);

雖然這與我的定制組件驚人地工作，但我很難讓它與材料設(shè)計(jì)主題系統(tǒng)一起工作。

我的想法是，我將創(chuàng)建的角度材料文件解釋的主題，而不是使用靜態(tài)的顏色，我將使用我的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);

我得到一個(gè)錯(cuò)誤:

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

大概是因?yàn)橛薪嵌鹊牟馁|(zhì)混合需要的是顏色而不是hsl()值。

所以我的問題是，我如何能夠用運(yùn)行時(shí)CSS變量創(chuàng)建一個(gè)自定義的材質(zhì)主題？

我創(chuàng)建了一個(gè)小小的庫來簡化這個(gè)過程。

你可以這樣使用它:

安裝:

npm i angular-material-css-vars -S

然后移除任何現(xiàn)有的@ import ' ~ @ angular/material/theming '；從主樣式表文件中。

將它添加到主樣式表中:

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

像這樣改變主題顏色:

import {MaterialCssVarsService} from 'angular-material-css-vars';

export class SomeComponentOrService {
  constructor(public materialCssVarsService: MaterialCssVarsService) {
    const hex = '#3f51b5';
    this.materialCssVarsService.changePrimaryColor(hex);
  }
}

如果您升級到@angular/ material 7.3.4，CSS變量將大部分工作。只有撕裂和其他使用不透明的東西需要一點(diǎn)修復(fù)。我在我的項(xiàng)目中使用rgba()，但是它也應(yīng)該適用于hsla()

包括這個(gè):

@function mat-color($palette, $hue: default, $opacity: null) {
    @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
        @return mat-color($palette, default, $hue);
    }

    $color: map-get($palette, $hue);

    @if (type-of($color) != color) {
        @if ($opacity == null){
            @return $color;
        }

        // Here is the change from the original function:
        // If the $color resolved to something different from a color, we assume it is a CSS variable
        // in the form of rgba(var(--rgba-css-var),a) and replace the 'a' value.
        @return #{str-slice($color, 0, str-index($color, ',')) + $opacity + ')'};
    }

    @return rgba($color, if($opacity == null, opacity($color), $opacity));
}

緊隨其后:

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

像這樣定義你的顏色:

--primary-color-50-parts: 0,158,224;
// ... all other colors

$color-primary: (
    50: rgba(var(--primary-color-50-parts), 1),
    // ... all other colors
);

如果您像這樣定義地圖中的顏色:

50: hsla(var(--primary-color), 90%, 98%, 1);

然后，您需要將sass函數(shù)中的str-index($color，'，')改為在字符串中找到最后一個(gè)'，'。不幸的是，我的sass知識只涵蓋了最低限度，我不知道如何做到這一點(diǎn):/

我創(chuàng)建了一個(gè)小小的圖書館-材料-主題-創(chuàng)建器

你可以為你的angular應(yīng)用程序設(shè)置主題，或者使用這種方法來創(chuàng)建主題

https://www.npmjs.com/package/material-theme-creator NPM

醫(yī)生:https://artik-man.github.io/material-theme-creator/

npm i材料-主題-創(chuàng)作者

@import "~material-theme-creator/ngx-mtc";
@import '~@angular/material/theming';

@include mat-core();
@include ngx-mtc-init();

$primary-map: ngx-mtc-create-theme-map('primary');
$accent-map: ngx-mtc-create-theme-map('accent');
$warn-map: ngx-mtc-create-theme-map('warn');

:root {
  --is-dark-theme: 1; // Is dark theme? 1 or 0;
  @include ngx-mtc-theme-base(); // Creates base colors

  // Creates theme colors
  @include ngx-mtc-create-variables-from-color('primary', #009688, 38%);
  @include ngx-mtc-create-variables-from-color('accent', #2196f3, 57%);
  @include ngx-mtc-create-variables-from-color('warn', #f44336, 62%);
}

// Creates Angular Material Theme
@include angular-material-theme(
  ngx-mtc-custom-theme(
    mat-palette($primary-map),
    mat-palette($accent-map),
    mat-palette($warn-map)
  )
);

第二個(gè)主題代碼:

.second-theme {
  --is-dark-theme: 0;
  @include ngx-mtc-update-theme('primary', #142148, 45%);
  @include ngx-mtc-update-theme('accent', #658e14, 50%);
  @include ngx-mtc-update-theme('warn', #750101, 50%);
}

你可以使用它與角材料或SCSS或純CSS

這是相當(dāng)容易實(shí)現(xiàn)的。

根據(jù)themes.scss文件中的角度調(diào)板，為“主要”、“強(qiáng)調(diào)”和“警告”定義調(diào)板和變量。見此供參考。

@import '@angular/material/theming';
@include mat.core();

$dark-primary-text: rgba(black, 0.87);
$dark-secondary-text: rgba(black, 0.54);
$dark-disabled-text: rgba(black, 0.38);
$dark-dividers: rgba(black, 0.12);
$dark-focused: rgba(black, 0.12);
$light-primary-text: white;
$light-secondary-text: rgba(white, 0.7);
$light-disabled-text: rgba(white, 0.5);
$light-dividers: rgba(white, 0.12);
$light-focused: rgba(white, 0.12);

$primary-var-palette: (
  50: var(--primary-50, #fafafa),
  100: var(--primary-100, #f5f5f5),
  200: var(--primary-200, #eeeeee),
  300: var(--primary-300, #e0e0e0),
  400: var(--primary-400, #bdbdbd),
  500: var(--primary-500, #9e9e9e),
  600: var(--primary-600, #757575),
  700: var(--primary-700, #616161),
  800: var(--primary-800, #424242),
  900: var(--primary-900, #212121),
  A100: var(--primary-A100, #ffffff),
  A200: var(--primary-A200, #eeeeee),
  A400: var(--primary-A400, #bdbdbd),
  A700: var(--primary-A700, #616161),
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

然后將調(diào)色板添加到主題中。

$var-primary: mat.define-palette($primary-var-palette);
$var-accent:  mat.define-palette($accent-var-palette, 400, 900, A100);
$var-warn:    mat.define-palette($warn-var-palette);
$var-theme: mat.define-light-theme($var-primary, $var-accent, $var-warn);
@include mat.all-component-themes($var-theme);

你不能在html中設(shè)置或改變css變量，所以要?jiǎng)討B(tài)地改變主題。

document.documentElement.style.setProperty('--primary-50', myPrimary50Value);
...

非常...css變量是運(yùn)行時(shí)的，不是編譯時(shí)的。薩斯不知道該拿他們怎么辦。您應(yīng)該能夠使用＄{ } Scss插值來重構(gòu)您的CSS變量，并保持一切工作不變。http://sass-lang.com/documentation/file.SASS _ REFERENCE.html #插值_

$primary-color: 196;

:root {
  --primary-color: #{$primary-color};
}

$primary-100: hsl($primary-color, 90%, 98%);