'Avoid duplicate styles in Angular Material theme

I have a styles.theme.scss that looks like the following.

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

The goal is to use the prefers-color-scheme if that is configured by the user agent, but override it if the user has configured it on the website.

The current SCSS causes the following warning, however:

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

I've checked the provided documentation, but it doesn't appear to cover this case, and I'm unsure on how to better structure this to avoid duplicating the styles.

The only solution I think would work is to detect the preference with JavaScript, and then set the data-theme attribute if a theme isn't configured in the application.

Is there a better solution than this?

What I've tried:

  • To see if I could string a media query and selector together like [data-theme="dark-theme"], @media (prefers-color-scheme: dark), which I don't believe is possible.
  • If I can use SASS @if and @else to check if the data-theme selectors match any elements, else include the @media queries.
cssangularsasstheming


Solution 1:[1]

I also find my self fighting same issue today. The problem with your styling is you have two theme light and dark and in

@include angular-material-theme('Your-Theme');

you have to provide a theme ( light or dark).

so you should overwrite only one of theme because other is already included so overwrite media query dark if you provided light one or vice versa.

here is my code sample

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Issa Lafi

Related Questions