Add option to toggle theme without reload

This commit is contained in:
Omar Roth 2019-05-05 07:34:27 -05:00
parent 03be793930
commit bfa488f77d
No known key found for this signature in database
GPG key ID: B8254FB7EC3D37F2
3 changed files with 49 additions and 8 deletions

34
assets/js/themes.js Normal file
View file

@ -0,0 +1,34 @@
var toggle_theme = document.getElementById('toggle_theme')
toggle_theme.href = 'javascript:void(0);';
toggle_theme.addEventListener('click', function () {
var dark_mode = document.getElementById('dark_theme').media == 'none';
var url = '/toggle_theme?redirect=false';
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.timeout = 20000;
xhr.open('GET', url, true);
xhr.send();
set_mode(dark_mode);
localStorage.setItem('dark_mode', dark_mode);
});
window.addEventListener('storage', function (e) {
if (e.key == 'dark_mode') {
var dark_mode = e.newValue === 'true';
set_mode(dark_mode);
}
});
function set_mode(bool) {
document.getElementById('dark_theme').media = !bool ? 'none' : '';
document.getElementById('light_theme').media = bool ? 'none' : '';
if (bool) {
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
} else {
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
}
}