From eb41622a38a9433c089cdda77ea4c53f9414cdbf Mon Sep 17 00:00:00 2001
From: WerWolv <werwolv98@gmail.com>
Date: Wed, 4 Oct 2023 21:34:50 +0200
Subject: [PATCH] feat: Properly detect native theme on the web version

---
 main/gui/source/window/web_window.cpp | 28 +++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/main/gui/source/window/web_window.cpp b/main/gui/source/window/web_window.cpp
index 0f05d3167..ba7745ff9 100644
--- a/main/gui/source/window/web_window.cpp
+++ b/main/gui/source/window/web_window.cpp
@@ -5,6 +5,8 @@
 #include <emscripten.h>
 #include <emscripten/html5.h>
 
+#include <hex/api/event.hpp>
+
 // Function used by c++ to get the size of the html canvas
 EM_JS(int, canvas_get_width, (), {
     return Module.canvas.width;
@@ -20,6 +22,21 @@ EM_JS(void, resizeCanvas, (), {
     js_resizeCanvas();
 });
 
+EM_JS(void, setupThemeListener, (), {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+        Module._handleThemeChange();
+    });
+});
+
+EM_JS(bool, isDarkModeEnabled, (), {
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+});
+
+EMSCRIPTEN_KEEPALIVE
+extern "C" void handleThemeChange() {
+    hex::EventManager::post<hex::EventOSThemeChanged>();
+}
+
 namespace hex {
 
     void nativeErrorMessage(const std::string &message) {
@@ -45,6 +62,17 @@ namespace hex {
 
     void Window::setupNativeWindow() {
         resizeCanvas();
+        setupThemeListener();
+
+        bool themeFollowSystem = ImHexApi::System::usesSystemThemeDetection();
+        EventManager::subscribe<EventOSThemeChanged>(this, [themeFollowSystem] {
+            if (!themeFollowSystem) return;
+
+            EventManager::post<RequestChangeTheme>(!isDarkModeEnabled() ? "Light" : "Dark");
+        });
+
+        if (themeFollowSystem)
+            EventManager::post<EventOSThemeChanged>();
     }
 
     void Window::beginNativeWindowFrame() {