feat: added option to choose color mode

src/renderer/Core/I18n/getCoreResources.ts

@@ -123,6 +123,10 @@ export const getCoreResources = (): { namespace: string; resources: Resources<Tr
                     searchBarPlaceholderTextReset: "Reset",
                     searchBarShowIcon: "Show search icon",
                     themeName: "Theme",
+                    colorMode: "Color Mode",
+                    "colorMode.light": "Light",
+                    "colorMode.dark": "Dark",
+                    "colorMode.system": "System",
                 },
                 "de-CH": {
                     title: "Erscheinungsbild",
@@ -141,6 +145,10 @@ export const getCoreResources = (): { namespace: string; resources: Resources<Tr
                     searchBarPlaceholderTextReset: "Zurücksetzen",
                     searchBarShowIcon: "Suchsymbol anzeigen",
                     themeName: "Farbschema",
+                    colorMode: "Farbmodus",
+                    "colorMode.light": "Hell",
+                    "colorMode.dark": "Dunkel",
+                    "colorMode.system": "System",
                 },
             },
         },

src/renderer/Core/Settings/Pages/Appearance/Appearance.tsx

@@ -1,5 +1,5 @@
 import { useSetting } from "@Core/Hooks";
-import { getAvailableThemes } from "@Core/Theme";
+import { getAvailableColorModes, getAvailableThemes } from "@Core/Theme";
 import { Dropdown, Option } from "@fluentui/react-components";
 import { useTranslation } from "react-i18next";
 import { Setting } from "../../Setting";
@@ -12,20 +12,26 @@ export const Appearance = () => {
     const { t } = useTranslation("settingsAppearance");
 
     const availableThemes = getAvailableThemes();
+    const availableColorModes = getAvailableColorModes();
 
     const { value: themeName, updateValue: setThemeName } = useSetting<string>({
         key: "appearance.themeName",
         defaultValue: "Fluent UI Web",
     });
-    const themes = [
-        { value: "Microsoft Teams", label: "Microsoft Teams" },
-        { value: "Fluent UI Web", label: "Fluent UI Web" },
-    ];
+
+    const { value: colorMode, updateValue: setColorMode } = useSetting<string>({
+        key: "appearance.colorMode",
+        defaultValue: "system",
+    });
 
     const updateTheme = (themeName: string) => {
         setThemeName(themeName);
     };
 
+    const updateColorMode = (mode: string) => {
+        setColorMode(mode);
+    };
+
     return (
         <SettingGroupList>
             <SearchBarSettings />
@@ -34,7 +40,7 @@ export const Appearance = () => {
                     label={t("themeName")}
                     control={
                         <Dropdown
-                            value={themes.find((t) => t.value === themeName)?.label}
+                            value={themeName}
                             onOptionSelect={(_, { optionValue }) => optionValue && updateTheme(optionValue)}
                             selectedOptions={[themeName]}
                         >
@@ -46,6 +52,26 @@ export const Appearance = () => {
                         </Dropdown>
                     }
                 />
+                <Setting
+                    label={t("colorMode")}
+                    control={
+                        <Dropdown
+                            value={t("colorMode." + colorMode)}
+                            onOptionSelect={(_, { optionValue }) => optionValue && updateColorMode(optionValue)}
+                            selectedOptions={[colorMode]}
+                        >
+                            {availableColorModes.map((colorMode: string | undefined) => (
+                                <Option
+                                    key={`color-mode-option-${colorMode}`}
+                                    value={colorMode}
+                                    text={t("colorMode." + colorMode)}
+                                >
+                                    {t("colorMode." + colorMode)}
+                                </Option>
+                            ))}
+                        </Dropdown>
+                    }
+                />
             </SettingGroup>
         </SettingGroupList>
     );

src/renderer/Core/Theme/ThemeProvider.tsx

@@ -1,10 +1,21 @@
+import { useSetting } from "@Core/Hooks";
 import { type Theme } from "@fluentui/react-theme";
 import { useEffect, useState, type ReactNode } from "react";
 import { ThemeContext } from "./ThemeContext";
 import { getFluentUiTheme } from "./getFluentUiTheme";
 
 export const ThemeProvider = ({ children }: { children: ReactNode }) => {
-    const initialShouldUseDarkColors = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const { value: colorMode } = useSetting<string>({
+        key: "appearance.colorMode",
+        defaultValue: "system",
+    });
+
+    const initialShouldUseDarkColors =
+        colorMode === "light"
+            ? false
+            : colorMode === "dark"
+              ? true
+              : window.matchMedia("(prefers-color-scheme: dark)").matches;
 
     const [fluentUiTheme, setFluentUiTheme] = useState<Theme>(getFluentUiTheme(initialShouldUseDarkColors));
     const [shouldUseDarkColors, setShouldUseDarkColors] = useState<boolean>(initialShouldUseDarkColors);
@@ -16,15 +27,26 @@ export const ThemeProvider = ({ children }: { children: ReactNode }) => {
         };
 
         const themeNameChangeListener = () => {
-            setFluentUiTheme(getFluentUiTheme(window.matchMedia("(prefers-color-scheme: dark)").matches));
+            const colorMode = window.ContextBridge.getSettingValue<string>("appearance.colorMode", "system");
+            const shouldUseDark =
+                colorMode === "dark"
+                    ? true
+                    : colorMode === "light"
+                      ? false
+                      : window.matchMedia("(prefers-color-scheme: dark)").matches;
+            console.log(colorMode);
+            console.log(shouldUseDark);
+            setFluentUiTheme(getFluentUiTheme(shouldUseDark));
         };
 
         window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", colorSchemeChangeListener);
         window.ContextBridge.ipcRenderer.on("settingUpdated[appearance.themeName]", themeNameChangeListener);
+        window.ContextBridge.ipcRenderer.on("settingUpdated[appearance.colorMode]", themeNameChangeListener);
 
         return () => {
             window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", colorSchemeChangeListener);
             window.ContextBridge.ipcRenderer.off("settingUpdated[appearance.themeName]", themeNameChangeListener);
+            window.ContextBridge.ipcRenderer.off("settingUpdated[appearance.colorMode]", themeNameChangeListener);
         };
     }, []);
 

src/renderer/Core/Theme/getAvailableModes.ts

@@ -0,0 +1,5 @@
+export const getAvailableColorModes = () => {
+    const availableColorModes: string[] = ["light", "dark", "system"];
+
+    return availableColorModes;
+};

src/renderer/Core/Theme/index.ts

@@ -1,2 +1,3 @@
+export * from "./getAvailableModes";
 export * from "./getAvailableThemes";
 export * from "./ThemeContext";