Add css targeting to force apply light dark mode

Author: addisonschultz

.changeset/cold-clocks-tan.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/integration-front': minor
+---
+
+Force-support light/dark mode in the front widget

integrations/front/src/script.raw.js

@@ -5,13 +5,27 @@
     s = d.createElement('script');
     s.src = 'https://chat-assets.frontapp.com/v1/chat.bundle.js';
     s.async = 1;
-    d.getElementsByTagName('head')[0].appendChild(s);
 
     s.onload = function () {
         if (window.FrontChat) {
             window.FrontChat('init', { chatId: chatId, useDefaultLauncher: true });
         }
+
+        // Workaround for Front's color-scheme bug
+        // Front's widget uses color-scheme: normal which doesn't respect page color schemes
+        // This override allows proper light/dark mode support
+        const styleOverride = d.createElement('style');
+        styleOverride.textContent = `
+            [data-front-chat-container],
+            [data-front-chat-container] iframe,
+            #front-chat-container,
+            #front-chat-container iframe {
+                color-scheme: light dark !important;
+            }
+        `;
+        d.head.appendChild(styleOverride);
     };
 
-    d.getElementsByTagName('head')[0].appendChild(s);
+    // Append to body (just before closing </body> tag) as per Front's documentation
+    d.getElementsByTagName('body')[0].appendChild(s);
 })(window, document);