From bfa488f77d592d088ffe43fc14419075b0b7c0dd Mon Sep 17 00:00:00 2001 From: Omar Roth Date: Sun, 5 May 2019 07:34:27 -0500 Subject: Add option to toggle theme without reload --- assets/js/themes.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 assets/js/themes.js (limited to 'assets/js/themes.js') diff --git a/assets/js/themes.js b/assets/js/themes.js new file mode 100644 index 00000000..178ff112 --- /dev/null +++ b/assets/js/themes.js @@ -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'); + } +} -- cgit v1.2.3