DEV Community


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

papaponmx profile image
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() {
        <ThemeProvider theme={prefersDark ? darkTheme : lightTheme} >

amarok24 profile image
Jan P.

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