{"id":24464,"date":"2023-11-27T19:31:37","date_gmt":"2023-11-27T19:31:37","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24464"},"modified":"2026-01-13T11:39:15","modified_gmt":"2026-01-13T11:39:15","slug":"light-dark-theme-highcharts-dashboards","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/light-dark-theme-highcharts-dashboards\/","title":{"rendered":"How to add light and dark theme to Highcharts dashboards"},"content":{"rendered":"<p>In this article, I will guide you through the process of building a straightforward dashboard using Highcharts Dashboards components. Additionally, I&#8217;ll demonstrate how easy it is to implement a light or dark mode feature.<\/p>\n<p>Check below the dashboard that I will show in this article:<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"This chart demonstrates how playDelay can be used to easily arrange multiple tracks to play one after the other for each data point. Here we are using this technique to first speak the box plot name, and then play each data item for a box plot in sequence.\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/dashboards\/demo\/light-dark-theme\" width=\"100%\" height=\"850px\"><\/iframe><\/p>\n<p>The dashboard visualizes the amount of vitamin A in the following foods: beef liver, lamb liver, cod liver oil, mackerel, and tuna. The dashboard has three sections:<\/p>\n<ul>\n<li>A bubble chart on the left.<\/li>\n<li>A data grid is on the right.<\/li>\n<li>A simple panel at the bottom to switch between light and dark mode.<\/li>\n<\/ul>\n<p>Let\u2019s dive into the code.<\/p>\n<h2>Library<\/h2>\n<p>Make sure to include the necessary Highcharts Dashboards libraries:<\/p>\n<pre>&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/dashboards.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/datagrid.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/highcharts.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/modules\/dashboards-plugin.js\"&gt;&lt;\/script&gt;<\/pre>\n<h2>Data<\/h2>\n<p>The next step is to define the data. I am using a very simple data set structure:<\/p>\n<pre>const data = [\r\n  ['Food', 'Vitamin A'],\r\n  ['Beef Liver', 6421],\r\n  ['Lamb Liver', 2122],\r\n  ['Cod Liver Oil', 1350],\r\n  ['Mackerel', 388],\r\n  ['Tuna', 214]\r\n];<\/pre>\n<h2>Layout configuration<\/h2>\n<p>I use the <code>gui<\/code> object to define the overall structure and appearance of the dashboard. In this case, there is one row with two cells, one for the chart and the other one for the data grid:<\/p>\n<pre>gui: {\r\n  layouts: [{\r\n    id: 'layout-1',\r\n    rows: [{\r\n      cells: [{\r\n        \u2026\r\n        id: 'dashboard-col-0'\r\n      }, {\r\n        \u2026\r\n        id: 'dashboard-col-1'\r\n      }]\r\n    }]\r\n  }]\r\n},<\/pre>\n<h2>Components<\/h2>\n<p>The <code>components<\/code> array is where I define the individual components that will be placed in the cells of the dashboard. The first cell contains chart information, whereas the second has data grid information.<\/p>\n<pre>components: [{\r\n  cell: 'dashboard-col-0',\r\n  \u2026\r\n  chartOptions: {\r\n    \/\/ ... (Highcharts chart configuration)\r\n  }\r\n}, {\r\n  cell: 'dashboard-col-1',\r\n  type: 'DataGrid',\r\n  dataGridOptions: ...\r\n}]<\/pre>\n<h2>Light and dark mode<\/h2>\n<p>Finally, it is time to implement the light\/dark mode functionality, and it is super easy.<br \/>\nHere is the HTML section:<\/p>\n<pre> &lt;h4&gt;Color theme&lt;\/h4&gt;\r\n &lt;label&gt;\r\n   &lt;input type=\"radio\" name=\"color-mode\" value=\"none\" checked&gt;\r\n   System default\r\n &lt;\/label&gt;\r\n &lt;label&gt;\r\n   &lt;input type=\"radio\" name=\"color-mode\" value=\"light\"&gt;\r\n   Light\r\n &lt;\/label&gt;\r\n &lt;label&gt;\r\n   &lt;input type=\"radio\" name=\"color-mode\" value=\"dark\"&gt;\r\n   Dark\r\n &lt;\/label&gt;<\/pre>\n<p>And here is the js snippet:<\/p>\n<pre>[...document.querySelectorAll('input[name=\"color-mode\"]')]\r\n.forEach(input =&gt; {\r\n  input.addEventListener('click', e =&gt; {\r\n    document.getElementById('container').className =\r\n      e.target.value === 'none' ? '' : `highcharts-${e.target.value}`;\r\n  });\r\n});<\/pre>\n<p>Basically, I use a set of radio buttons for selecting the color theme and the snippet code to add click event listeners to these radio buttons. When a radio button is clicked, it updates the class of the &#8216;container&#8217; element, triggering the application of the corresponding Highcharts Dashboard theme (light, dark, or none for system default). This class change influences the application of distinct color CSS variables. If you want to customize colors for either the light or dark themes, or both, you can refer to the <a href=\"https:\/\/github.com\/highcharts\/highcharts\/blob\/master\/css\/highcharts.css\" target=\"_blank\" rel=\"noopener\">highcharts.css file<\/a> to understand how the colors are defined. This setup allows you to switch between different color themes for the Highcharts Dashboard dynamically. Simple right \ud83d\ude42<\/p>\n<p>Now, you know a new trick to create dashboards with light and dark modes with Highcharts dashboards. Explore these helpful links to delve deeper into creating your <a href=\"https:\/\/www.highcharts.com\/docs\/chart-design-and-style\/custom-themes-in-styled-mode\" target=\"_blank\" rel=\"noopener\"> personalized theme<\/a> style mode and <a href=\"https:\/\/www.highcharts.com\/docs\/dashboards\/style-by-css\" target=\"_blank\" rel=\"noopener\">enhancing dashboard styling through CSS<\/a>.<\/p>\n<h2><strong>Related posts<\/strong><\/h2>\n<ul>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/data-visualization-library-by-highcharts\/\">Data visualization library by Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/javascript-graph-visualization-library-by-highcharts\/\">JavaScript graph visualization library by Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/javascript-library-by-highcharts\/\">JavaScript library by Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/javascript-map-library-by-highcharts\/\">JavaScript map library by Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/map-library-by-highcharts\/\">Map library by Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/data-visualization-framework-by-highcharts\/\">Data visualization framework by Highcharts<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create Highcharts dashboards with light and dark themes<\/p>\n","protected":false},"author":32,"featured_media":24477,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1010,1031],"coauthors":[699],"class_list":["post-24464","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-dashboards","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24464","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\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=24464"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24464\/revisions"}],"predecessor-version":[{"id":26042,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24464\/revisions\/26042"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24477"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24464"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}