避免在Angular Material主题中重复使用样式

Question

我有一个名为 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)，但我不认为这是可能的。
• 如果可以使用SASS的@if和@else检查data-theme选择器是否与任何元素匹配，否则包含@media查询。

- Seth Falco

Answer 1

您应该使用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);
}

For more information, Official Docs

- Vugar Abdullayev

Answer 2

我今天也遇到了同样的问题。 你的样式问题在于你有两个主题，一个是浅色主题，一个是深色主题，在

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

- Pratyush

Answer 3

mat.$theme-ignore-duplication-warnings: true;

- Issa Lafi

---

如果您想在应用程序中使用多个主题（例如浅色和深色），那么这就是正确的答案。请参见：https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md - btx

这句话的意思是：“这个东西在SCSS中怎么写？我收到了一个错误提示：‘预期标识符scss(css-identifierexpected)’。”请提供需要翻译的上下文和更多细节以获得更准确的翻译。 - AppDreamer