Adjust colours

src/app.scss

@@ -30,7 +30,11 @@
 
 @mixin light {
 	// general
-	--accent: hsl(303, 73%, 81%);
+	--accent-pink: hsl(303, 73%, 81%);
+	--accent-red: hsl(348, 71%, 81%);
+	--accent-purple: hsl(264, 71%, 81%);
+	--accent-blue: hsl(220, 73%, 81%);
+	--accent: var(--accent-pink);
 
 	// foregrounds
 	--fg: hsl(0, 0%, 0%);
@@ -56,18 +60,22 @@
 			hsla(287, 100%, 50%, 0)
 		);
 	--bg-panel: hsl(0, 0%, 100%);
-	--bg-panel-alt: hsl(0, 0%, 92%);
+	--bg-panel-accented: hsl(0, 0%, 92%);
-	--bg-panel-accented: #EBEBEB;
 	--bg-separator: hsl(0, 0%, 88%);
 	--bg-button: var(--bg-panel-accented);
 	--bg-badge: hsl(0, 0%, 0%);
-
+	--bg-input: #E0E0E0;
+	
 	--shadow-panel: 0 2px 4px 0 hsla(0, 0%, 0%, 0.15);
 }
 
 @mixin dark {
 	// general
-	--accent: hsl(303, 73%, 81%);
+	--accent-pink: hsl(303, 73%, 81%);
+	--accent-red: hsl(348, 71%, 81%);
+	--accent-purple: hsl(264, 71%, 81%);
+	--accent-blue: hsl(220, 73%, 81%);
+	--accent: var(--accent-pink);
 
 	// foregrounds
 	--fg: hsl(0, 0%, 100%);
@@ -94,9 +102,8 @@
 		);
 	--bg-panel: hsl(220, 4%, 18%);
 	--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent);
-	--bg-panel-alt: hsl(220, 6%, 25%);
 	--bg-separator: hsl(220, 4%, 28%);
-	--bg-button: #43464C;
+	--bg-button: hsl(220, 6%, 28%);
 	--bg-badge: hsl(0, 0%, 100%);
 
 	--shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15);

src/lib/components/functional/FancyInput.svelte

@@ -26,7 +26,7 @@
 		bind:value
 		{placeholder}
 		{disabled}
-		class="w-full p-3 rounded-lg bg-panel border-2 border-gray-300
+		class="w-full p-3 rounded-lg bg-panel border-2 border-button
             {prefix ? 'pl-[2rem]' : 'pl-3'} 
             {extension ? 'pr-[4rem]' : 'pr-3'}"
 	/>
