From 45042aa5e0fe2d857b6228e67b38601be29a2a43 Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Fri, 2 Aug 2024 16:47:47 +0300
Subject: [PATCH] index.css uses blender css variables if they are defined

---
 .../bim/data/webui/static/css/index.css       | 31 ++++++++++---------
 src/blenderbim/blenderbim/tool/web.py         |  4 +++
 2 files changed, 20 insertions(+), 15 deletions(-)

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 37386ebea9..ef5adbd8d9 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
@@ -42,8 +42,8 @@ html {
 }
 
 body {
-    background-color: var(--bg-color);
-    color: var(--text-color);
+    background-color: var(--blender-window-background, var(--bg-color));
+    color: var(--blender-text, var(--text-color));
     margin: 0;
     font-family: var(--font-family);
     display: flex;
@@ -64,13 +64,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 {
@@ -93,13 +93,13 @@ 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-selected-object, var(--nav-link-hover-color));
 }
 
 .warning {
@@ -127,8 +127,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(--table-border-color);
-    background-color: var(--nav-bg-color);
+    border: 1px solid var(--blender-tab-outline, var(--table-border-color));
+    background-color: var(--blender-panel-background-color, var(--nav-bg-color));
     z-index: 1;
     opacity: 0;
     visibility: hidden;
@@ -146,7 +146,7 @@ nav ul li a.active {
 
 .client {
     padding: var(--margin-small);
-    border-bottom: 1px solid var(--table-border-color);
+    border-bottom: 1px solid var(--blender-tab-outline, var(--table-border-color));
     cursor: pointer;
 }
 
@@ -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(--nav-bg-color);
+    background-color: var(--blender-panel-background-color, var(--nav-bg-color));
     margin-top: var(--margin-tiny);
     opacity: 0;
 }
@@ -166,15 +166,16 @@ nav ul li a.active {
 }
 
 .client-detail {
-    border-bottom: 1px solid var(--table-border-color);
+    border-bottom: 1px solid var(--blender-tab-outline, var(--table-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);
+    color: var(--blender-text, var(--text-color))
 }
 
 #show-connected-button:hover,
@@ -189,15 +190,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;
 }
diff --git a/src/blenderbim/blenderbim/tool/web.py b/src/blenderbim/blenderbim/tool/web.py
index 513df7575e..98db5b5c51 100644
--- a/src/blenderbim/blenderbim/tool/web.py
+++ b/src/blenderbim/blenderbim/tool/web.py
@@ -391,6 +391,7 @@ class Web(blenderbim.core.tool.Web):
         prefs = bpy.context.preferences.themes[0].preferences.space
         panel = prefs.panelcolors
         view_3d = bpy.context.preferences.themes[0].view_3d
+        top_bar = bpy.context.preferences.themes[0].topbar.space
         theme = {
             "window_background": get_color(prefs, "back"),
             "text": get_color(prefs, "text"),
@@ -399,7 +400,10 @@ class Web(blenderbim.core.tool.Web):
             "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")),
+            "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"),
         }
         cls.send_webui_data(theme, "theme", "theme_data", use_web_data=False)