From 70d4e99dc12e520711758b3e272ef1beabd30ec8 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Fri, 27 Jan 2023 17:09:09 +0500
Subject: [PATCH] desktop: style tray icons based on actual system theme

---
 apps/web/desktop/asset-manager.ts |  5 +++--
 apps/web/desktop/config/theme.js  | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/web/desktop/asset-manager.ts b/apps/web/desktop/asset-manager.ts
index 9c15180fc..a50be690b 100644
--- a/apps/web/desktop/asset-manager.ts
+++ b/apps/web/desktop/asset-manager.ts
@@ -17,11 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { NativeImage, nativeImage, nativeTheme } from "electron";
+import { NativeImage, nativeImage } from "electron";
 import path from "path";
 import { isDevelopment } from "./utils";
 import { parse, ParsedImage } from "icojs";
 import { readFileSync } from "fs";
+import { getSystemTheme } from "./config/theme";
 
 type Formats = "ico" | "png" | "icns";
 type IconOptions<TFormat extends Formats> = {
@@ -86,7 +87,7 @@ export class AssetManager {
   ): FlexibleIcon<TFormat> | undefined {
     const { size = 16, format = "png" } = options;
 
-    const prefix: Prefixes = nativeTheme.shouldUseDarkColors ? ".dark" : "";
+    const prefix: Prefixes = getSystemTheme() === "dark" ? ".dark" : "";
 
     const icoPath = path.join(
       RESOURCES_DIR,
diff --git a/apps/web/desktop/config/theme.js b/apps/web/desktop/config/theme.js
index 12de6c881..3e6cf612a 100644
--- a/apps/web/desktop/config/theme.js
+++ b/apps/web/desktop/config/theme.js
@@ -35,6 +35,23 @@ function getBackgroundColor() {
   return nativeTheme.shouldUseDarkColors ? "#0f0f0f" : "#ffffff";
 }
 
+function getSystemTheme() {
+  const listeners = nativeTheme.rawListeners("updated");
+  nativeTheme.removeAllListeners("updated");
+
+  const oldThemeSource = nativeTheme.themeSource;
+  nativeTheme.themeSource = "system";
+  const currentTheme = nativeTheme.shouldUseDarkColors ? "dark" : "light";
+  nativeTheme.themeSource = oldThemeSource;
+
+  setTimeout(
+    () => listeners.forEach((a) => nativeTheme.addListener("updated", a)),
+    1000
+  );
+  return currentTheme;
+}
+
+export { getTheme, setTheme, getBackgroundColor, getSystemTheme };
 
 function changeTheme(theme) {
   const listeners = nativeTheme.rawListeners("updated");