DEV Community

Cover image for Dark theme with css
Martin Klestil
Martin Klestil

Posted on • Updated on

Dark theme with css

Hello world, this is my first blog post.🥳

I've spent the last few days to find an easy way to create dark and light themes using css.

With the help of prefers-color-scheme we can create our own theme for dark or light mode.

prefers-color-scheme
Enter fullscreen mode Exit fullscreen mode

That will be use with a media query, to detect if the user has their system set to use a light or dark color theme.

CSS Media Query

Now, comes to the question of how to test the whole thing?

Test

Current browsers read the theme preference from the operating system. Luckily there is a way to test this easily.

Tested with Google Chrome Version 115.x(July 2023).

  1. Open developer tools
  2. Open Command Control

    • Ctrl + Shift + P (Windows)
    • Command+Shift+P (Mac)
  3. Enter Show Rendering

    • Enter Show Rendering
  4. Emulate CSS Media

    • Emulate CSS Media

Where does it work?

Thanks to the site caniuse.com we can check CSS commands, there we get a global coverage of 94.93% for prefers-color-scheme (as of July 2023).

Top comments (1)

Collapse
 
rezazirenejad profile image
Reza Zirenejad

Congrats on your first post on dev.to 🎉, it was useful for me...