Repository: oliverschwendener/ueli (ts)

Issue:
[Bug] Ueli renders with blank window
Ueli seems to display a blank screen on both Mac M3 and Linux Mint with the latest update 9.14 Running on Mac the only error I can see is deprecated warning the textured window type is deprecated

I'll try run the dev build on Linux later and report back if infind anything

Seems like on Mac I'm seeing error the textured window type is deprecated and will be removed


**Environment**
 - OS: [macOS|Linux]
 - Version [e.g. 9.14.0]



Pull request description:
Fix bug when theme name cant be resolved to fluent ui theme
Fixes #1298

Patch:
diff --git a/src/renderer/Core/Theme/ThemeProvider.tsx b/src/renderer/Core/Theme/ThemeProvider.tsx
index e59f5084..a322f10c 100644
--- a/src/renderer/Core/Theme/ThemeProvider.tsx
+++ b/src/renderer/Core/Theme/ThemeProvider.tsx
@@ -1,35 +1,22 @@
-import { webDarkTheme, webLightTheme, type Theme } from "@fluentui/react-theme";
+import { type Theme } from "@fluentui/react-theme";
 import { useEffect, useState, type ReactNode } from "react";
 import { ThemeContext } from "./ThemeContext";
-import { themeMap } from "./themes";
-
-const getFluentUiThemeTheme = (shouldUseDarkColors: boolean) => {
-    const defaultTheme = {
-        dark: webDarkTheme,
-        light: webLightTheme,
-    };
-
-    const themeName = window.ContextBridge.getSettingValue<string>("appearance.themeName", "Fluent UI Web");
-
-    const { dark, light } = themeMap[themeName] ?? defaultTheme;
-
-    return shouldUseDarkColors ? dark.theme : light.theme;
-};
+import { getFluentUiTheme } from "./getFluentUiTheme";
 
 export const ThemeProvider = ({ children }: { children: ReactNode }) => {
     const initialShouldUseDarkColors = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
-    const [fluentUiTheme, setFluentUiTheme] = useState<Theme>(getFluentUiThemeTheme(initialShouldUseDarkColors));
+    const [fluentUiTheme, setFluentUiTheme] = useState<Theme>(getFluentUiTheme(initialShouldUseDarkColors));
     const [shouldUseDarkColors, setShouldUseDarkColors] = useState<boolean>(initialShouldUseDarkColors);
 
     useEffect(() => {
         const colorSchemeChangeListener = (event: MediaQueryListEvent) => {
             setShouldUseDarkColors(event.matches);
-            setFluentUiTheme(getFluentUiThemeTheme(event.matches));
+            setFluentUiTheme(getFluentUiTheme(event.matches));
         };
 
         const themeNameChangeListener = () => {
-            setFluentUiTheme(getFluentUiThemeTheme(window.matchMedia("(prefers-color-scheme: dark)").matches));
+            setFluentUiTheme(getFluentUiTheme(window.matchMedia("(prefers-color-scheme: dark)").matches));
         };
 
         window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", colorSchemeChangeListener);
diff --git a/src/renderer/Core/Theme/getFluentUiTheme.ts b/src/renderer/Core/Theme/getFluentUiTheme.ts
new file mode 100644
index 00000000..bd16cc8f
--- /dev/null
+++ b/src/renderer/Core/Theme/getFluentUiTheme.ts
@@ -0,0 +1,15 @@
+import { webDarkTheme, webLightTheme } from "@fluentui/react-components";
+import { themeMap } from "./themes";
+
+export const getFluentUiTheme = (shouldUseDarkColors: boolean) => {
+    const defaultTheme = {
+        dark: { theme: webDarkTheme },
+        light: { theme: webLightTheme },
+    };
+
+    const themeName = window.ContextBridge.getSettingValue<string>("appearance.themeName", "Fluent UI Web");
+
+    const { dark, light } = Object.keys(themeMap).includes(themeName) ? themeMap[themeName] : defaultTheme;
+
+    return shouldUseDarkColors ? dark.theme : light.theme;
+};


Test patch:
diff --git a/src/renderer/Core/Theme/getFluentUiTheme.test.ts b/src/renderer/Core/Theme/getFluentUiTheme.test.ts
new file mode 100644
index 00000000..c6b940f5
--- /dev/null
+++ b/src/renderer/Core/Theme/getFluentUiTheme.test.ts
@@ -0,0 +1,33 @@
+import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from "@fluentui/react-components";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getFluentUiTheme } from "./getFluentUiTheme";
+
+const createWindowStub = ({ themeName }: { themeName: string }) => {
+    vi.stubGlobal("window", {
+        ContextBridge: {
+            getSettingValue: () => themeName,
+        },
+    });
+};
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe(getFluentUiTheme, () => {
+    it("should return the default theme when the theme name is not found", () => {
+        createWindowStub({ themeName: "Custom" });
+        expect(getFluentUiTheme(true)).toEqual(webDarkTheme);
+        expect(getFluentUiTheme(false)).toEqual(webLightTheme);
+    });
+
+    it("should return the fluent ui web theme when the name is 'Fluent UI Web'", () => {
+        createWindowStub({ themeName: "Fluent UI Web" });
+        expect(getFluentUiTheme(true)).toEqual(webDarkTheme);
+        expect(getFluentUiTheme(false)).toEqual(webLightTheme);
+    });
+
+    it("should return the teams theme when the name is 'Microsoft Teams'", () => {
+        createWindowStub({ themeName: "Microsoft Teams" });
+        expect(getFluentUiTheme(true)).toEqual(teamsDarkTheme);
+        expect(getFluentUiTheme(false)).toEqual(teamsLightTheme);
+    });
+});