<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>