Add dynamic UI theme for server browser

Introduce runtime-driven UI theming for the server browser - Expose PushUITheme() in F4TServerBrowserBridge and implement ColorToJson + PushUIThemeInternal to serialize HUD colors and invoke a JS hook. - Call PushUITheme on UI initialization and when the browser is shown so the webview receives current HUD colors. - Add frontend handler for "uiTheme" in app.js and a new components/theme.js that implements window.applyCoTheme to set CSS vars and tint the cursor SVG. - Update styles.css to use RGB component CSS variables (--co-r/--co-g/--co-b and background equivalents) so colors can be overridden at runtime. - Update index.html to include the new theme script and tweak cursor SVG stroke width; cursor asset updated as well. This enables the plugin to synchronize the in-game HUD colors with the browser UI dynamically.
2026-06-09 15:19:03 +12:00
parent 1f80b8ea49
commit fb4e238fcc
9 changed files with 131 additions and 17 deletions
@@ -0,0 +1,55 @@
+(function () {
+  "use strict";
+
+  function clampByte(value) {
+    return Math.max(0, Math.min(255, Math.round(value)));
+  }
+
+  function applyHudRgb(root, prefix, color) {
+    if (!color) {
+      return;
+    }
+
+    root.style.setProperty(prefix + "-r", String(clampByte(color.r)));
+    root.style.setProperty(prefix + "-g", String(clampByte(color.g)));
+    root.style.setProperty(prefix + "-b", String(clampByte(color.b)));
+  }
+
+  function applyCursorTint(root, color) {
+    if (!color) {
+      return;
+    }
+
+    var r = clampByte(color.r);
+    var g = clampByte(color.g);
+    var b = clampByte(color.b);
+    var svg =
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.3 31.24">' +
+      '<polygon fill="rgb(' + r + "," + g + "," + b + ')" stroke="#000" stroke-width="3.2" ' +
+      'stroke-miterlimit="10" points="17.4 30.41 31.46 15.9 1.2 1.14 17.4 30.41"/></svg>';
+    var url =
+      'url("data:image/svg+xml,' +
+      encodeURIComponent(svg) +
+      '") 1 1, default';
+    root.style.setProperty("--co-cursor", url);
+  }
+
+  window.applyCoTheme = function (theme) {
+    if (!theme) {
+      return;
+    }
+
+    var root = document.documentElement;
+    var hud = theme.hud || theme;
+    applyHudRgb(root, "--co", hud);
+    applyHudRgb(root, "--co-bg", theme.hudBackground);
+    applyCursorTint(root, hud);
+
+    console.log(
+      "[CO] Applied HUD theme rgb(" +
+        clampByte(hud.r) + "," +
+        clampByte(hud.g) + "," +
+        clampByte(hud.b) + ")"
+    );
+  };
+})();