Dark Mode in Highcharts

light dark mode

I don’t hate Dark Mode, but…

Perhaps my timing was just bad. Since 2019 was the year of Dark Mode, I figured I wanted to test the new feature on my iPhone, and enabled Dark Mode after sunset. This was in January and my brain was already screaming for daylight during the dark Nordic winter. After a couple of weeks looking at the gloomy OS and black implementations of websites and apps, all while the rain was pouring down from the murky skies above, I concluded that dark designs were the last thing I needed. 

I even redesigned my website to a light theme, scrapping a 20-year history of dark design aimed to highlight the images.

Fast forward to May, and the bright Nordic summer is upon us. I figured a little dark OS design would help the brain settle down at night and get the melatonin production going.

So I set out to find the best approach to letting a website obey the OS’s color mode setting, and found a nice blog article, Dark mode using prefers-color-scheme rule and CSS variables. CSS variables are a great feature, and all modern browsers (not including IE11) support them. Also, my website already used them, so implementing dark mode was done in a breeze by adding a media query (@media (prefers-color-scheme: dark)) with some override coloring. 

My website also has a lot of charts. With Highcharts Styled Mode, all coloring is set by CSS, so I made the charts subject to the color scheme in the same way as the rest of the website:

  1. Defined the chart colors in the :root selector.
  2. Defined the dark chart colors in the media query.

The end result can be seen at www.vikjavev.no/ver. If you’re on a Mac, go to Settings, then General, and toggle the Appearance at the top. 

I have also distilled the gist of it in this jsFiddle (note that the jsFiddle UI itself is always dark):

dark mode
A nice little trick is to apply fill-opacity to text elements to adjust the contrast, instead of defining a separate color variable with its own Dark Mode override. In the jsFiddle, this can be seen for example for the subtitle, which should be a little dimmer than the main title. Note that in the fiddle, only a few of the available CSS classes for Highcharts are defined, to avoid bloating the demo.