update theme handlers to set color scheme options properly

Author: astudentinearth

packages/app-desktop/src/api.d.ts

@@ -110,4 +110,8 @@ export interface DarkwriteElectronAPI {
         load: () => Promise<Theme[]>;
     };
     getClientInfo: () => Promise<DarkwriteDesktopClientInfo>;
+    setTitlebarSymbolColor: (
+        symbolColor: string,
+        themeMode: "light" | "dark" | "system" = "system",
+    ) => Promise<void>;
 }

packages/app-desktop/src/components/theme-handler.tsx

@@ -3,6 +3,7 @@ import { useTheme } from "@renderer/hooks/query";
 import { DarkwriteDefault } from "@renderer/lib/themes/darkwrite-default";
 import { hexToHslVariable, setGlobalStyle } from "@renderer/lib/utils";
 import { useEffect } from "react";
+import { hsl } from "color-convert";
 
 export function ThemeHandler() {
     const fonts = useSettingsStore((s) => s.settings.fonts);
@@ -42,6 +43,18 @@ export function ThemeHandler() {
         setGlobalStyle("--border", theme.border);
         setGlobalStyle("--ring", theme.focusRing);
         setGlobalStyle("--star", theme.star);
+        if (window.api != null && window.api.setTitlebarSymbolColor != null) {
+            const fgHSLStr = theme.foreground.replace("%", "").split(" ");
+            if (fgHSLStr.length !== 3) return;
+            const fgHSL: [number, number, number] = [
+                parseFloat(fgHSLStr[0]),
+                parseFloat(fgHSLStr[1]),
+                parseFloat(fgHSLStr[2]),
+            ];
+            const fgHEX = hsl.hex(fgHSL);
+            console.log(fgHEX);
+            window.api.setTitlebarSymbolColor(`#${fgHEX}`, theme.mode);
+        }
     }, [fonts, theme, accentColor]);
     return <></>;
 }

packages/app-desktop/src/electron/channels.ts

@@ -26,4 +26,5 @@ export enum ChannelNames {
     RESTORE_BACKUP = "restore-user-data",
     IMPORT_THEME = "import-theme",
     LOAD_THEMES = "load-themes",
+    SET_TITLEBAR_SYMBOL_COLOR = "set-titlebar-symbol-color",
 }

packages/app-desktop/src/electron/ipc.ts

@@ -5,7 +5,7 @@ import {
     NotePartial,
     UserSettings,
 } from "@darkwrite/common";
-import { app, ipcMain } from "electron";
+import { app, BrowserWindow, ipcMain, nativeTheme } from "electron";
 import { readFile, writeFile } from "fs/promises";
 import { openFile, saveFile } from "./api/dialog";
 import {
@@ -173,3 +173,17 @@ ipcMain.handle(ChannelNames.RESTORE_BACKUP, async (_event, archive: string) => {
 
 ipcMain.handle(ChannelNames.IMPORT_THEME, () => ThemeAPI.import());
 ipcMain.handle(ChannelNames.LOAD_THEMES, () => ThemeAPI.load());
+ipcMain.handle(
+    ChannelNames.SET_TITLEBAR_SYMBOL_COLOR,
+    (
+        _event,
+        symbolColor: string,
+        themeMode: "light" | "dark" | "system" = "system",
+    ) => {
+        const windows = BrowserWindow.getAllWindows();
+        windows.forEach((window) => {
+            window.setTitleBarOverlay({ symbolColor });
+        });
+        nativeTheme.themeSource = themeMode;
+    },
+);

packages/app-desktop/src/electron/preload/preload.ts

@@ -61,6 +61,15 @@ const darkwriteAPI: DarkwriteElectronAPI = {
         import: () => ipcRenderer.invoke(ChannelNames.IMPORT_THEME),
         load: () => ipcRenderer.invoke(ChannelNames.LOAD_THEMES),
     },
+    setTitlebarSymbolColor: (
+        symbolColor: string,
+        themeMode: "light" | "dark" | "system" = "system",
+    ) =>
+        ipcRenderer.invoke(
+            ChannelNames.SET_TITLEBAR_SYMBOL_COLOR,
+            symbolColor,
+            themeMode,
+        ),
 };
 
 contextBridge.exposeInMainWorld("api", darkwriteAPI);