blog/_includes/extensions/theme-toggle.html
jeffreytse ae318f5d72 feat: better dark mode strategy (#15)
Whatever the user's choice is, it will supersede the default
setting of the site and be kept during the visit (session).
Only the dark mode setting is `manual`, the user's choise will
be always kept on every visit (i.e. no matter the browser
is closed or not)
2020-12-28 12:04:18 +08:00

108 lines
2.9 KiB
HTML

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