Dark Mode using CSS Variables

What is Dark Mode?

Dark mode, also called Light-on-dark color scheme, is a color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background and is often discussed in terms of computer user interface design and web design.

The idea behind dark mode is that it reduces the light emitted by device screens while maintaining the minimum color contrast ratios required for readability.

What are the advantages of Dark Mode?

  • Can use less energy on the using device
  • Can potentially reduce eye strain and dry eyes in low-light conditions
  • Less blue light emitted from your phone - which can keep you awake if you use your device before heading to bed

How to implement dark mode in your website?

Lets start with a HTML skeleton and a button and a linked stylesheet and script

Now let’s address the main issue. First we will be adding the CSS variables for the colors (lets call them primary and background) and override the required color(s) in the dark mode

So from the JavaScript, we only need to toggle the class list of the body of the HTML document

So combining everything together, we get:

Wrapping Up

In this article, we went through an extremely easy solution to implement Dark Mode in your website. Hope this helps in your journey :)

Project using the same implementation:

Research says, writing down your goals on pen & paper makes you 21% to 39% more likely to achieve them. Check out these notebooks and journals to make the journey of achieving your dreams easier: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Originally published at https://dev.to on February 21, 2021.

--

--

Top Rated Freelancer || Blogger || Cross-Platform App Developer || Web Developer || Open Source Contributor || FIRE Enthusiast

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tapajyoti Bose

Tapajyoti Bose

Top Rated Freelancer || Blogger || Cross-Platform App Developer || Web Developer || Open Source Contributor || FIRE Enthusiast