aumera-on-screen-widget 0.0.18 → 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",
@@ -139,6 +150,9 @@
     showNotification: false,
   };
 
+  // Track if dark mode was explicitly requested via HTML attribute
+  const hasExplicitDarkBackground = !!wrapper.getAttribute("backgroundDark");
+
   // Initial config from HTML attributes with fallback to defaults
   const config = {
     src: wrapper.getAttribute("src"),
@@ -151,6 +165,7 @@
     background: wrapper.getAttribute("background") || defaultConfig.background,
     backgroundDark:
       wrapper.getAttribute("backgroundDark") || defaultConfig.backgroundDark,
+    hasDarkMode: hasExplicitDarkBackground,
     fontColor: wrapper.getAttribute("fontColor") || defaultConfig.fontColor,
     fontColorDark:
       wrapper.getAttribute("fontColorDark") || defaultConfig.fontColorDark,
@@ -219,6 +234,8 @@
     config.background = settings.oswColourBackgroundLight || config.background;
     config.backgroundDark =
       settings.oswColourBackgroundDark || config.backgroundDark;
+    // Update hasDarkMode if GraphQL provides dark background
+    config.hasDarkMode = config.hasDarkMode || !!settings.oswColourBackgroundDark;
     config.fontColor = settings.oswColourFontLight || config.fontColor;
     config.fontColorDark = settings.oswColourFontDark || config.fontColorDark;
     config.showNotification =
@@ -487,6 +504,7 @@
         }
     }
 
+    ${config.hasDarkMode ? `
     @media (prefers-color-scheme: dark){
         .df-btn {
             background-color: ${config.backgroundDark || "#171717"}
@@ -505,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 {
@@ -517,6 +535,7 @@
             border-top: 6px solid ${config.backgroundDark || "#171717"};
         }
     }
+    ` : ''}
 
     @keyframes shake {
         0%, 100% { transform: translateX(0); }
@@ -757,12 +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);
@@ -775,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.18",
+  "version": "0.0.20",
   "description": "A lightweight, customizable chat widget for websites",
   "main": "df-btn.js",
   "scripts": {