devproje/project-client
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add ability to use dynamic accent color

Browse source
This commit is contained in:
Oleh Polisan 2024-07-07 16:34:13 +03:00
parent 679b0b7342
commit 467134e606
3 changed files with 63 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/renderer/components/settings/Settings.tsx
View file

@ -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,
{

36
src/renderer/components/settings/TraySettings.tsx
View file

@ -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,10 +244,8 @@ 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">
<Forms.FormTitle tag="h3">Tray Icon Color</Forms.FormTitle>
<Forms.FormText>Choose the main color of the Tray Icons</Forms.FormText>
<Forms.FormTitle tag="h3">Tray Icon Main Color</Forms.FormTitle>
</div>
<Select
@ -236,7 +263,6 @@ export const TrayFillColorSwitch: SettingsComponent = ({ settings }) => {
isSelected={v => v === settings.trayAutoFill}
serialize={s => s}
></Select>
</div>
<Forms.FormDivider className={Margins.top20 + " " + Margins.bottom20} />
</div>
);

11
src/renderer/patches/tray.ts
View file

@ -27,9 +27,11 @@ export function setCurrentTrayIcon() {
}
}
function changeColorsInSvg(svg: string, stockColor: string) {
const pickedColor = VesktopNative.settings.get().trayColor || VesktopNative.app.getAccentColor();
const fillColor = VesktopNative.settings.get().trayAutoFill ?? "auto";
function changeColorsInSvg(svg: string, stockColor: string, accentColor: string = "f6bfac") {
const Settings = VesktopNative.settings.get();
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;