Создайте тему углового материала с переменными CSS

Оооо... переменные css - это время выполнения, а не время компиляции. SASS не знает, что с ними делать. Вы должны иметь возможность реорганизовать свои css-переменные, используя интерполяцию ${} SCSS, и все будет работать по-прежнему. http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

$primary-color: 196;

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

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

Если вы обновитесь до @angular/material 7.3.4, CSS-переменные в основном будут работать. Только рябь и другие вещи, использующие непрозрачность, нуждаются в небольшом исправлении. Я использую rgba() для своего проекта, но он также должен работать и для hsla().

Включите это:

@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);

затем вам нужно изменить str-index($color, ',') в функции sass на что-то, что находит последний ',' в строке. К сожалению, мои знания sass охватывают только самый минимум, и я не знаю, как это сделать :/

Я создал маленькая библиотека, чтобы сделать это немного проще.

Вы можете использовать его так:

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);
     }
   }
   

Я создал небольшую библиотеку - material-theme-creator

Вы можете создать тему для своего углового приложения или использовать этот подход для создания тем.

НПМ: https://www.npmjs.com/package/material-theme-creator

ДОКУМЕНТЫ: https://artik-man.github.io/material-theme-creator/

npm i material-theme-creator

@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)
  )
);
 

Второй код темы:

.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%);
}

Вы можете использовать его с Angular Material, SCSS или чистым CSS.