feat: ablity to manually set fill color

src/renderer/components/settings/Settings.tsx

@@ -14,7 +14,7 @@ import { isMac, isWindows } from "renderer/utils";
 import { AutoStartToggle } from "./AutoStartToggle";
 import { DiscordBranchPicker } from "./DiscordBranchPicker";
 import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
-import { TrayIconPicker, TraySwitch } from "./TraySettings";
+import { TrayFillColorSwitch, TrayIconPicker, TraySwitch } from "./TraySettings";
 import { VencordLocationPicker } from "./VencordLocationPicker";
 import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
 
@@ -71,6 +71,7 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
     Behaviour: [
         TraySwitch,
         TrayIconPicker,
+        TrayFillColorSwitch,
         {
             key: "minimizeToTray",
             title: "Minimize to tray",

src/renderer/components/settings/TraySettings.tsx

@@ -8,8 +8,8 @@ import "./traySetting.css";
 
 import { Margins } from "@vencord/types/utils";
 import { findByCodeLazy } from "@vencord/types/webpack";
-import { Forms, Switch } from "@vencord/types/webpack/common";
+import { Forms, Select, Switch } from "@vencord/types/webpack/common";
-import { isInCall, setCurrentState } from "renderer/patches/tray";
+import { isInCall, setCurrentTrayIcon } from "renderer/patches/tray";
 import { isLinux, isMac } from "renderer/utils";
 
 import { SettingsComponent } from "./Settings";
@@ -38,11 +38,11 @@ export const TraySwitch: SettingsComponent = ({ settings }) => {
     return (
         <Switch
             value={settings.tray ?? true}
-            onChange={async t => {
+            onChange={async v => {
-                settings.tray = t;
+                settings.tray = v;
-                if (isInCall) setCurrentState();
+                if (isInCall) setCurrentTrayIcon();
             }}
-            note="Tray Icon"
+            note="Add a tray icon for Vesktop"
         >
             Tray Icon
         </Switch>
@@ -63,7 +63,7 @@ export const TrayIconPicker: SettingsComponent = ({ settings }) => {
                     onChange={newColor => {
                         const hexColor = newColor.toString(16).padStart(6, "0");
                         settings.trayColor = hexColor;
-                        if (isInCall) setCurrentState();
+                        if (isInCall) setCurrentTrayIcon();
                     }}
                     showEyeDropper={false}
                     suggestedColors={presets}
@@ -73,3 +73,33 @@ export const TrayIconPicker: SettingsComponent = ({ settings }) => {
         </div>
     );
 };
+
+export const TrayFillColorSwitch: SettingsComponent = ({ settings }) => {
+    return (
+        <div className="vcd-tray-settings">
+            <div className="vcd-tray-container">
+                <div className="vcd-tray-settings-labels">
+                    <Forms.FormTitle tag="h3">Tray icon fill color</Forms.FormTitle>
+                    <Forms.FormText>Choose background fill of Tray Icons in Voice Chat</Forms.FormText>
+                </div>
+
+                <Select
+                    placeholder="Auto"
+                    options={[
+                        { label: "Auto", value: "auto", default: true },
+                        { label: "Black", value: "black" },
+                        { label: "White", value: "white" }
+                    ]}
+                    closeOnSelect={true}
+                    select={v => {
+                        settings.trayAutoFill = v;
+                        if (isInCall) setCurrentTrayIcon();
+                    }}
+                    isSelected={v => v === settings.trayAutoFill}
+                    serialize={s => s}
+                ></Select>
+            </div>
+            <Forms.FormDivider className={Margins.top20 + " " + Margins.bottom20} />
+        </div>
+    );
+};

src/renderer/patches/tray.ts

@@ -15,10 +15,15 @@ const logger = new Logger("VesktopTrayIcon");
 
 async function changeIconColor(iconName: string) {
     const pickedColor = VesktopNative.settings.get().trayColor;
+    const fillColor = VesktopNative.settings.get().trayAutoFill ?? "auto";
 
     try {
         var svg = await VesktopNative.app.getTrayIcon(iconName);
         svg = svg.replace(/#f6bfac/gim, "#" + (pickedColor ?? "3DB77F"));
+        if (fillColor !== "auto") {
+            svg = svg.replace(/black/gim, fillColor);
+            svg = svg.replace(/white/gim, fillColor);
+        }
         const canvas = document.createElement("canvas");
         canvas.width = 128;
         canvas.height = 128;
@@ -39,7 +44,7 @@ async function changeIconColor(iconName: string) {
     }
 }
 
-export function setCurrentState() {
+export function setCurrentTrayIcon() {
     if (voiceActions.isSelfDeaf()) {
         changeIconColor("deafened");
     } else if (voiceActions.isSelfMute()) {
@@ -57,23 +62,23 @@ onceReady.then(() => {
             if (params.speakingFlags) {
                 changeIconColor("speaking");
             } else {
-                setCurrentState();
+                setCurrentTrayIcon();
             }
         }
     });
 
     FluxDispatcher.subscribe("AUDIO_TOGGLE_SELF_DEAF", () => {
-        if (isInCall) setCurrentState();
+        if (isInCall) setCurrentTrayIcon();
     });
 
     FluxDispatcher.subscribe("AUDIO_TOGGLE_SELF_MUTE", () => {
-        if (isInCall) setCurrentState();
+        if (isInCall) setCurrentTrayIcon();
     });
 
     FluxDispatcher.subscribe("RTC_CONNECTION_STATE", params => {
         if (params.state === "RTC_CONNECTED") {
             isInCall = true;
-            setCurrentState();
+            setCurrentTrayIcon();
         } else if (params.state === "RTC_DISCONNECTED") {
             VesktopNative.app.setTrayIcon("icon");
             isInCall = false;

src/shared/settings.d.ts

@@ -12,6 +12,7 @@ export interface Settings {
     transparencyOption?: "none" | "mica" | "tabbed" | "acrylic";
     tray?: boolean;
     trayColor?: string;
+    trayAutoFill?: "auto" | "white" | "black";
     minimizeToTray?: boolean;
     openLinksWithElectron?: boolean;
     staticTitle?: boolean;