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.
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)
Note: there is no need to use
document.querySelector("body")
sincedocument.body
is the<body>
tag of the document.Thank you for pointing it out. I've updated the code accordingly. :)
Good job, btw. I did not know that dark mode is just invert colors.
Thank you. Yes it is, Insanely Simple.
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.
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.
The new OS-Level preference is so awesome!
True, I second that.
Nice, Thanks!
Glad you liked it. Thank you.