<div class=“theme-toggle”>

<input type="checkbox" id="theme-switch">
<label for="theme-switch">
  <div class="toggle"></div>
  <div class="names">
    <p class="light">Light</p>
    <p class="dark">Dark</p>
  </div>
</label>

</div>

{%- assign name = 'night_mode' -%} {%- include functions.html func='get_value' default='auto' -%} {%- assign night_mode = return -%}

<script>

(function() {
  var sw = document.getElementById('theme-switch');
  var html = document.getElementsByTagName('html')[0];
  var nightModeOption = ('{{ night_mode }}' || 'auto').toLowerCase();
  var storage = nightModeOption === 'manual'
      ? localStorage
      : sessionStorage;
  var themeData = loadThemeData();

  function saveThemeData(data) {
    storage.setItem('theme', JSON.stringify(data));
  }

  function loadThemeData() {
    var data = storage.getItem('theme');
    try {
      data = JSON.parse(data ? data : '');
    } catch(e) {
      data = { nightShift: undefined, autoToggleAt: 0 };
      saveThemeData(data);
    }
    return data;
  }

  function handleThemeToggle(nightShift) {
    themeData.nightShift = nightShift;
    saveThemeData(themeData);
    html.dataset.theme = nightShift ? 'dark' : 'light';
    setTimeout(function() {
      sw.checked = nightShift ? true : false;
    }, 50);
  }

  function autoThemeToggle() {
    // Next time point of theme toggle
    var now = new Date();
    var toggleAt = new Date();
    var hours = now.getHours();
    var nightShift = hours >= 19 || hours <=7;

    if (nightShift) {
      if (hours > 7) {
        toggleAt.setDate(toggleAt.getDate() + 1);
      }
      toggleAt.setHours(7);
    } else {
      toggleAt.setHours(19);
    }

    toggleAt.setMinutes(0);
    toggleAt.setSeconds(0);
    toggleAt.setMilliseconds(0)

    var delay = toggleAt.getTime() - now.getTime();

    // auto toggle theme mode
    setTimeout(function() {
      handleThemeToggle(!nightShift);
    }, delay);

    return {
      nightShift: nightShift,
      toggleAt: toggleAt.getTime()
    };
  }

  // Listen the theme toggle event
  sw.addEventListener('change', function(event) {
    handleThemeToggle(event.target.checked);
  });

  if (nightModeOption == 'auto') {
    var data = autoThemeToggle();

    // Toggle theme by local setting
    if (data.toggleAt > themeData.autoToggleAt) {
      themeData.autoToggleAt = data.toggleAt;
      handleThemeToggle(data.nightShift);
    } else {
      handleThemeToggle(themeData.nightShift);
    }
  } else if (nightModeOption == 'manual') {
    handleThemeToggle(themeData.nightShift);
  } else {
    var nightShift = themeData.nightShift;
    if (nightShift === undefined) {
      nightShift = nightModeOption === 'on';
    }
    handleThemeToggle(nightShift);
  }
})();

</script>