add csv page uses blender theme css variables

src/blenderbim/blenderbim/bim/data/webui/static/css/index.css

@@ -103,7 +103,7 @@ nav ul li a.active {
 }
 
 .warning {
-    color: var(--warning-color);
+    color: var(--blender-info-warning, var(--warning-color));
     margin-bottom: var(--margin-small);
     padding: var(--padding-tiny);
     display: none;
@@ -128,7 +128,7 @@ nav ul li a.active {
     overflow: hidden;
     transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
     border: 1px solid var(--blender-tab-outline, var(--table-border-color));
-    background-color: var(--blender-panel-background-color, var(--nav-bg-color));
+    background-color: var(--blender-panel-background, var(--nav-bg-color));
     z-index: 1;
     opacity: 0;
     visibility: hidden;
@@ -155,7 +155,7 @@ nav ul li a.active {
     overflow: hidden;
     padding-left: var(--padding-small);
     transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
-    background-color: var(--blender-panel-background-color, var(--nav-bg-color));
+    background-color: var(--blender-panel-background, var(--nav-bg-color));
     margin-top: var(--margin-tiny);
     opacity: 0;
 }
@@ -173,7 +173,6 @@ nav ul li a.active {
 #show-connected-button {
     width: auto;
     background-color: var(--blender-panel-header, var(--bg-color));
-    border: none;
     font-size: var(--base-font-size);
     color: var(--blender-text, var(--text-color))
 }
@@ -211,6 +210,17 @@ footer p {
     margin-top: var(--margin-small);
 }
 
+:root.blender button {
+    background-color: var(--blender-panel-header);
+    color: var(--blender-text);
+    border-color: var(--blender-tab-outline);
+    transition: filter 0.2s ease;
+}
+
+:root.blender button:hover {
+    filter: brightness(1.2);
+}
+
 /* ------------ Overwriting Tabulator CSS rules ------------ */
 
 :root.light .tabulator-header,
@@ -222,4 +232,67 @@ footer p {
 :root.light .tabulator {
     border-top: 1px solid var(--table-border-color);
     border-bottom: 2px solid var(--table-border-color);
+}
+
+:root.blender .tabulator-table-holder,
+:root.blender .tabulator {
+    background-color: var(--blender-panel-background) !important;
+}
+
+:root.blender .tabulator-header {
+    border-bottom-color: var(--blender-tab-outline);
+    color: var(--blender-text);
+}
+
+:root.blender .tabulator-header,
+:root.blender .tabulator .tabulator-header .tabulator-col {
+    background-color: var(--blender-panel-header) !important;
+}
+
+:root.blender .tabulator {
+    border-top-color: var(--blender-tab-outline);
+    border-bottom-color: var(--blender-tab-outline);
+    color: var(--blender-text);
+}
+
+:root.blender .tabulator-row-odd .tabulator-cell {
+    background-color: var(--blender-odd-row);
+    transition: filter 0.2s ease;
+}
+
+:root.blender .tabulator-row-even .tabulator-cell {
+    background-color: var(--blender-even-row);
+    transition: filter 0.2s ease;
+}
+
+:root.blender .tabulator-row-odd:hover .tabulator-cell,
+:root.blender .tabulator-row-even:hover .tabulator-cell {
+    filter: brightness(1.4);
+}
+
+:root.blender .tabulator-row,
+:root.blender .tabulator-cell {
+    color: var(--blender-text);
+}
+
+
+
+:root.blender .tabulator-selected .tabulator-cell {
+    background-color: var(--blender-selected-object) !important;
+}
+
+
+:root.blender .tabulator-selected:hover .tabulator-cell {
+    background-color: var(--blender-active-object) !important;
+    filter: brightness(1)
+}
+
+.tabulator-menu-item {
+    color: var(--blender-text) !important;
+    background-color: var(--blender-panel-background) !important;
+    transition: filter 0.1s ease;
+}
+
+.tabulator-menu-item:hover {
+    filter: brightness(1.4);
 }

src/blenderbim/blenderbim/bim/data/webui/static/js/index.js

@@ -8,7 +8,8 @@ $(document).ready(function () {
   var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches
     ? "light"
     : "dark";
-  var theme = localStorage.getItem("theme") || systemTheme;
+  var defaultTheme = "blender";
+  var theme = localStorage.getItem("theme") || defaultTheme;
   setTheme(theme);
 
   connectSocket();
@@ -297,30 +298,33 @@ function compareHeaders(headers1, headers2) {
 }
 
 function setTheme(theme) {
+  $("html").removeClass("light dark blender").addClass(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 {
+  } else if (theme === "dark") {
     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>');
+  } else if (theme === "blender") {
+    $("#toggle-theme").html('<i class="fas fa-adjust"></i>');
   }
   localStorage.setItem("theme", theme);
 }
 
 function toggleTheme() {
-  if ($("html").hasClass("dark")) {
+  if ($("html").hasClass("light")) {
-    setTheme("light");
-  } else {
     setTheme("dark");
+  } else if ($("html").hasClass("dark")) {
+    setTheme("blender");
+  } else {
+    setTheme("light");
   }
 }
 

src/blenderbim/blenderbim/bim/data/webui/templates/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en" class="blender">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

src/blenderbim/blenderbim/tool/web.py

@@ -381,7 +381,9 @@ class Web(blenderbim.core.tool.Web):
             return tuple(getattr(theme, attribute)[:])
 
         def mix_colors(color1, color2):
-            alpha1, alpha2 = color1[3] * 255, color2[3] * 255
+            alpha1 = color1[3] * 255 if len(color1) > 3 else 255
+            alpha2 = color2[3] * 255 if len(color2) > 3 else 255
+
             alpha = 255 - ((255 - alpha1) * (255 - alpha2) / 255)
             red = (color1[0] * (255 - alpha2) + color2[0] * alpha2) / 255
             green = (color1[1] * (255 - alpha2) + color2[1] * alpha2) / 255
@@ -392,6 +394,9 @@ class Web(blenderbim.core.tool.Web):
         panel = prefs.panelcolors
         view_3d = bpy.context.preferences.themes[0].view_3d
         top_bar = bpy.context.preferences.themes[0].topbar.space
+        info = bpy.context.preferences.themes[0].info
+        file_browser = bpy.context.preferences.themes[0].file_browser
+
         theme = {
             "window_background": get_color(prefs, "back"),
             "text": get_color(prefs, "text"),
@@ -399,11 +404,14 @@ class Web(blenderbim.core.tool.Web):
             "tab_outline": get_color(prefs, "tab_outline"),
             "navigation_bar": get_color(prefs, "navigation_bar"),
             "panel_header": get_color(panel, "header"),
-            "panel_background_color": mix_colors(get_color(panel, "back"), get_color(panel, "sub_back")),
+            "panel_background": mix_colors(get_color(panel, "back"), get_color(panel, "sub_back")),
             "top_bar_header": get_color(top_bar, "header"),
             "top_bar_header_text": get_color(top_bar, "header_text"),
             "active_object": get_color(view_3d, "object_active"),
             "selected_object": get_color(view_3d, "object_selected"),
+            "info_warning": get_color(info, "info_warning"),
+            "odd_row": get_color(file_browser.space, "back"),
+            "even_row": mix_colors(get_color(file_browser.space, "back"), get_color(file_browser, "row_alternate")),
         }
         cls.send_webui_data(theme, "theme", "theme_data", use_web_data=False)