hernik/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: better dark mode strategy (#15)

Browse source 
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)
This commit is contained in:
jeffreytse 2020-12-28 12:04:18 +08:00
parent 1b2d59fd18
commit ae318f5d72
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
_includes/extensions/theme-toggle.html
View file

@ -17,18 +17,22 @@
(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) {
localStorage.setItem('theme', JSON.stringify(data));
storage.setItem('theme', JSON.stringify(data));
}
function loadThemeData() {
var data = localStorage.getItem('theme');
var data = storage.getItem('theme');
try {
data = JSON.parse(data ? data : '');
} catch(e) {
data = { nightShift: false, autoToggleAt: 0 };
data = { nightShift: undefined, autoToggleAt: 0 };
saveThemeData(data);
}
return data;
@ -81,9 +85,6 @@
handleThemeToggle(event.target.checked);
});
var nightModeOption = '{{ night_mode }}' || 'auto';
nightModeOption = nightModeOption.toLowerCase();
if (nightModeOption == 'auto') {
var data = autoThemeToggle();
@ -97,7 +98,11 @@
} else if (nightModeOption == 'manual') {
handleThemeToggle(themeData.nightShift);
} else {
handleThemeToggle(nightModeOption == 'on');
var nightShift = themeData.nightShift;
if (nightShift === undefined) {
nightShift = nightModeOption === 'on';
}
handleThemeToggle(nightShift);
}
})();
</script>