Discussion on: Add dark mode to your site with this short CSS trick

[Jaime Rios]

Simple but effective. Thanks for sharing

Just to enrich the conversation I want to add that another consideration is that if you are using styled-components a dark theme might be accomplished with something in a similar way, for example:

const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

const lightTheme = {
    color: 'black',
    backgroundColor: 'white',
};

const darkTheme = {
    color: 'white',
    backgroundColor: 'black',
};

// ...

render() {
    return(
        <ThemeProvider theme={prefersDark ? darkTheme : lightTheme} >
        </ThemeProvider>
    );
}

[Jan Prazak]

When I change to dark theme in Firefox then this line:
window.matchMedia("(prefers-color-scheme: dark)").matches
still returns false.