We’re in 2020 and everyone wants dark mode on everything, so did apps like Facebook, Twitter even Google and Apple have launched system-wide dark mode and if you want your website to be at ease for users who don’t like to stare at a bright screen all day, then the dark mode is a go for you.
What is Automatic Dark Mode
Also known as preferred color scheme, all major platforms like Android, iOS, and Windows has a dark mode preference for the user to enable system-wide dark mode including the third-party apps to know that the user prefers dark mode. So whenever an app is installed/used it knows whether the user prefers dark mode or not and changes the UI/color-scheme accordingly. So, we can use this property to enable dark mode on our site which makes the user happy because they love it and for those who don’t prefer it, it’ll be the same as usual.
The magical line of code
@media (prefers-color-scheme: dark) { }Yes, the above line of code is a simple media query to let us know if the user [the device] prefers dark mode UI or not, okay fine now we know the user likes dark mode so how are we going to use it on our website ?
@media(prefers-color-scheme: dark) {
body {
background-color:#121212;
color:white; }What the above code does is, set the background color to dark and text to white, yes it’s that easy. Did you notice the color code for the background above is not pure black because as per Google’s material design standard using pure black and white results in high contrast so, better use greyish black. Anyways you can use the color scheme of your choice. This works in all desktop and mobile devices too.
Implementation
- For any website/webpage just add this to your .css file
- For WordPress, users add this to your additional CSS in your customizer
I tried both cases and it worked just fine.
Live Example
Troubleshooting [errors]
Okay did you face a problem, your links are also black or your headings went dark this might happen just follow below instructions and all will be good.
@media(prefers-color-scheme: dark) {
body, a{
background-color:#121212;
color:white; }}Notice I have included the ‘a’ tag along with body this makes sure my links are visible, above code corrects the colors of links only and you can apply it for images or any other tags you want to change accordingly.
Other reasons, Older versions of Android, iOS, or some browsers may not support this, here is the list of compatible browsers.
Bonus tip
Now that you’ve decided to add dark mode it’s not mandatory to use black and white only , you can also design a separate dark UI for your site with the colors of your choice like fluorescent green or orange, may websites/apps follow this to provide a stunning user experience even in dark mode or to make sure brand colors don’t get affected in dark mode.