Dark mode with CSS

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;
  }
}

Et voilà! Dark mode easily supported...

And light mode still there.

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