Dark mode or night mode is becoming more and more popular these days. As the amount of time we are spending in front of the computer increases, we started to look more into on how to improve our experience. Dark mode/Night mode is one such setting. What it does (mainly) is it makes all the white part of the application to black - major chunk of which would be the background. When the color of the background is made black, it emits less light. Now not all displays are the same, each display creates the dark color in different ways. Like:

  • On an LCD screen. The liquid crystal elements block the white light from the backlight. And this results in a dark (almost black) pixel.
  • On an OLED screen. The pixel is turned off, no light is emitted, this produces a deep black.
  • On a CRT screen. The electron beam is turned off as it passes the pixel. Producing no phosphorescent glow.
  • On an e-Ink screen. Little spherical beads which are half black/half white, are rotated so their black side is facing outwards.

Regardless as you can see, darker colors results in less lights being emitted and leading to less strain to the eye. As a person who spend more time in front of a screen, I cannot fathom how useful this is. I have been a huge advocate of using night color/night mode in computer to improve developer health. Hence this article and why my blog has a dark mode now.

My first step was to see if there was anything that could change my theme automatically. But more I researched more I found the automatic color changes to be not the perfect solution. So I decided to use a javascript library to get started, and then started to overwrite the particular settings I wanted one by one. It would also give me the option to further improve the UI in future. Hence the solution I ended up using was not 100% automatic and not 100% custom, but hybrid.

I used the library Darkmode.Js. And then wrote a dark.scss, to overwrite few classes when the darkmode is activated.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

.darkmode--activated {
  .main {
    color: $light-gray;
  }

  .header {
    color: $light-gray;
  }

  .menu-item-link {
    color: $light-gray;
  }
  .post .post-content code, .post .post-content pre {
    background: $black;
  }

  .post-link {
    color: $theme-color;
  }

  .post .post-content .highlight>.chroma table::after {
    color: $white;
    background: $dark-gray;
  }

  .logo-wrapper {
    a {
      color: $theme-color;
    }
  }

  .footer {
    background-color: $black;
    padding-top: 2em;
    margin-top: 0em;
  }

  .footer .social-links .iconfont {
    color: $white;
  }

  .container {
    background-color: $black;
  }

  .pagination {
    a {
      color: $theme-color;
    }
  }
}

I like to write scss so that I can have variables in my css file. Using variables instead of hard coding the color code to black in each location, allows me to easily change the color in future, instead of having to search and replace black at all location.

Let me know if you are aware of any library that automatically/easily covert a template to dark mode. Also if I have missed something that you feel could be useful or important.