feat: add ability to use dynamic accent color

src/renderer/components/settings/Settings.tsx

@@ -14,7 +14,13 @@ import { isMac, isWindows } from "renderer/utils";
 import { AutoStartToggle } from "./AutoStartToggle";
 import { DiscordBranchPicker } from "./DiscordBranchPicker";
 import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
-import { CustomizeTraySwitch, TrayFillColorSwitch, TrayIconPicker, TraySwitch } from "./TraySettings";
+import {
+    CustomizeTraySwitch,
+    TrayColorTypeSelect,
+    TrayFillColorSwitch,
+    TrayIconPicker,
+    TraySwitch
+} from "./TraySettings";
 import { VencordLocationPicker } from "./VencordLocationPicker";
 import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
 
@@ -71,6 +77,7 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
     Tray: [
         TraySwitch,
         CustomizeTraySwitch,
+        TrayColorTypeSelect,
         TrayIconPicker,
         TrayFillColorSwitch,
         {

src/renderer/components/settings/TraySettings.tsx

@@ -186,8 +186,37 @@ export const CustomizeTraySwitch: SettingsComponent = ({ settings }) => {
     );
 };
 
-export const TrayIconPicker: SettingsComponent = ({ settings }) => {
+export const TrayColorTypeSelect: SettingsComponent = ({ settings }) => {
     if (!settings.tray) return null;
+    return (
+        <div className="vcd-tray-settings">
+            <div className="vcd-tray-settings-labels">
+                <Forms.FormTitle tag="h3">Tray Color Type</Forms.FormTitle>
+            </div>
+
+            <Select
+                placeholder="Auto"
+                options={[
+                    { label: "Default", value: "default", default: true },
+                    { label: "System Accent", value: "system" },
+                    { label: "Custom", value: "custom" }
+                ]}
+                closeOnSelect={true}
+                select={v => {
+                    settings.trayColorType = v;
+                    VesktopNative.tray.generateTrayIcons();
+                }}
+                isSelected={v => v === settings.trayColorType}
+                serialize={s => s}
+                className="vcd-tray-settings-select"
+            ></Select>
+            <Forms.FormDivider className={Margins.top20 + " " + Margins.bottom20} />
+        </div>
+    );
+};
+
+export const TrayIconPicker: SettingsComponent = ({ settings }) => {
+    if (!settings.tray || settings.trayColorType !== "custom") return null;
     return (
         <div className="vcd-tray-settings">
             <div className="vcd-tray-container">
@@ -215,28 +244,25 @@ export const TrayFillColorSwitch: SettingsComponent = ({ settings }) => {
     if (!settings.tray) return null;
     return (
         <div className="vcd-tray-settings">
-            <div className="vcd-tray-container">
+            <div className="vcd-tray-settings-labels">
-                <div className="vcd-tray-settings-labels">
+                <Forms.FormTitle tag="h3">Tray Icon Main Color</Forms.FormTitle>
-                    <Forms.FormTitle tag="h3">Tray Icon Color</Forms.FormTitle>
-                    <Forms.FormText>Choose the main color of the Tray Icons</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;
-                        VesktopNative.tray.generateTrayIcons();
-                    }}
-                    isSelected={v => v === settings.trayAutoFill}
-                    serialize={s => s}
-                ></Select>
             </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;
+                    VesktopNative.tray.generateTrayIcons();
+                }}
+                isSelected={v => v === settings.trayAutoFill}
+                serialize={s => s}
+            ></Select>
             <Forms.FormDivider className={Margins.top20 + " " + Margins.bottom20} />
         </div>
     );

src/renderer/patches/tray.ts

@@ -27,9 +27,11 @@ export function setCurrentTrayIcon() {
     }
 }
 
-function changeColorsInSvg(svg: string, stockColor: string) {
+function changeColorsInSvg(svg: string, stockColor: string, accentColor: string = "f6bfac") {
-    const pickedColor = VesktopNative.settings.get().trayColor || VesktopNative.app.getAccentColor();
+    const Settings = VesktopNative.settings.get();
-    const fillColor = VesktopNative.settings.get().trayAutoFill ?? "auto";
+    if (Settings.trayColorType === "default") return svg;
+    const pickedColor = Settings.trayColorType === "system" ? accentColor : Settings.trayColor || accentColor;
+    const fillColor = Settings.trayAutoFill ?? "auto";
     const reg = new RegExp(stockColor, "gim");
     svg = svg.replace(reg, "#" + (pickedColor ?? stockColor));
 
@@ -44,7 +46,8 @@ function changeColorsInSvg(svg: string, stockColor: string) {
 VesktopNative.tray.createIconRequest(async (iconName: string, svgIcon: string = "") => {
     try {
         var svg = svgIcon || (await VesktopNative.tray.getIcon(iconName));
-        svg = changeColorsInSvg(svg, "#f6bfac");
+        svg = changeColorsInSvg(svg, "#f6bfac", (await VesktopNative.app.getAccentColor()).substring(1));
+
         const canvas = document.createElement("canvas");
         canvas.width = 128;
         canvas.height = 128;