From 96d099b71eebd9832ad2dfc3344920242fa7cbb4 Mon Sep 17 00:00:00 2001
From: Miguel de Benito Delgado <m.debenito.d@gmail.com>
Date: Mon, 26 May 2025 16:26:43 +0000
Subject: [PATCH] :sparkles: Mock .matchMedia in global/window

---
 CHANGES.md                       |  1 +
 frontend/src/app/util/globals.js | 29 +++++++++++++++++------------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index c9681623c4..f47c0905a3 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -81,6 +81,7 @@ A non exhaustive list of changes:
 - Copy to SVG from contextual menu [Github #838](https://github.com/penpot/penpot/issues/838)
 - Add styles for Inkeep Chat at workspace [Taiga #10708](https://tree.taiga.io/project/penpot/us/10708)
 - Add configuration for air gapped installations with Docker
+- Support system color scheme [Github #5030](https://github.com/penpot/penpot/issues/5030)
 
 ### :bug: Bugs fixed
 - Fix getCurrentUser for plugins api [Taiga #11057](https://tree.taiga.io/project/penpot/issue/11057)
diff --git a/frontend/src/app/util/globals.js b/frontend/src/app/util/globals.js
index b9e6b4b2f8..44b18e8044 100644
--- a/frontend/src/app/util/globals.js
+++ b/frontend/src/app/util/globals.js
@@ -17,7 +17,7 @@
 
 goog.provide("app.util.globals");
 
-goog.scope(function() {
+goog.scope(function () {
   app.util.globals.global = goog.global;
 
   function createGlobalEventEmitter(k) {
@@ -25,22 +25,27 @@ goog.scope(function() {
      * may subscribe to them.
      */
     return {
-      addListener(...args) {
-      },
-      removeListener(...args) {
-      },
-      addEventListener(...args) {
-      },
-      removeEventListener(...args) {
-      }
-    }
+      addListener(...args) {},
+      removeListener(...args) {},
+      addEventListener(...args) {},
+      removeEventListener(...args) {},
+      dispatchEvent(...args) { return true; },
+    };
   }
 
-  app.util.globals.window = (function() {
+  app.util.globals.window = (function () {
     if (typeof goog.global.window !== "undefined") {
       return goog.global.window;
     } else {
-      return createGlobalEventEmitter();
+      const mockWindow = createGlobalEventEmitter();
+      mockWindow.matchMedia = function (query) {
+        const mediaObj = createGlobalEventEmitter();
+        mediaObj.matches = false;
+        mediaObj.media = query;
+        mediaObj.onchange = null;
+        return mediaObj;
+      };
+      return mockWindow;
     }
   })();