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 = 10000; xhr.open('GET', url, true); set_mode(dark_mode); localStorage.setItem('dark_mode', dark_mode); xhr.send(); }); 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'); } }