小编Set*_*lco的帖子

我有一个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用户代理配置的 if ，但如果用户已在网站上配置它，则覆盖它。

然而，当前的 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在应用程序中未配置主题时设置属性。

还有比这更好的解决方案吗？

我尝试过的：

• 看看我是否可以像这样将媒体查询和选择器串在一起 …