DEV Community

Vishnu Baliga
Vishnu Baliga

Posted on

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

Code if Js detection is needed

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.

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.

prefers-color-scheme browser support

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! 🖖


Originally published at https://vishnubaliga.com

Top comments (10)

Collapse
 
sugud0r profile image
Moisés González

Note: there is no need to use document.querySelector("body") since document.body is the <body> tag of the document.

Collapse
 
vishnubaliga profile image
Vishnu Baliga

Thank you for pointing it out. I've updated the code accordingly. :)

Collapse
 
sugud0r profile image
Moisés González

Good job, btw. I did not know that dark mode is just invert colors.

Thread Thread
 
vishnubaliga profile image
Vishnu Baliga

Thank you. Yes it is, Insanely Simple.

Collapse
 
andrewkeyboardwarrior profile image
Andrew Gibson

I was hoping to see a solution that would somehow magically invert all the colors.
Some of us are working with badly written legacy CSS where there are a ton of classes and IDs and no CSS variables.
Simply using filter: invert(100%); somehow breaks a lot of things.

Collapse
 
vishnubaliga profile image
Vishnu Baliga

I hope such things are introduced as well. I bet CSS Houdini will be a game changer. Let's see how it turns out to be in the future.

Collapse
 
waylonwalker profile image
Waylon Walker

The new OS-Level preference is so awesome!

Collapse
 
vishnubaliga profile image
Vishnu Baliga

True, I second that.

Collapse
 
adgower profile image
Alex Gower

Nice, Thanks!

Collapse
 
vishnubaliga profile image
Vishnu Baliga

Glad you liked it. Thank you.