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)
This commit is contained in:
parent
1b2d59fd18
commit
ae318f5d72
1 changed files with 12 additions and 7 deletions
|
@ -17,18 +17,22 @@
|
||||||
(function() {
|
(function() {
|
||||||
var sw = document.getElementById('theme-switch');
|
var sw = document.getElementById('theme-switch');
|
||||||
var html = document.getElementsByTagName('html')[0];
|
var html = document.getElementsByTagName('html')[0];
|
||||||
|
var nightModeOption = ('{{ night_mode }}' || 'auto').toLowerCase();
|
||||||
|
var storage = nightModeOption === 'manual'
|
||||||
|
? localStorage
|
||||||
|
: sessionStorage;
|
||||||
var themeData = loadThemeData();
|
var themeData = loadThemeData();
|
||||||
|
|
||||||
function saveThemeData(data) {
|
function saveThemeData(data) {
|
||||||
localStorage.setItem('theme', JSON.stringify(data));
|
storage.setItem('theme', JSON.stringify(data));
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadThemeData() {
|
function loadThemeData() {
|
||||||
var data = localStorage.getItem('theme');
|
var data = storage.getItem('theme');
|
||||||
try {
|
try {
|
||||||
data = JSON.parse(data ? data : '');
|
data = JSON.parse(data ? data : '');
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
data = { nightShift: false, autoToggleAt: 0 };
|
data = { nightShift: undefined, autoToggleAt: 0 };
|
||||||
saveThemeData(data);
|
saveThemeData(data);
|
||||||
}
|
}
|
||||||
return data;
|
return data;
|
||||||
|
@ -81,9 +85,6 @@
|
||||||
handleThemeToggle(event.target.checked);
|
handleThemeToggle(event.target.checked);
|
||||||
});
|
});
|
||||||
|
|
||||||
var nightModeOption = '{{ night_mode }}' || 'auto';
|
|
||||||
nightModeOption = nightModeOption.toLowerCase();
|
|
||||||
|
|
||||||
if (nightModeOption == 'auto') {
|
if (nightModeOption == 'auto') {
|
||||||
var data = autoThemeToggle();
|
var data = autoThemeToggle();
|
||||||
|
|
||||||
|
@ -97,7 +98,11 @@
|
||||||
} else if (nightModeOption == 'manual') {
|
} else if (nightModeOption == 'manual') {
|
||||||
handleThemeToggle(themeData.nightShift);
|
handleThemeToggle(themeData.nightShift);
|
||||||
} else {
|
} else {
|
||||||
handleThemeToggle(nightModeOption == 'on');
|
var nightShift = themeData.nightShift;
|
||||||
|
if (nightShift === undefined) {
|
||||||
|
nightShift = nightModeOption === 'on';
|
||||||
|
}
|
||||||
|
handleThemeToggle(nightShift);
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue