DEV Community

loading...

Dark mode with CSS

Hatem Houssein
Updated on ・1 min read

My eyes hurt a lot when I stare at a bright screen with light mode so I use Dark Reader but prefer the website native support for dark mode.

Since https://remotework.jp/ went live a couple of weeks ago, I wanted to add the dark mode to it. Luckily, CSS supports the media query prefers-color-scheme which checks the user's default mode for light/dark and add CSS specific to each case.

So I went on and added this simple piece of CSS and no Javascript needed for this change!

body {
  @media (prefers-color-scheme: dark) {
    color: #515151;
    background-color: #000;
  }
  @media (prefers-color-scheme: light) {
    color: #515151;
    background-color: #fff;
  }
}
Enter fullscreen mode Exit fullscreen mode

Et voilà! Dark mode easily supported...
Alt Text

And light mode still there.
Alt Text

For further reading and better styling structure of your whole website/app, I suggest reading this post.

Discussion (0)