add automatic dark mode

How to add Automatic Dark Mode to any Website / WordPress with 1 line of code

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 theme 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 must be a go for you.

What’s Automatic Dark Mode

Also known as preferred color scheme, all major platforms like Android, iOS, and Windows have 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 theme. So whenever an app is being installed/used it knows whether the user prefers dark mode or not and changes the UI/color-scheme. 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. The color code for the background above is not pure black because using pure black and white combination results in very high contrast which is very uncomfortable to stare for a long period of time. So, it’s recommended to use greyish black, even Google’s material design standard recommends greyish colors for better UI and elevation. Anyways you can use the color scheme of your choice. This works in all desktop and mobile devices.

Implementation

  • Add this to any website/webpage by adding this code to your .css file
  • WordPress, users add this to your additional CSS in your customizer option.

I have tried both the cases and it works like a charm.

Live Example

See the Pen Dark-mode by Abhiram Reddy Duggempudi (@abhiram_reddy) on CodePen.

Troubleshooting Errors

Sometimes this method may create problems or appear to break your theme’s UI because some links/heading and other elements might turn dark which we do not intend to. The below instructions should fix it.

@media(prefers-color-scheme: dark) {
body, a{
background-color:#121212;
color:white; }}

I’ ve got a problem the first time I implemented this on my page, Above code fixed it, notice that 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.

Other reasons, Older versions of Android, iOS, or some browsers may not support this, here’s the full documentation and 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 mix only, you can also design a separate dark UI for your website with the colors of your choice like fluorescent green or orange, many websites/apps follow this to provide a stunning dark them experience even in dark mode and making sure the brand colors don’t get affected because of the dark mode.

Finally, it recommended that you let users switch between dark and light mode because some people prefer reading important articles with a white background. We should not force dark mode and they should have the choice to choose.

References and Resources

Did the code work, errors? any suggestions comment below!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Popular posts