title: Dark mode how to add a single switch
body: <p>I would like to make a single light/dark mode switch for a website. Currently i got 2 switches, one for website and one for chart. Since it's not great UI to toggle 2 switches, I would like to apply both triggers in one switch.</p>
  
  <p>Is it possible to summarize them up in one switch instead of 2 ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); /* This switch is toggling dark/light mode on whole website. */
  
  function switchTheme(e) {
    if (e.target.checked) {
      document.documentElement.setAttribute('data-theme', 'dark');
    } else {
      document.documentElement.setAttribute('data-theme', 'light');
    }
  }
  
  toggleSwitch.addEventListener('change', switchTheme, false);
  
  function switchTheme(e) {
    if (e.target.checked) {
      document.documentElement.setAttribute('data-theme', 'dark');
      localStorage.setItem('theme', 'dark'); //add this
    } else {
      document.documentElement.setAttribute('data-theme', 'light');
      localStorage.setItem('theme', 'light'); //add this
    }
  }
  
  const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
  
  if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
  
    if (currentTheme === 'dark') {
      toggleSwitch.checked = true;
    }
  }
  
  /* Here is full JS code for a chart together with a switch especially for Chart (it doesn't affect website)  */
  
  const URL_DATA = 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/stock-chart-with-volume_data.json';
  const URL_SCHEMA = 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/stock-chart-with-volume_schema.json';
  
  const jsonify = res =&gt; res.json();
  const dataFetch = fetch(URL_DATA).then(jsonify);
  const schemaFetch = fetch(URL_SCHEMA).then(jsonify);
  
  Promise.all([
    dataFetch,
    schemaFetch
  ]).then(([
    data,
    schema
  ]) =&gt; {
    var fusionTable = new FusionCharts.DataStore().createDataTable(data,
      schema);
  
    new FusionCharts({
      type: 'timeseries',
      renderAt: 'container',
      width: '100%',
      height: 550,
      dataSource: {
        caption: {
          text: "Apple Inc. Stock Price"
        },
        subcaption: {
          text: "Stock prices from May 2014 - November 2018"
        },
        chart: {
          exportenabled: 1,
          multicanvas: true,
          theme: "fusion"
        },
        data: fusionTable,
        yaxis: [{
            plot: [{
              value: {
                open: "Open",
                high: "High",
                low: "Low",
                close: "Close"
              },
              type: "candlestick"
            }],
            format: {
              prefix: "$"
            },
            title: "Stock Price"
          },
          {
            plot: [{
              value: "Volume",
              color: "#228B22",
              type: "column"
            }],
            // max: "900000000"
          }
        ],
        navigator: {
          enabled: 0
        }
      },
      events: {
        beforeRender: function(e, d) {
          var container = e.data.container;
          // Change the sizes according to your need
          var options = {
            fusion: "Light",
            candy: "Dark",
          };
          var themeSelected = "fusion";
  
          function instantiate() {
            // Create option containers
            var parent = container.parentNode;
  
            var optionsContainer = document.createElement("div");
            optionsContainer.id = "config-container";
  
            var spanLabel = document.createElement("span");
            spanLabel.id = "select-text";
            spanLabel.innerText = "Choose a theme: ";
  
            var radioContainer = document.createElement("div");
            addClass(radioContainer, "change-type");
            window.__onThemeChange = function(option) {
              e.sender.setChartAttribute("theme", option);
            };
  
            // Util to add class
            function addClass(element, className) {
              var element,
                name = className,
                arr;
              arr = element.className.split(" ");
              if (arr.indexOf(name) == -1) {
                element.className += " " + name;
              }
            }
  
            function radioWrapper(
              wrapperId,
              inputId,
              label,
              selected,
              optionLabel
            ) {
              var item = "&lt;div id='" + wrapperId + "' &gt;";
              item +=
                "&lt;input name='dimesion-selector' id='" +
                inputId +
                "' type='radio' " +
                (selected ? "checked='checked'" : "") +
                " onchange='__onThemeChange(\"" +
                optionLabel +
                "\")'/&gt;";
              item += "&lt;label for='" + inputId + "' &gt;" + label + "&lt;/label&gt;";
              item += "&lt;/div&gt;";
              return item;
            }
            var changeTypeChilds = "";
  
            Object.keys(options).forEach(function(option, index) {
              var label = options[option];
              var selected = themeSelected === option;
              var radioOption = radioWrapper(
                "radio" + (index + 1),
                "radioButton" + (index + 1),
                label.toUpperCase(),
                selected,
                option
              );
              changeTypeChilds += radioOption;
            });
  
            radioContainer.innerHTML = changeTypeChilds;
  
            optionsContainer.appendChild(spanLabel);
            optionsContainer.appendChild(radioContainer);
  
            parent.appendChild(optionsContainer);
  
            var css =
              '.change-type{display:inline-block;margin:0 10px;font-family:basefontRegular,Helvetica Neue,Arial,sans-serif}.change-type&gt;div{display:inline-flex;position:relative;margin:0 10px}.change-type label{position:relative;padding:5px 4px 5px 30px;border-radius:4px}.change-type input{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;left:0;position:absolute}.change-type label:after,.change-type label:before{content:"";position:absolute}.change-type label:before{display:block;background:#fff;border:2px solid #949697;box-shadow:none;border-radius:50%;top: 15px;left: 9px;width:1rem;height:1rem}.change-type label:after{    width: .55rem;height: .55rem;top: 18px;left: 11px;border-radius: 100%;}.change-type input:checked~label{color:#48b884;font-weight:600;box-shadow:0 4px 9px 0 rgba(104,105,128,.22)}.change-type input:checked~label:before{color:#fff;box-shadow:none;border:2px solid #48b884}.change-type input:checked~label:after{background:#55bd8d}';
  
            var styleNode = document.createElement("style");
            styleNode.innerHTML = css;
            document.body.appendChild(styleNode);
          }
          if (!window.__sample_theme_change) {
            instantiate();
          }
          window.__sample_theme_change = true;
        }
      }
  
    }).render();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* This is a CSS for a light/dark mode on a website  */
  :root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
  }
  
  [data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
  }
  
  body {
    background-color: var(--bg-color);
    color: var(--font-color);
    /*other styles*/
  }
  
  h1 {
    color: var(--secondary-color);
    /*other styles*/
  }
  
  a {
    color: var(--primary-color);
    /*other styles*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container" style="width: 100%"&gt;&lt;/div&gt;
  &lt;!-- This is container for a Chart. --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JSFiddle mirror: <a href="https://jsfiddle.net/hz3Lva1e" rel="nofollow noreferrer">https://jsfiddle.net/hz3Lva1e</a></p>