Dark Mode Research

30 May 2020 - 3 mins read time
Tags: practice coding

What is dark mode?

A bit of searching will have Wikipedia turn up eventually. There’s a great wealth of information about the history of the color scheme. This is like the color combination that we see when reading on a E-Ink display, CRT monitors or when using a dark mode in our computer screens and mobile apps.

Originally, computer user interfaces were formed on CRTs. The phosphor was normally a very dark color, and lit up brightly when the electron beam hit it, appearing to be green or amber on black, depending on phosphors applied on a monochrome screen. RGB screens continued along a similar vein, using all the beams set to “on” to form white.
Quote from Wikipedia Page on the Light-on-Dark Color Scheme

Dark mode reduces the brightness from device screens. They help reduce eye strain and facilitating screen use in dark environments – all while conserving battery power. I believe it also helps accessibility. Sometimes people find it harder to view a screen that has a full white background with not so dark letters. Design wise it is good to consider visiting a reference website such as WebAIM Contrast Checker to make sure what you are publishing doesn’t end up being an issue to others to read.

Dark Mode

A dark theme uses dark gray, rather than black, as the primary surface color for components. Dark gray surfaces can express a wider range of color, elevation, and depth, because it’s easier to see shadows on gray (instead of black). Dark gray surfaces also reduce eye strain, as light text on a dark gray surface has less contrast than light text on a black surface.
Quote from Google’s Mateial Design Dark Themes Page

Personally I like dark mode toggles. Much as I like having choices when using anything really. I often go through options or settings to find ways to customize my viewing experience. It’s also important to think about what other people experience. Having a strict layout may not be the best choice to publish, even if it looks pretty.

Dark Mode Buddy
Dark Mode Buddy


Code to practice with

First up is the HTML & CSS:

With the HTML set with <body> element created, style the <body> element and create a .dark-mode class for toggle.

body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}


Then the JS:

Get the <body> element and toggle between the .dark-mode class.

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}


I traced the idea behind adding a dark/light toggle back to an interview about Windows Phones:

Dark backgrounds were added to Windows Phone 7 with energy consumption in mind since fully black pixels emit no light on OLED screens. Neat. ___


Reference

How to from w3 Schools website
Wikipedia article
Material Design Guidance
Mozilla Web Technologies for Developers
Section 508 or general guidance on accessibility Interview: Windows Phone 7 battery life, copy/paste, multitasking, and more