aumera-on-screen-widget 0.0.19 → 0.0.20

package/df-btn.js

@@ -119,6 +119,17 @@
     }
   }
 
+  // Helper function to determine if a color is dark based on luminance
+  function isColorDark(hexColor) {
+    if (!hexColor) return false;
+    const hex = hexColor.replace("#", "");
+    const r = parseInt(hex.substr(0, 2), 16) / 255;
+    const g = parseInt(hex.substr(2, 2), 16) / 255;
+    const b = parseInt(hex.substr(4, 2), 16) / 255;
+    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    return luminance < 0.5;
+  }
+
   // Default configuration with fallback values
   const defaultConfig = {
     env: "prod",
@@ -512,7 +523,7 @@
         }
 
         .df-btn:not(.df-closed) > .df-btn-text:before {
-            background-image: url('${origin}/assets/close_dark.svg')
+            background-image: url('${origin}/assets/close${isColorDark(config.backgroundDark) ? "_dark" : ""}.svg')
         }
 
         .df-notification {
@@ -765,13 +776,16 @@
       const maxBtn = document.createElement("div");
       maxBtn.className = "maximize-minimize-btn";
       const maximized = btn.classList.contains("df-maximized");
-      const isDarkMode =
+      const systemDarkMode =
         config.hasDarkMode &&
         window.matchMedia &&
         window.matchMedia("(prefers-color-scheme: dark)").matches;
+      // Use white icons only if the actual background is dark
+      const currentBg = systemDarkMode ? config.backgroundDark : config.background;
+      const useDarkIcons = isColorDark(currentBg);
       maxBtn.innerHTML = `<img class="maximize-minimize-icon" src="${origin}/assets/${
         maximized ? "collapse" : "expand"
-      }${isDarkMode ? "_dark" : ""}.svg" alt="${
+      }${useDarkIcons ? "_dark" : ""}.svg" alt="${
         maximized ? "Minimize" : "Maximize"
       }" style="width:24px;height:24px;cursor:pointer;" />`;
       header.appendChild(maxBtn);
@@ -784,7 +798,7 @@
       const closeBtn = document.createElement("div");
       closeBtn.className = "close-btn";
       closeBtn.innerHTML = `<img src="${origin}/assets/close${
-        isDarkMode ? "_dark" : ""
+        useDarkIcons ? "_dark" : ""
       }.svg" alt="Close" style="width:20px;height:20px;cursor:pointer;" />`;
       header.insertBefore(closeBtn, btnText);
       closeBtn.addEventListener("click", (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aumera-on-screen-widget",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "A lightweight, customizable chat widget for websites",
   "main": "df-btn.js",
   "scripts": {