add blender generated theme to gantt page

and some small edits in extracted colors and index page

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

@@ -55,8 +55,8 @@ html {
 }
 
 body {
-    background-color: var(--bg-color);
-    color: var(--primary-text-color);
+    background-color: var(--blender-window-background, var(--bg-color));
+    color: var(--blender-text, var(--primary-text-color));
     margin: 0;
     font-family: var(--font-family);
     display: flex;
@@ -77,12 +77,13 @@ h3 {
 }
 
 nav {
-    background-color: var(--nav-bg-color);
+    background-color: var(--blender-top-bar-header, var(--nav-bg-color));
+    height: var(--nav-height);
     padding: var(--padding-medium) 0;
     display: flex;
     align-items: center;
     position: relative;
-    border-bottom: 2px solid var(--nav-border-color);
+    border-bottom: 2px solid var(--blender-tab-outline, var(--nav-border-color));
 }
 
 nav .logo {
@@ -105,17 +106,17 @@ nav ul li {
 
 nav ul li a {
     text-decoration: none;
-    color: var(--nav-link-color);
+    color: var(--blender-text, var(--nav-link-color));
     font-size: var(--font-size-large);
 }
 
 nav ul li a:hover,
 nav ul li a.active {
-    color: var(--nav-link-hover-color);
+    color: var(--blender-text-highlight, var(--nav-link-hover-color));
 }
 
 .warning {
-    color: var(--warning-color);
+    color: var(--blender-info-warning, var(--warning-color));
     margin-bottom: var(--margin-small);
     padding: var(--padding-tiny);
     display: none;
@@ -127,8 +128,8 @@ nav ul li a.active {
     background-color: transparent;
     border-collapse: collapse;
     border-spacing: 0;
-    border-color: var(--border-color);
-    border: 1px solid var(--border-color);
+    border-color: var(--blender-tab-outline, var(--border-color));
+    border: 1px solid var(--blender-tab-outline, var(--border-color));
     border-radius: 0.25rem;
     box-shadow: var(--box-shadow);
     text-align: center;
@@ -136,7 +137,7 @@ nav ul li a.active {
 
 .table-description tr {
     display: table-row;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--blender-tab-outline, var(--border-color));
 }
 
 #toggle-theme {
@@ -157,8 +158,8 @@ nav ul li a.active {
     overflow-y: auto;
     overflow: hidden;
     transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
-    border: 1px solid var(--details-border-color);
-    background-color: var(--nav-bg-color);
+    border: 1px solid var(--blender-tab-outline, var(--details-border-color));
+    background-color: var(--blender-panel-background, var(--nav-bg-color));
     z-index: 1;
     opacity: 0;
     visibility: hidden;
@@ -176,7 +177,7 @@ nav ul li a.active {
 
 .client {
     padding: var(--margin-small);
-    border-bottom: 1px solid var(--details-border-color);
+    border-bottom: 1px solid 1px solid var(--blender-tab-outline, var(--details-border-color));
     cursor: pointer;
 }
 
@@ -185,7 +186,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(--nav-bg-color);
+    background-color: var(--blender-panel-background, var(--nav-bg-color));
     margin-top: var(--margin-tiny);
     opacity: 0;
 }
@@ -196,13 +197,13 @@ nav ul li a.active {
 }
 
 .client-detail {
-    border-bottom: 1px solid var(--details-border-color);
+    border-bottom: 1px solid var(--blender-tab-outline, var(--details-border-color));
     padding: var(--padding-small);
 }
 
 #show-connected-button {
     width: auto;
-    background-color: var(--bg-color);
+    background-color: var(--blender-panel-header, var(--bg-color));
     border: none;
     font-size: var(--base-font-size);
 }
@@ -219,15 +220,15 @@ nav ul li a.active {
 }
 
 footer {
-    background-color: var(--nav-bg-color);
+    background-color: var(--blender-top-bar-header, var(--nav-bg-color));
     text-align: right;
     padding: var(--padding-tiny);
-    border-top: 1px solid var(--nav-border-color);
+    border-top: 1px solid var(--blender-tab-outline, var(--nav-border-color));
 }
 
 footer p {
     margin: 0;
-    color: var(--text-color);
+    color: var(--blender-text, var(--nav-link-color));
     margin-right: var(--margin-small);
     font-size: 0.8rem;
 }
@@ -250,7 +251,20 @@ footer p {
     }
 }
 
+: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 JSGantt CSS rules ------------ */
+/* ------------------- for dark theme ------------------- */
+
 :root.dark div.gantt {
     background-color: var(--bg-color);
     color: var(--secondary-text-color);
@@ -407,4 +421,152 @@ footer p {
     box-sizing: border-box;
     border: 1px solid var(--input-border-color);
     color: var(--secondary-text-color);
+}
+
+/* ------------------- for blender generated theme ------------------- */
+
+
+:root.blender div.gantt,
+:root.blender .gantt table,
+:root.blender .gantt td {
+    color: var(--blender-text);
+    border-color: var(--blender-tab-outline);
+}
+
+:root.blender .gchartgrid,
+:root.blender .gmain.gmainright,
+:root.blender .gtaskbarcontainer.gplan,
+:root.blender .gchartlbl.gcontainercol,
+:root.blender .gminorheading,
+:root.blender .gtaskcell {
+    background-color: var(--blender-odd-row);
+    border-color: var(--blender-tab-outline);
+}
+
+
+/* Headings and cell defaults */
+:root.blender .gtaskheading,
+:root.blender .gchartlbl.gcontainercol .gmajorheading,
+:root.blender .gchartlbl.gcontainercol .gminorheading,
+:root.blender .gchartlbl.gcontainercol .gminorheadingwkend,
+:root.blender .gchartlbl.gcontainercol .gtaskcell,
+:root.blender .gchartlbl.gcontainercol .gtaskcellcurrent,
+:root.blender .gchartlbl.gcontainercol .gtaskcellwkend,
+:root.blender .gchartlbl.gcontainercol .gname,
+:root.blender .gchartlbl.gcontainercol .ggroupitem,
+:root.blender .glistlbl.gcontainercol .gtaskname,
+:root.blender .glistlbl.gcontainercol .gtasklist {
+    background-color: var(--blender-panel-header);
+    border-color: var(--blender-tab-outline);
+}
+
+:root.blender .gtaskheading,
+:root.blender .gname,
+:root.blender .gtaskname,
+:root.blender .gres,
+:root.blender .gdur,
+:root.blender .gcomp,
+:root.blender .gstartdate,
+:root.blender .gplanstartdate,
+:root.blender .gplanenddate,
+:root.blender .gcost,
+:root.blender .gchartlbl,
+:root.blender .gcontainercol,
+:root.blender .genddate {
+    color: var(--blender-text);
+    border-color: var(--blender-tab-outline);
+}
+
+:root.blender .gtaskname>div,
+:root.blender .gtaskname div,
+:root.blender .gtaskheading div,
+:root.blender .gtaskname span {
+    color: var(--blender-text);
+}
+
+:root.blender .gantt-chart tr:not(.gname.glineitem):not(.gname.ggroupitem) {
+    background-color: var(--blender-odd-row);
+}
+
+:root.blender .gtasklist,
+:root.blender .gadditional {
+    border: var(--blender-tab-outline) 1px solid;
+}
+
+:root.blender .glistgrid,
+:root.blender .glistlbl {
+    /* This is a border that needs background color, somehow. */
+    background-color: var(--blender-tab-outline);
+    border-color: var(--blender-tab-outline);
+}
+
+
+/* Highlight row */
+:root.blender .gitemhighlight td {
+    background-color: var(--blender-panel-background);
+    color: var(--blender-text);
+}
+
+/* Differentiate Group, Milestone and Ordinary task items (applied to row) */
+:root.blender .ggroupitem {
+    font-weight: bold;
+    border-color: var(--border-color);
+}
+
+:root.blender .gmileitem,
+:root.blender .glineitem {
+    background-color: var(--blender-odd-row);
+}
+
+/* Task bar caption text styles */
+:root.blender .gmilecaption,
+:root.blender .ggroupcaption,
+:root.blender .gcaption {
+    color: var(--blender-text);
+}
+
+/* Milestones */
+:root.blender .gmdtop,
+:root.blender .gmdbottom {
+    border-bottom: 5px solid var(--blender-tab-outline);
+}
+
+:root.blender .gfoldercollapse {
+    color: var(--blender-text);
+    cursor: pointer;
+    font-weight: bold;
+    font-size: var(--folder-collapse-font-size);
+    font-family: var(--folder-collapse-font-family);
+}
+
+/* Highlight for collapsible row */
+:root.blender .gname.ggroupitem {
+    background-color: var(--blender-panel-background);
+}
+
+/* Form label and selected highlighting */
+:root.blender .gformlabel {
+    background-color: var(--blender-panel-header);
+    color: var(--blender-text);
+    border: var(--blender-tab-outline) 1px solid;
+}
+
+:root.blender span.gformlabel:hover,
+:root.blender span.gselected {
+    background-color: var(--blender-panel-header);
+    color: var(--blender-text-highlight);
+    border-color: var(--blender-tab-outline);
+}
+
+:root.blender .gantt-inputtable {
+    background-color: var(--blender-panel-header);
+    box-sizing: border-box;
+    border: 2px solid var(--blender-top-bar-header);
+    color: var(--blender-text);
+}
+
+/* Dark mode scrollbar */
+:root.blender .frame::-webkit-scrollbar-thumb,
+:root.blender .frame::-webkit-scrollbar-track {
+    background-color: var(--blender-window-background);
 }

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

@@ -99,7 +99,7 @@ nav ul li a {
 
 nav ul li a:hover,
 nav ul li a.active {
-    color: var(--blender-selected-object, var(--nav-link-hover-color));
+    color: var(--blender-text-highlight, var(--nav-link-hover-color));
 }
 
 .warning {

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

@@ -22,7 +22,9 @@ $(document).ready(function () {
   var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches
     ? "light"
     : "dark";
-  var theme = localStorage.getItem("theme") || systemTheme;
+  $(":root").css("color-scheme", systemTheme);
+  var defaultTheme = "blender";
+  var theme = localStorage.getItem("theme") || defaultTheme;
   setTheme(theme);
 
   connectSocket();
@@ -109,7 +111,7 @@ function handleThemeData(themeData) {
   const cssRule = generateCssVariableRule(themeData.theme);
   console.log(cssRule);
 
-  var styleElement = $("#index-stylesheet")[0];
+  var styleElement = $("#gantt-stylesheet")[0];
   if (styleElement) {
     var sheet = styleElement.sheet || styleElement.styleSheet;
     sheet.insertRule(cssRule, sheet.cssRules.length);
@@ -420,21 +422,24 @@ function editValue(list, task, event, cell, column) {
 }
 
 function setTheme(theme) {
+  $("html").removeClass("light dark blender").addClass(theme);
   if (theme === "light") {
-    $("html").removeClass("dark").addClass("light");
     $("#toggle-theme").html('<i class="fas fa-sun"></i>');
-  } else {
-    $("html").removeClass("light").addClass("dark");
+  } else if (theme === "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")) {
-    setTheme("light");
-  } else {
+  if ($("html").hasClass("light")) {
     setTheme("dark");
+  } else if ($("html").hasClass("dark")) {
+    setTheme("blender");
+  } else {
+    setTheme("light");
   }
 }
 

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

@@ -8,6 +8,7 @@ $(document).ready(function () {
   var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches
     ? "light"
     : "dark";
+  $(":root").css("color-scheme", systemTheme);
   var defaultTheme = "blender";
   var theme = localStorage.getItem("theme") || defaultTheme;
   setTheme(theme);

src/blenderbim/blenderbim/bim/data/webui/templates/gantt.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

@@ -395,14 +395,13 @@ class Web(blenderbim.core.tool.Web):
         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
+        outliner = bpy.context.preferences.themes[0].outliner
 
         theme = {
             "window_background": get_color(prefs, "back"),
             "text": get_color(prefs, "text"),
             "tab_background": get_color(prefs, "tab_back"),
             "tab_outline": get_color(prefs, "tab_outline"),
-            "navigation_bar": get_color(prefs, "navigation_bar"),
             "panel_header": get_color(panel, "header"),
             "panel_background": mix_colors(get_color(panel, "back"), get_color(panel, "sub_back")),
             "top_bar_header": get_color(top_bar, "header"),
@@ -410,8 +409,9 @@ class Web(blenderbim.core.tool.Web):
             "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")),
+            "odd_row": get_color(outliner.space, "back"),
+            "even_row": mix_colors(get_color(outliner.space, "back"), get_color(outliner, "row_alternate")),
+            "text_highlight": get_color(outliner, "active"),
         }
         cls.send_webui_data(theme, "theme", "theme_data", use_web_data=False)