💄 UI: dark/light mode switcher

2 files changed, 47 insertions, 4 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index fde903ac3..519c17158 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -85,6 +85,51 @@ text_truncate = function(str, length) {
     }
 };
 
+function switchTheme(e) {
+    var toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');
+    if (e.target.checked) {
+        localStorage.setItem('theme', 'dark');
+        document.documentElement.setAttribute('data-theme', 'dark');
+        toggleSwitch.checked = true;
+        $("#theme-switch .fa.fa-sun-o").addClass("d-none");
+        $("#theme-switch .fa.fa-moon-o").removeClass("d-none");
+    } else {
+        localStorage.setItem('theme', 'light');
+        document.documentElement.setAttribute('data-theme', 'light');
+        toggleSwitch.checked = false;
+        $("#theme-switch .fa.fa-moon-o").addClass("d-none");
+        $("#theme-switch .fa.fa-sun-o").removeClass("d-none");
+    }
+}
+
+function manageColorScheme(){
+    var theme = "light";
+    if(localStorage.getItem("theme")){
+        if(localStorage.getItem("theme") == "dark"){
+            theme = "dark";
+        }
+    } else {
+        const dark_mode_mql = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+        if (dark_mode_mql && dark_mode_mql.matches) {
+            theme = "dark";
+        }
+    }
+    if (theme == "dark") {
+        document.documentElement.setAttribute("data-theme", "dark");
+        $("#theme-switch .fa.fa-sun-o").addClass("d-none");
+        $("#theme-switch .fa.fa-moon-o").removeClass("d-none");
+    } else {
+        $("#theme-switch .fa.fa-moon-o").addClass("d-none");
+        $("#theme-switch .fa.fa-sun-o").removeClass("d-none");
+    }
+    var toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');
+    toggleSwitch.addEventListener('change', switchTheme, false);
+    // pre-check the dark-theme checkbox if dark-theme is set
+    if (document.documentElement.getAttribute("data-theme") == "dark"){
+        toggleSwitch.checked = true;
+    }
+}
+
 /* default function to prevent undefined */
 function get_next_table_id(){}
 function get_previous_table_id(){}
diff --git a/ishtar_common/static/media/styles.css b/ishtar_common/static/media/styles.css
index 515293653..2ed496c31 100644
--- a/ishtar_common/static/media/styles.css
+++ b/ishtar_common/static/media/styles.css
@@ -202,8 +202,6 @@ table.dataTable thead th, table.dataTable thead td {
     height: 50px;
 }
 
-@media (prefers-color-scheme: dark) {
-    html{
-        background-image: url('images/ishtar-bg-dark.png');
-    }
+html[data-theme="dark"] {
+    background-image: url('images/ishtar-bg-dark.png');
 }