Member-only story

Dark Mode using CSS Variables

Tapajyoti Bose
2 min readFeb 21, 2021

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

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Tapajyoti Bose
Tapajyoti Bose

Written by Tapajyoti Bose

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

No responses yet

Write a response

I was gonna say that I think "steroids" are a bad analogy. But after I actually bothered to read up on them, I think the analogy is perfect.
Steroids just make you look tougher without making you tough. From my experience using TS for a couple of…

A steroid is a biologically active organic compound with four rings arranged in a specific molecular configuration. Steroids have two principal biological functions: as important components of cell membranes which alter membrane fluidity; and as signaling molecules.