Создать тему углового материала с помощью CSS-переменных

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

Хотя это прекрасно работает с моими пользовательскими компонентами, мне трудно заставить его работать с системой темы дизайна материалов.

Я думал, чтоЯ создам тему, как описано в документации по материалам Angular, и вместо статических цветов я буду использовать переменные 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 ожидает color, а неhsl() значение.

Итак, мой вопрос: как мне создать собственную тему материала с переменными CSS времени выполнения?

Answer 1

Если вы обновитесь до @ 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 к чему-то, что находит последний ',' в строке.К сожалению, мои нахальные знания охватывают только самый минимум, и я не знаю, как это сделать: /

Answer 2

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

Вы можете использовать его следующим образом:

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

Answer 3

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

$primary-color: 196;

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

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