Fix icons colors being hardcoded

frontend/src/windows/main/Sidebar/Sidebar.svelte

@@ -23,7 +23,6 @@
 	import Roblox from '../ts/roblox';
 	import shellFS from '../ts/tools/shellfs';
 	import { getMode } from '../ts/utils';
-	import LinkBtn from './link-btn.svelte';
 	import SidebarBtn from './sidebar-btn.svelte';
 
 	export let isLaunched: boolean = false;
@@ -50,7 +49,7 @@
 		{ label: 'Roblox', id: 'roblox', icon: RobloxIcon },
 		{ label: 'FastFlags', id: 'fastflags', icon: FastFlagsIcon },
 		{ label: 'Mods', id: 'mods', icon: ModsIcon },
-		{ label: "Appearance", id: "appearance", icon: AppearanceIcon},
+		{ label: 'Appearance', id: 'appearance', icon: AppearanceIcon },
 		{ label: 'Misc', id: 'misc', icon: MiscIcon },
 		{ label: 'Info', id: 'info', icon: CreditsIcon },
 	];
@@ -128,12 +127,7 @@
 		</div>
 	</div>
 
-	<div class="mt-auto flex flex-col items-center px-10 mb-4">
-		{#each linksBtns as { label, url, icon }}
-			<LinkBtn {label} {url} {icon} />
-		{/each}
-	</div>
-	<div class="flex flex-col items-center mb-4">
+	<div class="flex flex-col items-center mb-4 mt-auto">
 		<p class="text-sm text-muted-foreground mb-2">v{version}</p>
 
 		<div on:mouseenter={handleMouseEnter} on:mouseleave={handleMouseLeave} role="tooltip" class="w-full px-4">
@@ -147,7 +141,7 @@
 					dispatch('launchRoblox', true);
 				}}
 			>
-				<img src={buttonIcon} alt="Button Icon" class="mr-1 mt-[1px] w-5 h-5 towhite-always" />
+				<img src={buttonIcon} alt="Button Icon" class="mr-1 mt-[1px] w-5 h-5" />
 				<p class="font-mono transition duration-150">{buttonState}</p>
 			</Button>
 		</div>

frontend/src/windows/main/app.css

@@ -129,14 +129,11 @@ h1 {
 	}
 }
 
-.towhite-always {
-	-webkit-filter: invert(1);
-	filter: invert(1);
-}
-
-@media (prefers-color-scheme: dark) {
-	.towhite {
-		-webkit-filter: invert(1);
-		filter: invert(1);
-	}
+.icon-overlay {
+	-webkit-mask-size: contain;
+	mask-size: contain;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-position: center;
+	mask-position: center;
 }

frontend/src/windows/main/pages/Custom/ModsUI.svelte

@@ -4,11 +4,8 @@
 	import * as Card from '$lib/components/ui/card/index';
 	import Separator from '$lib/components/ui/separator/separator.svelte';
 	import Switch from '$lib/components/ui/switch/switch.svelte';
-
-	import RefreshIcon from '@/assets/panel/refresh.png';
 	import SillyCat from '@/assets/panel/silly.webp';
-
-	import { FolderOpen } from 'lucide-svelte';
+	import { FolderOpen, RefreshCcw } from 'lucide-svelte';
 	import path from 'path-browserify';
 	import { toast } from 'svelte-sonner';
 	import { fade } from 'svelte/transition';
@@ -60,17 +57,21 @@
 					>Enable or disable certain mods. They are loaded in alphabetical order (1,2,3,a,b,c)</Card.Description
 				>
 			</div>
-			<Button variant="outline" class="mr-3" on:click={async()=>{
-				try {
-					const folderPath = path.join(path.dirname(await getConfigPath()), 'mods');
-					await shellFS.createDirectory(folderPath);
-					await sleep(10);
-					await shellFS.open(folderPath);
-				} catch (err) {
-					toast.error(`An error occured: ${err}`);
-					console.error('[ModsPanel]', err);
-				}
-			}}><FolderOpen class="mr-3"/>Open folder</Button>
+			<Button
+				variant="outline"
+				class="mr-3"
+				on:click={async () => {
+					try {
+						const folderPath = path.join(path.dirname(await getConfigPath()), 'mods');
+						await shellFS.createDirectory(folderPath);
+						await sleep(10);
+						await shellFS.open(folderPath);
+					} catch (err) {
+						toast.error(`An error occured: ${err}`);
+						console.error('[ModsPanel]', err);
+					}
+				}}><FolderOpen class="mr-3" />Open folder</Button
+			>
 			<Button
 				class="ml-auto mb-3 w-10 p-0"
 				variant="default"
@@ -84,14 +85,14 @@
 					});
 				}}
 			>
