feat: accent color support for linix

src/main/firstLaunch.ts

@@ -13,7 +13,7 @@ import { ICON_PATH, VIEW_DIR } from "shared/paths";
 
 import { autoStart } from "./autoStart";
 import { DATA_DIR } from "./constants";
-import { createWindows } from "./mainWindow";
+import { createWindows, getAccentColor } from "./mainWindow";
 import { Settings, State } from "./settings";
 import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally";
 
@@ -49,6 +49,7 @@ export function createFirstLaunchTour() {
         Settings.store.discordBranch = data.discordBranch;
         Settings.store.arRPC = data.richPresence;
         Settings.store.tray = true;
+        Settings.store.trayColor = getAccentColor()?.slice(1);
 
         if (data.autoStart) autoStart.enable();
 

src/main/ipc.ts

@@ -7,17 +7,7 @@
 if (process.platform === "linux") import("./venmic");
 
 import { execFile } from "child_process";
-import {
+import { app, BrowserWindow, clipboard, dialog, nativeImage, RelaunchOptions, session, shell } from "electron";
-    app,
-    BrowserWindow,
-    clipboard,
-    dialog,
-    nativeImage,
-    RelaunchOptions,
-    session,
-    shell,
-    systemPreferences
-} from "electron";
 import { mkdirSync, readFileSync, watch } from "fs";
 import { open, readFile } from "fs/promises";
 import { release } from "os";
@@ -28,7 +18,7 @@ import { IpcEvents } from "../shared/IpcEvents";
 import { setBadgeCount } from "./appBadge";
 import { autoStart } from "./autoStart";
 import { VENCORD_FILES_DIR, VENCORD_QUICKCSS_FILE, VENCORD_THEMES_DIR } from "./constants";
-import { mainWin } from "./mainWindow";
+import { getAccentColor, mainWin } from "./mainWindow";
 import { Settings } from "./settings";
 import {
     createTrayIcon,
@@ -172,7 +162,7 @@ watch(
 handle(IpcEvents.SET_TRAY_ICON, (_, iconURI) => setTrayIcon(iconURI));
 handle(IpcEvents.GET_TRAY_ICON, (_, iconPath) => getTrayIconFile(iconPath));
 handleSync(IpcEvents.GET_TRAY_ICON_SYNC, (_, iconPath) => getTrayIconFileSync(iconPath));
-handle(IpcEvents.GET_SYSTEM_ACCENT_COLOR, () => `#${systemPreferences.getAccentColor?.() || ""}`);
+handle(IpcEvents.GET_SYSTEM_ACCENT_COLOR, () => getAccentColor());
 handle(IpcEvents.CREATE_TRAY_ICON_RESPONSE, (_, iconName, dataURL, isCustomIcon) =>
     createTrayIcon(iconName, dataURL, isCustomIcon)
 );

src/main/mainWindow.ts

@@ -4,6 +4,7 @@
  * Copyright (c) 2023 Vendicated and Vencord contributors
  */
 
+import { execFileSync } from "child_process";
 import {
     app,
     BrowserWindow,
@@ -14,6 +15,7 @@ import {
     nativeTheme,
     screen,
     session,
+    systemPreferences,
     Tray
 } from "electron";
 import { rm } from "fs/promises";
@@ -503,3 +505,38 @@ export async function createWindows() {
 
     initArRPC();
 }
+
+export function getAccentColor() {
+    if (process.platform === "linux") {
+        var accentColor = execFileSync("gdbus", [
+            "call",
+            "--session",
+            "--dest",
+            "org.freedesktop.portal.Desktop",
+            "--object-path",
+            "/org/freedesktop/portal/desktop",
+            "--method",
+            "org.freedesktop.portal.Settings.Read",
+            "org.freedesktop.appearance",
+            "accent-color"
+        ]);
+        const rgbMatch = accentColor.toString().match(/\((\d+\.\d+),\s*(\d+\.\d+),\s*(\d+\.\d+)\)/);
+
+        if (rgbMatch) {
+            const r = parseFloat(rgbMatch[1]);
+            const g = parseFloat(rgbMatch[2]);
+            const b = parseFloat(rgbMatch[3]);
+
+            const r255 = Math.round(r * 255);
+            const g255 = Math.round(g * 255);
+            const b255 = Math.round(b * 255);
+
+            const toHex = (value: number) => value.toString(16).padStart(2, "0");
+            const hexColor = `#${toHex(r255)}${toHex(g255)}${toHex(b255)}`;
+            return hexColor;
+        }
+        return undefined;
+    } else {
+        return `#${systemPreferences.getAccentColor?.() || ""}`;
+    }
+}

src/renderer/components/settings/TraySettings.tsx

@@ -11,7 +11,6 @@ import { findByCodeLazy, findByPropsLazy } from "@vencord/types/webpack";
 import { Button, Forms, Select, Switch, Toasts } from "@vencord/types/webpack/common";
 import { setCurrentTrayIcon } from "renderer/patches/tray";
 import { useSettings } from "renderer/settings";
-import { isLinux } from "renderer/utils";
 
 import { SettingsComponent } from "./Settings";
 
@@ -30,10 +29,9 @@ const presets = [
     "#FC18EC" // pink
 ];
 
-if (!isLinux)
+VesktopNative.app.getAccentColor().then(color => {
-    VesktopNative.app.getAccentColor().then(color => {
     if (color) presets.unshift(color);
-    });
+});
 
 const statusToSettingsKey = {
     icon: { key: "trayMainOverride", label: "Main Icon" },

src/renderer/patches/tray.ts

@@ -27,8 +27,8 @@ export function setCurrentTrayIcon() {
     }
 }
 
-function changeColorsInSvg(svg: string, stockColor: string, isBadge: boolean = false) {
+function changeColorsInSvg(svg: string, stockColor: string) {
-    const pickedColor = VesktopNative.settings.get().trayColor;
+    const pickedColor = VesktopNative.settings.get().trayColor || VesktopNative.app.getAccentColor();
     const fillColor = VesktopNative.settings.get().trayAutoFill ?? "auto";
     const reg = new RegExp(stockColor, "gim");
     svg = svg.replace(reg, "#" + (pickedColor ?? stockColor));
@@ -65,7 +65,7 @@ VesktopNative.tray.createIconRequest(async (iconName: string) => {
 
 VesktopNative.tray.addBadgeToIcon(async (iconDataURL: string, badgeDataSVG: string) => {
     const fillColor = VesktopNative.settings.get().trayAutoFill ?? "white";
-    badgeDataSVG = changeColorsInSvg(badgeDataSVG, "#F35959", true);
+    badgeDataSVG = changeColorsInSvg(badgeDataSVG, "#F35959");
     if (fillColor !== "auto") badgeDataSVG = badgeDataSVG.replace(/white/gim, fillColor);
 
     const canvas = document.createElement("canvas");