add theme switching for tables page

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,

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");
+  }
+}

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>