Switch dark mode without page refresh (except for the workbench)

Orange-Cyberdefense · Feb 18, 2023 · 0f2328a · 0f2328a
1 parent d0c0374
commit 0f2328a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/app/base/static/assets/js/grepmarx-common.js b/app/base/static/assets/js/grepmarx-common.js
@@ -60,6 +60,30 @@ function showSelectedFile(el) {
     document.getElementById("source-archive-text").innerText = el.files[0].name;
 }
 
+// ------------ Switch dark mode
+
+function switchTheme() {
+    // Switch theme in the current page
+    if (document.body.classList.contains("dark-mode")) {
+        document.body.classList.remove("dark-mode");
+        document.getElementById("main-navbar").classList.remove("navbar-gray-dark");
+        document.getElementById("main-navbar").classList.remove("navbar-dark");
+        document.getElementById("main-navbar").classList.add("navbar-white");
+        document.getElementById("main-navbar").classList.add("navbar-light");
+
+    } else {
+        document.body.classList.add("dark-mode");
+        document.getElementById("main-navbar").classList.remove("navbar-white");
+        document.getElementById("main-navbar").classList.remove("navbar-light");
+        document.getElementById("main-navbar").classList.add("navbar-gray-dark");
+        document.getElementById("main-navbar").classList.add("navbar-dark");
+    }
+    // Change the preference server-side
+    reqSwitchTheme = new XMLHttpRequest();
+    reqSwitchTheme.open('GET', '/switch-theme');
+    reqSwitchTheme.send();
+}
+
 // ------------ Projects auto-refresh
 
 async function ajaxRefreshStatus(projectId) {

diff --git a/app/base/templates/dashboard.html b/app/base/templates/dashboard.html
@@ -142,13 +142,9 @@ <h3 class="card-title">
                 label: 'Analysis',
                 data: datapoints1,
                 fill: true,
-                {% if user is defined and user.dark_theme %}
-    backgroundColor: "#454d55",
-        {% else %}
-    backgroundColor: "#f4f6f9",
-        {% endif %}
-    borderColor: "#fd7e14",
-        tension: 0.4
+                backgroundColor: "#454d5520",
+                borderColor: "#fd7e14",
+                tension: 0.4
             }
         ]
     };

diff --git a/app/base/templates/navigation.html b/app/base/templates/navigation.html
@@ -1,5 +1,5 @@
 <!-- Navbar -->
-<nav
+<nav id="main-navbar"
   class="main-header navbar navbar-expand 
   {% if user is defined and user.dark_theme %}
   navbar-gray-dark navbar-dark
@@ -21,7 +21,7 @@
 
     <!-- Dark theme switch -->
     <li class="nav-item dropdown">
-      <a class="nav-link" href="/switch-theme">
+      <a class="nav-link" onclick="switchTheme()">
         <span class="fas fa-adjust"></span></a>
     </li>