-				<img src={RefreshIcon} alt="Refresh icon" class={`towhite-always w-[50%] ${refreshSpin ? 'animate-spin' : ''}`} />
+				<RefreshCcw class={`text-primary-foreground w-[50%] ${refreshSpin ? 'animate-spin' : ''}`} />
 			</Button>
 		</div>
 
 		{#if mods.length > 0}
 			{#each mods as mod (mod.filename)}
 				<Separator class="my-3" />
-				<div class="flex items-center" transition:fade={{duration: 100}}>
+				<div class="flex items-center" transition:fade={{ duration: 100 }}>
 					<div>
 						<p class="font-semibold text-[#0a0808] dark:text-red-100">{mod.filename}</p>
 						<p class="text-[13px] text-neutral-700 dark:text-neutral-200">{mod.path}</p>
@@ -109,7 +110,10 @@
 			<div class="flex flex-col justify-center items-center gap-3">
 				<Alert.Root>
 					<Alert.Title>No mods found</Alert.Title>
-					<Alert.Description class="flex gap-3 items-center justify-start"><p>You haven't downloaded any mods.</p><img src={SillyCat} alt="No mods found icnon" class="w-16 h-10 rounded-sm" /></Alert.Description>
+					<Alert.Description class="flex gap-3 items-center justify-start"
+						><p>You haven't downloaded any mods.</p>
+						<img src={SillyCat} alt="No mods found icnon" class="w-16 h-10 rounded-sm" /></Alert.Description
+					>
 				</Alert.Root>
 			</div>
 		{/if}

frontend/src/windows/main/sidebar/sidebar-btn.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <button
-	class={`${currentPage === id ? 'bg-background' : 'rounded-md bg-card'} hover:rounded-none flex items-center hover:bg-opacity-95 hover:bg-muted justify-start p-2 w-full mr-auto group`}
+	class={`${currentPage === id ? 'bg-background' : 'rounded-md bg-card'} hover:rounded-none flex items-center hover:bg-opacity-95 hover:bg-muted justify-start p-2 w-full mr-auto`}
 	on:click={() => {
 		dispatch('sidebarClick', id);
 	}}
@@ -21,10 +21,13 @@
 			class={`absolute right-[-10px] h-14 w-10 bg-background -z-10 ${position.index === 0 ? 'top-20' : position.index === position.total - 1 && 'mb-6'}`}
 		></div>
 	{/if}
-	<img src={icon} alt="Sidebar icon" class="w-[17px] towhite mx-4" />
+	<div class="w-4 h-4 mx-4 relative">
+		<img src={icon} alt="Sidebar icon" class="w-full h-full object-contain" />
+		<div class="absolute inset-0 bg-foreground" style="mask-image: url({icon}); mask-size: contain; mask-repeat: no-repeat; mask-position: center;"></div>
+	</div>
 	<p
-		class={`${currentPage === id ? 'text-primary' : 'text-foreground'} transition duration-100 font-mono text-[14px] group-hover:saturate-150 group-hover:text-primary`}
+		class={`${currentPage === id ? 'text-primary' : 'text-foreground'} transition duration-100 font-mono text-[14px] hover:saturate-150 hover:text-primary`}
 	>
 		{label}
 	</p>
-</button>
+</button>

frontend/svelte.config.js

@@ -1,7 +1,5 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 export default {
-	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
-	// for more information about preprocessors
-	preprocess: vitePreprocess(),
-};
+	preprocess: [vitePreprocess()],
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "appleblox",
-  "version": "0.8.0-dev.11",
+  "version": "0.8.0-dev.12",
   "description": "MacOS roblox launcher",
   "main": "frontend/src/windows/main/main.ts",
   "scripts": {