我有一个
styles.theme.scss
,如下所示。
@media (prefers-color-scheme: dark) {
@include example-theme($dark-theme);
}
@media (prefers-color-scheme: light) {
@include example-theme($light-theme);
}
[data-theme="dark-theme"] {
@include example-theme($dark-theme);
}
[data-theme="light-theme"] {
@include example-theme($light-theme);
}
prefers-color-scheme
(如果由用户代理配置),但如果用户已在网站上配置它,则覆盖它。
但是,当前的 SCSS 会导致以下警告:
WARNING: The same color styles are generated multiple times. Read more about how style duplication can be avoided in a dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md
node_modules/@angular/material/_theming.scss 1648:7 -mat-check-duplicate-theme-styles()
node_modules/@angular/material/_theming.scss 7010:3 angular-material-theme()
stdin 29:3 example-theme()
stdin 57:3 root stylesheet
我已经检查了提供的文档,但它似乎没有涵盖这种情况,并且我不确定如何更好地构建它以避免重复样式。
我认为唯一可行的解决方案是使用 JavaScript 检测首选项,然后如果应用程序中未配置主题,则设置
data-theme
属性。
还有比这更好的解决方案吗?
我尝试过的:
[data-theme="dark-theme"], @media (prefers-color-scheme: dark)
一样将媒体查询和选择器串在一起,我认为这是不可能的。@if
和 @else
来检查 data-theme
选择器是否匹配任何元素,否则包括 @media
查询。您应该包括
mat.all-component-colors
而不是 mat.all-component-themes
示例:下面是错误的
// Generates styles for all systems configured in the theme. In this case, color styles
// and default density styles are generated. Density is in themes by default.
@include mat.all-component-themes($light-theme);
.dark-theme {
// Generates styles for all systems configured in the theme. In this case, color styles
// and the default density styles are generated. **Note** that this is a problem because it
// means that density styles are generated *again*, even though only the color should change.
@include mat.all-component-themes($dark-theme);
}
用这个代替:
@use '@angular/material' as mat;
...
@include mat.all-component-themes($light-theme);
.dark-theme {
// This mixin only generates the color styles now.
@include mat.all-component-colors($dark-theme);
}
欲了解更多信息,官方文档
我今天也发现自己在与同样的问题作斗争。 你的造型问题是你有两个主题浅色和深色以及in
@include angular-material-theme('Your-Theme');
您必须提供一个主题(浅色或深色)。
所以你应该只覆盖其中一个主题,因为其他主题已经包含在内 因此,如果您提供了浅色媒体查询,请覆盖深色媒体查询,反之亦然。
这是我的代码示例
@import "~@angular/material/theming";
@include mat-core();
$kyc-web-primary: mat-palette($mat-pink);
$kyc-web-accent: mat-palette($mat-pink, A200, A100, A400);
$kyc-web-warn: mat-palette($mat-red);
$kyc-web-theme-light: mat-light-theme(
(
color: (
primary: $kyc-web-primary,
accent: $kyc-web-accent,
warn: $kyc-web-warn,
),
)
);
$kyc-web-theme-dark: mat-dark-theme(
(
color: (
primary: $kyc-web-primary,
accent: $kyc-web-accent,
warn: $kyc-web-warn,
),
)
);
@include angular-material-theme($kyc-web-theme-dark);
@media (prefers-color-scheme: light) {
@include angular-material-color($kyc-web-theme-light);
}
mat.$主题忽略重复警告:true;