{"id":19725,"date":"2020-05-20T12:56:57","date_gmt":"2020-05-20T11:56:57","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=19725"},"modified":"2026-01-12T11:40:29","modified_gmt":"2026-01-12T11:40:29","slug":"dark-mode-in-highcharts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/best-practices\/dark-mode-in-highcharts\/","title":{"rendered":"Dark Mode in Highcharts"},"content":{"rendered":"

I don\u2019t hate Dark Mode, but\u2026<\/span><\/p>\n

Perhaps my timing was just bad. Since <\/span>2019 was the year of Dark Mode<\/span><\/a>, 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.\u00a0<\/span><\/p>\n

I even redesigned my website to a light theme, scrapping a 20-year history of dark design aimed to highlight the images.<\/span><\/p>\n

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.<\/span><\/p>\n

So I set out to find the best approach to letting a website obey the OS\u2019s color mode setting, and found a nice blog article, <\/span>Dark mode using prefers-color-scheme rule and CSS variables<\/span><\/a>. 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)<\/code>)\u00a0with some override coloring.\u00a0<\/span><\/p>\n

My website also has a lot of charts. With <\/span>Highcharts Styled Mode<\/span><\/a>, 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: <\/span>
\n<\/span><\/p>\n

    \n
  1. Defined the chart colors in the :root<\/code> selector.<\/span><\/li>\n
  2. Defined the dark chart colors in the media query.<\/span><\/li>\n<\/ol>\n

    The end result can be seen at <\/span>www.vikjavev.no\/ver<\/span><\/a>. If you\u2019re on a Mac, go to Settings<\/strong>, then General<\/strong>, and toggle the Appearance<\/strong> at the top.\u00a0<\/span><\/p>\n

    I have also distilled the gist of it in this <\/span>jsFiddle<\/span><\/a> (note that the jsFiddle UI itself is always dark):<\/span><\/p>\n

    \"dark
    \nA nice little trick is to apply fill-opacity<\/code> 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 <\/span>    available CSS classes<\/span><\/a> for Highcharts are defined, to avoid bloating the demo.<\/span><\/p>\n

     <\/p>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    Check out how to create a dark\/light mode interactive chart with Highcharts.<\/p>\n","protected":false},"author":49,"featured_media":19753,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1104],"tags":[1094],"coauthors":[734],"class_list":["post-19725","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-best-practices","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/49"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=19725"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19725\/revisions"}],"predecessor-version":[{"id":29235,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19725\/revisions\/29235"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/19753"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=19725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=19725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=19725"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=19725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}