Prefers-Color-Scheme Support

[tgotwig]

Feature Description

Would be very nice to have Prefers-Color-Scheme Support in Angular Components:
https://davidwalsh.name/prefers-color-scheme

Except mobile devices this has pretty good browser-support already:
https://caniuse.com/#search=prefers-color-scheme

Use Case

The user has dark or light mode in his operating system enabled and based on this the Angular components would look like accordingly.

[jelbourn]

For now, we consider this to be an application-level concern. In particular, we never want to load both light and dark theme CSS at the same time out-of-the-box. Using a media query requires both sets of styles to be present at the same time, so we leave it up to the application to do this. That would look something like

@import '~@angular/material/theming';

@include mat-core();

$light-primary: mat-palette($mat-indigo);
$light-accent:  mat-palette($mat-pink, A200, A100, A400);
$light-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

@media (prefers-color-scheme: light) {
  @include angular-material-theme($light-theme);
}


$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

@media (prefers-color-scheme: dark) {
  @include angular-material-theme($dark-theme);
}

[tomayac]

In particular, we never want to load both light and dark theme CSS at the same time out-of-the-box. Using a media query requires both sets of styles to be present at the same time, so we leave it up to the application to do this.

Note that <link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)"> (the media attribute) is very much a thing.

See this article on web.dev for details. Combined with a color scheme aware stylesheet architecture, this would allow for a performant setup.

[jelbourn]

Ah, I actually didn't know about the media attribute on the <link> element. That would make things a bit easier, though the implications for Angular Material's Sass are the same; it's still up the the application to create and add the appropriate styles.

It would be nice to document this approach, though, in our theming guide.

[santoshyadavdev]

I will take it @jelbourn .

[SvenBudak]

I wrote a little article about how I would solve it personally. Maybe it helps someone: https://medium.com/@svenbudak/how-to-implement-dark-light-mode-in-angular-mateiral-with-prefers-color-scheme-ce3e980e2ea5

[SvenBudak]

I am working on a way to load depends on the prefers-color-scheme a dark.css or light.css. But when i generate this files, the get a hash. I know i can remove the hash by adding the inject option in angular.json config.... But i think thats not a good way, because the PWA config will be not able to update this files when they gets updated.

The filenames are now:

dark.4dec7b0304c3dec40370.css
light.33e2a5c89c5f95e86528.css

When i try to load them with <link rel="stylesheet" href="/dark.css"> it will ofc not work. Any solutions?