作者:幸福---wang | 来源:互联网 | 2022-11-18 12:12
我正在做一个需要在运行时主题化的项目。因此,我创建了一个将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材质文档中的说明创建主题,而不是使用静态颜色,而是使用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期望a color
而不是hsl()
值。
所以我的问题是我如何能够使用运行时CSS变量创建自定义材质主题?
1> Benedikt Lan..:
如果您升级到@ 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);
那么您需要将sass函数中的str-index($ color,',')更改为在字符串中找到最后一个','的内容。不幸的是,我的无礼知识只涵盖了最低限度的知识,我不知道该怎么做:/