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

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.

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

   • 

4. 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).

Comments

[Reza Zirenejad]

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