3 Insanely Simple Ways to Switch Your Website To Dark Mode

As the infamous Darth Vader once said, “You don’t know the power of the dark side.”

2019 brought justice to Vader when dark mode took over our apps and the craze is yet to plateau. From Instagram to Youtube, our beloved apps have jumped on the bandwagon and it won’t be long before the Sith triumphs.

What is Dark Mode?

For those fond of technical jargon, Wikipedia defines dark mode as the “color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background.”

Simply put, dark mode is just as the name suggests: a darker thematic interface for your apps. However, there’s more to it than a gothic premise.

Why is Dark Mode all the rage?

• Who doesn’t like a tall, ‘Dark’ Stranger. The dark mode has a certain sense of aesthetic appeal that's charismatic to all; a congruence that's hardly kaleidoscopic.
• For a generation that spends more time in front of screens than people, dark mode takes a minimal toll on your eyes. God bless thy eyes!
• It helps maintain the circadian rhythm of users.
• Finally, it drains less of your battery. Now, that’s a deal-sealer, ain’t it!

What are the ways to switch your website to Dark Mode?

‘Ready, you are’, so let’s take a look at three easy ways to implement dark mode for websites.

1. Check for OS-level preferences

Before getting into the nitty-gritty of the affair, it is vital to check the parameters for the operating system. For instance, Whatsapp in certain android versions gave the users the option to switch to night mode whereas iOS dark mode was set as default on its devices for the app. This should be taken into account before adding the codes for the same. The code to implement the dark theme is shown below in both CSS and Js.

Using CSS

    /* Light mode */
    @media (prefers-color-scheme: light) {
        body {
            background-color: #fff;
            color: black;
        }
    }
    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #000;
            color: white;
        }
    }

Code if Js detection is needed

    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { 
      // dark mode 
    }

2. Choose a theme based on the time of day

In the age of convenience, a full-time dark mode may not be a viable option for users of your website. Your website’s flair would be spruced up immensely by using a theme that mirrors the time of day. In this manner, the early birds are taken care of and so are the night owls! It’s only sensible to maintain this natural equilibrium.

The following code is a good place to start.

  function returnThemeBasedOnTime(){
    const date = new Date()
    const hour = date.getHours()
    if (hour < 5 || hour > 20) return 'dark'
    else return 'light'
  }
  

3. Let visitors manually choose a theme

As the old adage goes ‘Beauty is in the eye of the beholder.’ Not everyone will be comfortable with a dark theme and it would help your cause if you enable the option to toggle between the two. Imagine the plight of a hypermetropic uncle browsing through your website that’s in night mode.

The following widget is a working example

Browser Support

We have all faced it.

The distressing compatibility issues that pop up while opening attachments that were created & modified in archaic versions. The same applies to the codes above as it might not run in certain versions or different browsers. To help you out, the following chart provides an outline in this regard.

Dark mode is here to stay, well, at least until a Jedi rises with a new format.

The three methods mentioned above can definitely boost the appeal of your site. And, to know more about Night mode and the related topics, here are some links for you!.

Until then, may the force be with you! 🖖