DEV Community

Hatem Houssein
Hatem Houssein

Posted on • Edited on

4

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

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay