Why?

[rugk]

Seriously, this is not needed at all.

You can use an one-liner to find out, whether prefers-color-scheme is set to dark:

window.matchMedia("(prefers-color-scheme: dark)").matches

You don't need all that CSS creation and emulation of this module.

I've also made an add-on for Firefox, if you want to test it by switching to a dark style: https://addons.mozilla.org/firefox/addon/dark-mode-website-switcher/?src=external-github

[issue-label-bot[bot]]

Issue Label Bot is not confident enough to auto-label this issue. See dashboard for more details.

[SvenBudak]

Bit its not possible to make a simple switch case with

window.matchMedia("(prefers-color-scheme: dark)").matches

my code looks now like:

detectPrefersColorScheme() {
    // Detect if prefers-color-scheme is supported
    if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            this.theme = 'dark';
        }
        if (window.matchMedia('(prefers-color-scheme: light)').matches) {
            this.theme = 'light';
        }
    } else {
        this.theme = 'dark';
    }
}

Thats alot code for only detecting...

[rugk]

Hu? No…

You can just assume light as default and then switch to dark when needed. Your example has quite some redundant cases.

detectPrefersColorScheme() {
    // Detect if prefers-color-scheme is supported
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        this.theme = 'dark';
    } else {
        this.theme = 'light';
    }
}

As said, the condition is an one-liner.

It can be simplified even more:

detectPrefersColorScheme() {
    // Detect if prefers-color-scheme is supported
    this.theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

Anyway, the LOC should not matter that much anyway…

[SvenBudak]

Thanks @rugk I wrote with your help a article about this. Maybe the service i show there, is usefull for someone: https://medium.com/@svenbudak/how-to-implement-dark-light-mode-in-angular-mateiral-with-prefers-color-scheme-ce3e980e2ea5