@@ -39,7 +39,7 @@
 	{/if}
 	{#if extension}
 		<div class="absolute right-0 top-0 bottom-0 flex items-center px-4">
-			<span class="text-sm text-black bg-gray-300 px-2 py-1 rounded"
+			<span class="text-sm bg-button text-black dynadark:text-white px-2 py-1 rounded"
 				>{extension}</span
 			>
 		</div>

src/lib/sections/about/Credits.svelte

@@ -39,7 +39,7 @@
 <Panel class="flex flex-col gap-8 p-6">
 	<h2 class="text-2xl font-bold flex items-center">
 		<div class="rounded-full bg-blue-300 p-2 inline-block mr-3 w-10 h-10">
-			<HeartHandshakeIcon />
+			<HeartHandshakeIcon color="black" />
 		</div>
 		Credits
 	</h2>

src/lib/sections/about/Donate.svelte

@@ -27,7 +27,7 @@
 	<div class="flex flex-col gap-3">
 		<h2 class="text-2xl font-bold flex items-center">
 			<div
-				class="rounded-full bg-rose-300 p-2 inline-block mr-3 w-10 h-10"
+				class="rounded-full bg-accent-red p-2 inline-block mr-3 w-10 h-10"
 			>
 				<HeartIcon color="black" />
 			</div>
@@ -41,7 +41,7 @@
 	<div class="flex flex-col gap-3 w-full">
 		<div class="flex gap-3 w-full">
 			<button
-				class="btn flex-1 p-4 rounded-lg bg-rose-300 text-black flex items-center justify-center"
+				class="btn flex-1 p-4 rounded-lg bg-accent-red text-black flex items-center justify-center"
 			>
 				<HandCoinsIcon size="24" class="inline-block mr-2" />
 				One-time
@@ -55,7 +55,7 @@
 			</button>
 		</div>
 		<div class="flex gap-3 w-full">
-			<button class="btn bg-rose-300 text-black p-4 rounded-lg flex-1"
+			<button class="btn bg-accent-red text-black p-4 rounded-lg flex-1"
 				>$1 USD</button
 			>
 			<button
@@ -86,7 +86,7 @@
 		</p>
 
 		<button
-			class="btn flex-1 p-3 rounded-3xl bg-rose-300 text-black flex items-center justify-center"
+			class="btn flex-1 p-3 rounded-3xl bg-accent-red text-black flex items-center justify-center"
 		>
 			<WalletIcon size="24" class="inline-block mr-2" />
 			Pay now

src/lib/sections/about/Resources.svelte

@@ -6,9 +6,9 @@
 <Panel class="flex flex-col gap-4 p-6">
 	<h2 class="text-2xl font-bold flex items-center">
 		<div
-			class="rounded-full bg-violet-400 p-2 inline-block mr-3 w-10 h-10"
+			class="rounded-full bg-accent-purple p-2 inline-block mr-3 w-10 h-10"
 		>
-			<LinkIcon />
+			<LinkIcon color="black" />
 		</div>
 		Resources
 	</h2>

src/lib/sections/about/Why.svelte

@@ -6,7 +6,7 @@
 <Panel class="flex flex-col gap-3 p-6">
 	<h2 class="text-2xl font-bold flex items-center">
 		<div
-			class="rounded-full bg-accent p-2 inline-block mr-3 w-10 h-10"
+			class="rounded-full bg-accent-pink p-2 inline-block mr-3 w-10 h-10"
 		>
 			<MessageCircleQuestionIcon color="black" />
 		</div>

src/lib/sections/settings/Appearance.svelte

@@ -10,21 +10,21 @@
 		theme.dark = dark;
 
 		if (dark) {
-			lightElement.classList.remove("bg-violet-400");
+			lightElement.classList.remove("bg-accent-purple");
-			darkElement.classList.add("bg-violet-400");
+			darkElement.classList.add("bg-accent-purple");
 		} else {
-			darkElement.classList.remove("bg-violet-400");
+			darkElement.classList.remove("bg-accent-purple");
-			lightElement.classList.add("bg-violet-400");
+			lightElement.classList.add("bg-accent-purple");
 		}
 	}
 
 	$effect(() => {
 		if (theme.dark) {
-			lightElement.classList.remove("bg-violet-400");
+			lightElement.classList.remove("bg-accent-purple");
-			darkElement.classList.add("bg-violet-400");
+			darkElement.classList.add("bg-accent-purple");
 		} else {
-			darkElement.classList.remove("bg-violet-400");
+			darkElement.classList.remove("bg-accent-purple");
-			lightElement.classList.add("bg-violet-400");
+			lightElement.classList.add("bg-accent-purple");
 		}
 	});
 </script>
@@ -34,7 +34,7 @@
 		<h2 class="text-2xl font-bold">
 			<PaletteIcon
 				size="40"
-				class="inline-block -mt-1 mr-2 bg-violet-400 p-2 rounded-full"
+				class="inline-block -mt-1 mr-2 bg-accent-purple p-2 rounded-full"
 				color="black"
 			/>
 			Appearance
@@ -61,7 +61,7 @@
 						<button
 							bind:this={darkElement}
 							onclick={() => setDark(true)}
-							class="btn flex-1 p-4 rounded-lg bg-button text-black flex items-center justify-center"
+							class="btn flex-1 p-4 rounded-lg text-black flex items-center justify-center"
 						>
 							<MoonIcon size="24" class="inline-block mr-2" />
 							Dark

src/routes/about/+page.svelte

@@ -97,7 +97,7 @@
 		<div class="flex flex-col gap-4 flex-1">
 			<About.Resources />
 			<About.Credits {mainContribs} {ghContribs} />
-			<!-- <About.Donate {donors} /> -->
+			<About.Donate />
 		</div>
 	</div>
 </div>

tailwind.config.ts

@@ -10,11 +10,12 @@ export default {
 				"panel-accented": "var(--bg-panel-accented)",
 				separator: "var(--bg-separator)",
 				button: "var(--bg-button)",
-				"panel-alt": "var(--bg-panel-alt)",
+				"panel-alt": "var(--bg-button)",
 				badge: "var(--bg-badge)",
 			},
 			borderColor: {
 				separator: "var(--bg-separator)",
+				button: "var(--bg-button)",
 			},
 			textColor: {
 				foreground: "var(--fg)",
@@ -24,6 +25,10 @@ export default {
 			},
 			colors: {
 				accent: "var(--accent)",
+				"accent-pink": "var(--accent-pink)",
+				"accent-red": "var(--accent-red)",
+				"accent-purple": "var(--accent-purple)",
+				"accent-blue": "var(--accent-blue)",
 			},
 			boxShadow: {
 				panel: "var(--shadow-panel)",