add theme_data listeners in web ui

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

@@ -31,6 +31,7 @@ function connectSocket() {
   socket.on("blender_disconnect", handleBlenderDisconnect);
   socket.on("connect", handleWebConnect);
   socket.on("connected_clients", handleConnectedClients);
+  socket.on("theme_data", handleThemeData);
   socket.on("drawings_data", handleDrawingsData);
   socket.on("svg_data", handleSvgData);
 }
@@ -96,6 +97,38 @@ function handleConnectedClients(data) {
   });
 }
 
+function handleThemeData(themeData) {
+  console.log(themeData);
+
+  function arrayToRgbString(arr) {
+    const [r, g, b, a] = arr.map((num) => Math.round(num * 255));
+    if (a !== undefined) {
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  function generateCssVariableRule(theme) {
+    let cssVariables = ":root.blender {\n";
+    for (const key in theme) {
+      const cssVariableName = `--blend-${key.replace(/_/g, "-")}`;
+      const cssVariableValue = arrayToRgbString(theme[key]);
+      cssVariables += `    ${cssVariableName}: ${cssVariableValue};\n`;
+    }
+    cssVariables += "}";
+    return cssVariables;
+  }
+
+  const cssRule = generateCssVariableRule(themeData.theme);
+  console.log(cssRule);
+
+  var styleElement = $("#index-stylesheet")[0];
+  if (styleElement) {
+    var sheet = styleElement.sheet || styleElement.styleSheet;
+    sheet.insertRule(cssRule, sheet.cssRules.length);
+  }
+}
+
 function handleDrawingsData(data) {
   const blenderId = data["blenderId"];
 

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

@@ -38,6 +38,7 @@ function connectSocket() {
   socket.on("blender_connect", handleBlenderConnect);
   socket.on("blender_disconnect", handleBlenderDisconnect);
   socket.on("connected_clients", handleConnectedClients);
+  socket.on("theme_data", handleThemeData);
   socket.on("gantt_data", handleGanttData);
   socket.on("default_data", handleDefaultData);
 }
@@ -83,6 +84,38 @@ function handleConnectedClients(data) {
   });
 }
 
+function handleThemeData(themeData) {
+  console.log(themeData);
+
+  function arrayToRgbString(arr) {
+    const [r, g, b, a] = arr.map((num) => Math.round(num * 255));
+    if (a !== undefined) {
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  function generateCssVariableRule(theme) {
+    let cssVariables = ":root.blender {\n";
+    for (const key in theme) {
+      const cssVariableName = `--blend-${key.replace(/_/g, "-")}`;
+      const cssVariableValue = arrayToRgbString(theme[key]);
+      cssVariables += `    ${cssVariableName}: ${cssVariableValue};\n`;
+    }
+    cssVariables += "}";
+    return cssVariables;
+  }
+
+  const cssRule = generateCssVariableRule(themeData.theme);
+  console.log(cssRule);
+
+  var styleElement = $("#index-stylesheet")[0];
+  if (styleElement) {
+    var sheet = styleElement.sheet || styleElement.styleSheet;
+    sheet.insertRule(cssRule, sheet.cssRules.length);
+  }
+}
+
 // Function to handle 'gantt_data' event
 function handleGanttData(data) {
   const blenderId = data["blenderId"];

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

@@ -24,6 +24,7 @@ function connectSocket() {
   socket.on("blender_connect", handleBlenderConnect);
   socket.on("blender_disconnect", handleBlenderDisconnect);
   socket.on("connected_clients", handleConnectedClients);
+  socket.on("theme_data", handleThemeData);
   socket.on("csv_data", handleCsvData);
   socket.on("default_data", handleDefaultData);
 }
@@ -60,6 +61,38 @@ function handleConnectedClients(data) {
   });
 }
 
+function handleThemeData(themeData) {
+  console.log(themeData);
+
+  function arrayToRgbString(arr) {
+    const [r, g, b, a] = arr.map((num) => Math.round(num * 255));
+    if (a !== undefined) {
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  function generateCssVariableRule(theme) {
+    let cssVariables = ":root.blender {\n";
+    for (const key in theme) {
+      const cssVariableName = `--blend-${key.replace(/_/g, "-")}`;
+      const cssVariableValue = arrayToRgbString(theme[key]);
+      cssVariables += `    ${cssVariableName}: ${cssVariableValue};\n`;
+    }
+    cssVariables += "}";
+    return cssVariables;
+  }
+
+  const cssRule = generateCssVariableRule(themeData.theme);
+  console.log(cssRule);
+
+  var styleElement = $("#index-stylesheet")[0];
+  if (styleElement) {
+    var sheet = styleElement.sheet || styleElement.styleSheet;
+    sheet.insertRule(cssRule, sheet.cssRules.length);
+  }
+}
+
 // Function to handle 'csv_data' event
 function handleCsvData(data) {
   const blenderId = data["blenderId"];

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

@@ -8,7 +8,11 @@
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
     />
-    <link rel="stylesheet" href="/static/css/drawings.css" />
+    <link
+      rel="stylesheet"
+      href="/static/css/drawings.css"
+      id="drawings-stylesheet"
+    />
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"

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

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Web Client</title>
     <link rel="stylesheet" type="text/css" href="/jsgantt/jsgantt.css" />
-    <link rel="stylesheet" href="/static/css/gantt.css" />
+    <link rel="stylesheet" href="/static/css/gantt.css" id="gantt-stylesheet" />
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"

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

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Web Client</title>
-    <link rel="stylesheet" href="/static/css/index.css" />
+    <link rel="stylesheet" href="/static/css/index.css" id="index-stylesheet" />
     <link
       rel="stylesheet"
       id="tabulator-stylesheet"