From c852e624e90eb9d96b507236d633ec0578b56962 Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Sat, 20 Jul 2024 15:35:06 +0300
Subject: [PATCH] add theme switching for tables page

---
 .../bim/data/webui/static/css/index.css       | 17 +++++++++-
 .../bim/data/webui/static/js/index.js         | 34 +++++++++++++++++++
 .../bim/data/webui/templates/index.html       |  8 +++++
 3 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
index 0a1e41737b..7a480b42c8 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
@@ -6,9 +6,11 @@
     --padding-small: 0.125rem;
     --padding-medium: 1rem;
     --font-size-large: 1.2rem;
+    --logo-height: 2.5rem;
 }
 
 :root.dark {
+    color-scheme: dark;
     --bg-color: #252525;
     --text-color: #e0e0e0;
     --nav-bg-color: #121212;
@@ -19,6 +21,7 @@
 }
 
 :root.light {
+    color-scheme: light;
     --bg-color: #ffffff;
     --text-color: #000000;
     --nav-bg-color: #f8f8f8;
@@ -69,7 +72,7 @@ nav {
 
 nav .logo {
     margin-left: var(--margin-large);
-    height: 2.5rem;
+    height: var(--logo-height);
 }
 
 nav ul {
@@ -103,6 +106,18 @@ nav ul li a.active {
     display: none;
 }
 
+#toggle-theme {
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: var(--font-size-large);
+    margin-right: var(--margin-medium);
+}
+
+#toggle-theme:focus {
+    outline: none;
+}
+
 /* ------------ Overwriting Tabulator CSS rules ------------ */
 
 :root.light .tabulator-header,
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
index 2cc94b2f80..0d4db42480 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
@@ -5,6 +5,12 @@ let socket;
 
 // Document ready function
 $(document).ready(function () {
+  var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches
+    ? "light"
+    : "dark";
+  var theme = localStorage.getItem("theme") || systemTheme;
+  setTheme(theme);
+
   connectSocket();
 });
 
@@ -240,3 +246,31 @@ function compareHeaders(headers1, headers2) {
   }
   return true;
 }
+
+function setTheme(theme) {
+  var stylesheet = $("#tabulator-stylesheet");
+  if (theme === "light") {
+    stylesheet.attr(
+      "href",
+      "https://unpkg.com/tabulator-tables/dist/css/tabulator_site.min.css"
+    );
+    $("html").removeClass("dark").addClass("light");
+    $("#toggle-theme").html('<i class="fas fa-sun"></i>');
+  } else {
+    stylesheet.attr(
+      "href",
+      "https://unpkg.com/tabulator-tables/dist/css/tabulator_site_dark.min.css"
+    );
+    $("html").removeClass("light").addClass("dark");
+    $("#toggle-theme").html('<i class="fas fa-moon"></i>');
+  }
+  localStorage.setItem("theme", theme);
+}
+
+function toggleTheme() {
+  if ($("html").hasClass("dark")) {
+    setTheme("light");
+  } else {
+    setTheme("dark");
+  }
+}
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
index 88a4306cda..e948b4c4be 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
@@ -7,8 +7,13 @@
     <link rel="stylesheet" href="/static/css/index.css" />
     <link
       rel="stylesheet"
+      id="tabulator-stylesheet"
       href="https://unpkg.com/tabulator-tables/dist/css/tabulator_site_dark.min.css"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+    />
     <script
       type="text/javascript"
       src="https://code.jquery.com/jquery-3.6.0.min.js"
@@ -37,6 +42,9 @@
         <li><a href="/" class="active">IFC Data</a></li>
         <li><a href="/gantt">Gantt Chart</a></li>
       </ul>
+      <button id="toggle-theme" onclick="toggleTheme()">
+        <i class="fas fa-moon"></i>
+      </button>
     </nav>
     <div id="container"></div>
   </body>