<div id='description'>
  <h3><code>Theme();</code></h3>
  <p>The library provide <code>'light'</code> (default) and <code>'dark'</code> as theme.</p>
  <p>The theme is set to <code>'dark'</code>.</p>
  <div id='chart'></div>
  <p>More info about theme can be found <a href ="https://github.com/redsift/d3-rs-theme" target="_blank">here.</a></p>
 
<div><p>The theme can also be applied to the whole page by changing the style.</p></div>  
<div><button onclick="useTheme('light');return false;" class='rs-btn--small rs-btn--selected'>Light Theme</button>
      <button onclick="useTheme('dark');return false;" class ='rs-btn--small'>Dark Theme</button>  
 </div>
 <div><p>The light theme uses the default style and dark theme uses a different library adding <code>ui-rs-core-dark.min.css</code> after <code>css/</code> which just add <code>-dark</code> to the style link.</p></div>   
</div>

#description {
  margin: 1em;
}

#chart{
  width: 100px;
}

//RedSift
//theme();
//change the theme; available theme 'light' or 'dark' 

let dataSet = [
                { "y": "Plan", "x": "Jan", "z": 100},
                { "y": "Bonus", "x": "Feb", "z": 460},
                { "y": "Plan", "x": "Mar", "z": 720},
               ];

let chart = d3_rs_squares.html()
                         .theme('dark')  //using the'dark' theme             
                         .width(400)  //set the width
                         .height(250);  //set the height
d3.select('#chart')
  .datum(dataSet)   
  .call(chart);

//toggling to different theme
function useTheme(themeName) {
  [].slice.call(document.styleSheets).forEach((style) => {
    if (style.href) {
      if (style.href.startsWith('https://static.redsift.io/reusable/ui-rs-core')) {
        style.disabled = true;
        if (style.href.endsWith('ui-rs-core.min.css') && themeName === 'light') {
          style.disabled = false;
        } else if (style.href.endsWith('ui-rs-core-dark.min.css') && themeName === 'dark') {
          style.disabled = false;
        }
      }
    }
  });
}

// Generic function to toggle selected state of a button
d3.selectAll('button')
  .on('click', function() {
    let selected = this;
    d3.selectAll('button')
      .classed('rs-btn--selected', function() {
        return (selected === this);
      });
  });