From def987d8e93e6a2769465ffb67e5ff3acd736f41 Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Mon, 29 Dec 2025 01:12:59 +1030
Subject: [PATCH] feat: enhance accent color support across the application

- Introduced new accent colors (green, orange, teal, purple, rose) in the accent store.
- Updated CSS variables for accent colors in app.css.
- Refactored components to utilize accent colors for buttons, inputs, dropdowns, and tags.
- Improved accessibility and visual consistency by replacing hardcoded colors with accent variables.
- Adjusted styles in various components including modals, tables, and forms to reflect the new accent color scheme.
---
 src/app.css                                   | 28 ++++++++++
 src/lib/client/stores/accent.ts               | 55 ++++++++++++++++++-
 src/lib/client/ui/button/Button.svelte        | 35 ++++++++++++
 .../ui/dropdown/CustomGroupManager.svelte     |  6 +-
 .../client/ui/dropdown/DropdownItem.svelte    |  2 +-
 src/lib/client/ui/form/FormInput.svelte       |  4 +-
 src/lib/client/ui/form/NumberInput.svelte     |  2 +-
 src/lib/client/ui/form/TagInput.svelte        |  4 +-
 src/lib/client/ui/modal/Modal.svelte          |  2 +-
 .../client/ui/modal/SaveTargetModal.svelte    |  4 +-
 src/lib/client/ui/navigation/tabs/Tabs.svelte |  2 +-
 src/lib/client/ui/state/EmptyState.svelte     |  2 +-
 .../client/ui/table/ExpandableTable.svelte    |  4 +-
 src/routes/+layout.svelte                     |  2 +-
 .../components/DelayProfileForm.svelte        | 12 ++--
 .../[databaseId]/views/CardView.svelte        |  2 +-
 .../[databaseId]/views/TableView.svelte       |  2 +-
 .../[databaseId]/[id]/languages/+page.svelte  |  4 +-
 .../[databaseId]/[id]/qualities/+page.svelte  |  8 +--
 .../[databaseId]/[id]/scoring/+page.svelte    |  4 +-
 .../[databaseId]/views/CardView.svelte        |  4 +-
 .../[databaseId]/views/TableView.svelte       |  4 +-
 src/routes/settings/about/+page.svelte        |  6 +-
 .../settings/about/components/InfoRow.svelte  |  2 +-
 24 files changed, 157 insertions(+), 43 deletions(-)
 create mode 100644 src/lib/client/ui/button/Button.svelte

diff --git a/src/app.css b/src/app.css
index b24e55d..8eb4676 100644
--- a/src/app.css
+++ b/src/app.css
@@ -7,6 +7,19 @@
 @theme {
 	--font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
 	--font-mono: 'Geist Mono', ui-monospace, monospace;
+
+	/* Accent colors using CSS variables set by accent store */
+	--color-accent-50: var(--accent-50);
+	--color-accent-100: var(--accent-100);
+	--color-accent-200: var(--accent-200);
+	--color-accent-300: var(--accent-300);
+	--color-accent-400: var(--accent-400);
+	--color-accent-500: var(--accent-500);
+	--color-accent-600: var(--accent-600);
+	--color-accent-700: var(--accent-700);
+	--color-accent-800: var(--accent-800);
+	--color-accent-900: var(--accent-900);
+	--color-accent-950: var(--accent-950);
 }
 
 @layer base {
@@ -14,6 +27,21 @@
 		font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
 	}
 
+	/* Default accent colors (blue) - overridden by JS */
+	:root {
+		--accent-50: #eff6ff;
+		--accent-100: #dbeafe;
+		--accent-200: #bfdbfe;
+		--accent-300: #93c5fd;
+		--accent-400: #60a5fa;
+		--accent-500: #3b82f6;
+		--accent-600: #2563eb;
+		--accent-700: #1d4ed8;
+		--accent-800: #1e40af;
+		--accent-900: #1e3a8a;
+		--accent-950: #172554;
+	}
+
 	html {
 		@apply bg-neutral-50 dark:bg-neutral-900;
 	}
diff --git a/src/lib/client/stores/accent.ts b/src/lib/client/stores/accent.ts
index e48574f..d77fcf4 100644
--- a/src/lib/client/stores/accent.ts
+++ b/src/lib/client/stores/accent.ts
@@ -5,13 +5,62 @@
 import { writable } from 'svelte/store';
 import { browser } from '$app/environment';
 
-export type AccentColor = 'blue' | 'yellow';
+export type AccentColor = 'blue' | 'yellow' | 'green' | 'orange' | 'teal' | 'purple' | 'rose';
+
+// Color palettes for each accent (matching Tailwind shades)
+const colorPalettes: Record<AccentColor, {
+	50: string; 100: string; 200: string; 300: string; 400: string;
+	500: string; 600: string; 700: string; 800: string; 900: string; 950: string
+}> = {
+	blue: {
+		50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa',
+		500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554'
+	},
+	yellow: {
+		50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15',
+		500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006'
+	},
+	green: {
+		50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80',
+		500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16'
+	},
+	orange: {
+		50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c',
+		500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407'
+	},
+	teal: {
+		50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf',
+		500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e'
+	},
+	purple: {
+		50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc',
+		500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764'
+	},
+	rose: {
+		50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185',
+		500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519'
+	}
+};
 
 export const accentColors: { value: AccentColor; label: string; color: string }[] = [
 	{ value: 'blue', label: 'Blue', color: '#2563eb' },
-	{ value: 'yellow', label: 'Yellow', color: '#eab308' }
+	{ value: 'yellow', label: 'Yellow', color: '#eab308' },
+	{ value: 'green', label: 'Green', color: '#16a34a' },
+	{ value: 'orange', label: 'Orange', color: '#ea580c' },
+	{ value: 'teal', label: 'Teal', color: '#0d9488' },
+	{ value: 'purple', label: 'Purple', color: '#9333ea' },
+	{ value: 'rose', label: 'Rose', color: '#e11d48' }
 ];
 
+function applyAccentColors(accent: AccentColor) {
+	if (!browser) return;
+	const palette = colorPalettes[accent];
+	const root = document.documentElement;
+	Object.entries(palette).forEach(([shade, color]) => {
+		root.style.setProperty(`--accent-${shade}`, color);
+	});
+}
+
 function createAccentStore() {
 	let initialAccent: AccentColor = 'blue';
 	if (browser) {
@@ -19,12 +68,14 @@ function createAccentStore() {
 		if (stored && accentColors.some((c) => c.value === stored)) {
 			initialAccent = stored;
 		}
+		applyAccentColors(initialAccent);
 	}
 
 	const { subscribe, set } = writable<AccentColor>(initialAccent);
 
 	function setAccent(accent: AccentColor) {
 		set(accent);
+		applyAccentColors(accent);
 		if (browser) {
 			localStorage.setItem('accent', accent);
 		}
diff --git a/src/lib/client/ui/button/Button.svelte b/src/lib/client/ui/button/Button.svelte
new file mode 100644
index 0000000..458522d
--- /dev/null
+++ b/src/lib/client/ui/button/Button.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { ComponentType } from 'svelte';
+
+	export let variant: 'primary' | 'secondary' | 'danger' = 'primary';
+	export let size: 'sm' | 'md' = 'md';
+	export let disabled: boolean = false;
+	export let icon: ComponentType | undefined = undefined;
+	export let type: 'button' | 'submit' = 'button';
+
+	const baseClasses =
+		'inline-flex items-center justify-center font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50';
+
+	const sizeClasses = {
+		sm: 'gap-1.5 rounded-md px-3 py-1.5 text-xs',
+		md: 'gap-2 rounded-lg px-4 py-2 text-sm'
+	};
+
+	const variantClasses = {
+		primary:
+			'bg-accent-600 text-white hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600',
+		secondary:
+			'border border-neutral-300 bg-white text-neutral-700 hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700',
+		danger:
+			'bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600'
+	};
+
+	$: classes = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]}`;
+</script>
+
+<button {type} {disabled} class={classes} on:click>
+	{#if icon}
+		<svelte:component this={icon} size={size === 'sm' ? 14 : 16} />
+	{/if}
+	<slot />
+</button>
diff --git a/src/lib/client/ui/dropdown/CustomGroupManager.svelte b/src/lib/client/ui/dropdown/CustomGroupManager.svelte
index bb23db4..a0cf046 100644
--- a/src/lib/client/ui/dropdown/CustomGroupManager.svelte
+++ b/src/lib/client/ui/dropdown/CustomGroupManager.svelte
@@ -34,17 +34,17 @@
 			type="text"
 			bind:value={newGroupName}
 			placeholder="Group name"
-			class="block w-full rounded border border-neutral-300 bg-white px-2 py-1.5 text-xs text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
+			class="block w-full rounded border border-neutral-300 bg-white px-2 py-1.5 text-xs text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
 		/>
 		<input
 			type="text"
 			bind:value={newGroupTags}
 			placeholder="Tags (comma-separated)"
-			class="block w-full rounded border border-neutral-300 bg-white px-2 py-1.5 text-xs text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
+			class="block w-full rounded border border-neutral-300 bg-white px-2 py-1.5 text-xs text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
 		/>
 		<button
 			type="submit"
-			class="w-full rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
+			class="w-full rounded bg-accent-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-accent-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-accent-500 dark:hover:bg-accent-600"
 			disabled={!newGroupName || !newGroupTags}
 		>
 			Add Group
diff --git a/src/lib/client/ui/dropdown/DropdownItem.svelte b/src/lib/client/ui/dropdown/DropdownItem.svelte
index 390eaa4..3acdcf7 100644
--- a/src/lib/client/ui/dropdown/DropdownItem.svelte
+++ b/src/lib/client/ui/dropdown/DropdownItem.svelte
@@ -24,6 +24,6 @@
 	{/if}
 	<span class="flex-1">{label}</span>
 	{#if selected}
-		<Check size={16} class="text-blue-600 dark:text-blue-400" />
+		<Check size={16} class="text-accent-600 dark:text-accent-400" />
 	{/if}
 </button>
diff --git a/src/lib/client/ui/form/FormInput.svelte b/src/lib/client/ui/form/FormInput.svelte
index 068b230..9d24c97 100644
--- a/src/lib/client/ui/form/FormInput.svelte
+++ b/src/lib/client/ui/form/FormInput.svelte
@@ -22,14 +22,14 @@
 			bind:value
 			{placeholder}
 			rows="6"
-			class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-neutral-900 placeholder-neutral-400 transition-colors focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
+			class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-neutral-900 placeholder-neutral-400 transition-colors focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
 		></textarea>
 	{:else}
 		<input
 			type="text"
 			bind:value
 			{placeholder}
-			class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-neutral-900 placeholder-neutral-400 transition-colors focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
+			class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-neutral-900 placeholder-neutral-400 transition-colors focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
 		/>
 	{/if}
 </div>
diff --git a/src/lib/client/ui/form/NumberInput.svelte b/src/lib/client/ui/form/NumberInput.svelte
index 32a4410..0fa4a22 100644
--- a/src/lib/client/ui/form/NumberInput.svelte
+++ b/src/lib/client/ui/form/NumberInput.svelte
@@ -58,7 +58,7 @@
 		{step}
 		{required}
 		{disabled}
-		class="block w-full [appearance:textfield] rounded-lg border border-neutral-300 bg-white px-3 py-2 pr-10 text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none disabled:bg-neutral-100 disabled:text-neutral-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500 dark:disabled:bg-neutral-900 dark:disabled:text-neutral-600 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none {fontClass}"
+		class="block w-full [appearance:textfield] rounded-lg border border-neutral-300 bg-white px-3 py-2 pr-10 text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none disabled:bg-neutral-100 disabled:text-neutral-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500 dark:disabled:bg-neutral-900 dark:disabled:text-neutral-600 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none {fontClass}"
 	/>
 
 	<!-- Custom increment/decrement buttons -->
diff --git a/src/lib/client/ui/form/TagInput.svelte b/src/lib/client/ui/form/TagInput.svelte
index 801c210..2ddfcd5 100644
--- a/src/lib/client/ui/form/TagInput.svelte
+++ b/src/lib/client/ui/form/TagInput.svelte
@@ -34,13 +34,13 @@
 >
 	{#each tags as tag, index (tag)}
 		<div
-			class="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
+			class="flex items-center gap-1 rounded bg-accent-100 px-2 py-1 text-sm text-accent-800 dark:bg-accent-900/30 dark:text-accent-300"
 		>
 			<span>{tag}</span>
 			<button
 				type="button"
 				on:click={() => removeTag(index)}
-				class="hover:text-blue-900 dark:hover:text-blue-100"
+				class="hover:text-accent-900 dark:hover:text-accent-100"
 				aria-label="Remove tag"
 			>
 				<X size={14} />
diff --git a/src/lib/client/ui/modal/Modal.svelte b/src/lib/client/ui/modal/Modal.svelte
index 9caad37..77e7f99 100644
--- a/src/lib/client/ui/modal/Modal.svelte
+++ b/src/lib/client/ui/modal/Modal.svelte
@@ -84,7 +84,7 @@
 					on:click={handleConfirm}
 					class={confirmDanger
 						? 'flex items-center gap-2 rounded-lg border border-red-600 bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 dark:border-red-500 dark:bg-red-500 dark:hover:bg-red-600'
-						: 'flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'}
+						: 'flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600'}
 				>
 					<Check size={16} />
 					{confirmText}
diff --git a/src/lib/client/ui/modal/SaveTargetModal.svelte b/src/lib/client/ui/modal/SaveTargetModal.svelte
index b9dcea7..d7392f3 100644
--- a/src/lib/client/ui/modal/SaveTargetModal.svelte
+++ b/src/lib/client/ui/modal/SaveTargetModal.svelte
@@ -82,7 +82,7 @@
 				<button
 					type="button"
 					on:click={() => handleSelect('user')}
-					class="flex w-full items-start gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-left transition-colors hover:border-blue-300 hover:bg-blue-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-blue-600 dark:hover:bg-blue-950"
+					class="flex w-full items-start gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-left transition-colors hover:border-accent-300 hover:bg-accent-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-accent-600 dark:hover:bg-accent-950"
 				>
 					<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300">
 						<User size={20} />
@@ -98,7 +98,7 @@
 				<button
 					type="button"
 					on:click={() => handleSelect('base')}
-					class="flex w-full items-start gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-left transition-colors hover:border-blue-300 hover:bg-blue-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-blue-600 dark:hover:bg-blue-950"
+					class="flex w-full items-start gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-left transition-colors hover:border-accent-300 hover:bg-accent-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-accent-600 dark:hover:bg-accent-950"
 				>
 					<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300">
 						<GitBranch size={20} />
diff --git a/src/lib/client/ui/navigation/tabs/Tabs.svelte b/src/lib/client/ui/navigation/tabs/Tabs.svelte
index f0711b3..22d1f98 100644
--- a/src/lib/client/ui/navigation/tabs/Tabs.svelte
+++ b/src/lib/client/ui/navigation/tabs/Tabs.svelte
@@ -26,7 +26,7 @@
 					href={tab.href}
 					data-sveltekit-preload-data="tap"
 					class="flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-colors {tab.active
-						? 'border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-500'
+						? 'border-accent-600 text-accent-600 dark:border-accent-500 dark:text-accent-500'
 						: 'border-transparent text-neutral-600 hover:border-neutral-300 hover:text-neutral-900 dark:text-neutral-400 dark:hover:border-neutral-700 dark:hover:text-neutral-50'}"
 				>
 					{#if tab.icon}
diff --git a/src/lib/client/ui/state/EmptyState.svelte b/src/lib/client/ui/state/EmptyState.svelte
index 249a48f..6561bff 100644
--- a/src/lib/client/ui/state/EmptyState.svelte
+++ b/src/lib/client/ui/state/EmptyState.svelte
@@ -31,7 +31,7 @@
 		<!-- Action Button -->
 		<a
 			href={buttonHref}
-			class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
+			class="inline-flex items-center gap-2 rounded-lg bg-accent-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600"
 		>
 			<svelte:component this={buttonIcon} size={18} />
 			{buttonText}
diff --git a/src/lib/client/ui/table/ExpandableTable.svelte b/src/lib/client/ui/table/ExpandableTable.svelte
index 64e55cc..b6f9e79 100644
--- a/src/lib/client/ui/table/ExpandableTable.svelte
+++ b/src/lib/client/ui/table/ExpandableTable.svelte
@@ -118,9 +118,9 @@
 								{column.header}
 								{#if sortState?.key === column.key}
 									{#if sortState.direction === 'asc'}
-										<ArrowUp size={12} class="text-blue-500" />
+										<ArrowUp size={12} class="text-accent-500" />
 									{:else}
-										<ArrowDown size={12} class="text-blue-500" />
+										<ArrowDown size={12} class="text-accent-500" />
 									{/if}
 								{:else}
 									<ArrowUpDown size={12} class="opacity-30" />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b66beba..4b18c6c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -15,6 +15,6 @@
 <PageNav />
 <AlertContainer />
 
-<main class="pt-16 pl-72">
+<main class="pl-72">
 	<slot />
 </main>
diff --git a/src/routes/delay-profiles/[databaseId]/components/DelayProfileForm.svelte b/src/routes/delay-profiles/[databaseId]/components/DelayProfileForm.svelte
index 834f03d..62e160a 100644
--- a/src/routes/delay-profiles/[databaseId]/components/DelayProfileForm.svelte
+++ b/src/routes/delay-profiles/[databaseId]/components/DelayProfileForm.svelte
@@ -155,7 +155,7 @@
 						name="name"
 						bind:value={name}
 						placeholder="e.g., Standard Delay"
-						class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
+						class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
 					/>
 				</div>
 
@@ -186,11 +186,11 @@
 						type="button"
 						on:click={() => (preferredProtocol = option.value)}
 						class="flex items-center gap-3 rounded-lg border p-3 text-left transition-colors {preferredProtocol === option.value
-							? 'border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-950'
+							? 'border-accent-500 bg-accent-50 dark:border-accent-400 dark:bg-accent-950'
 							: 'border-neutral-200 bg-white hover:border-neutral-300 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600'}"
 					>
 						<div class="flex h-5 w-5 items-center justify-center rounded-full border-2 {preferredProtocol === option.value
-							? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400'
+							? 'border-accent-500 bg-accent-500 dark:border-accent-400 dark:bg-accent-400'
 							: 'border-neutral-300 dark:border-neutral-600'}">
 							{#if preferredProtocol === option.value}
 								<Check size={12} class="text-white" />
@@ -266,7 +266,7 @@
 					<input
 						type="checkbox"
 						bind:checked={bypassIfHighestQuality}
-						class="h-4 w-4 rounded border-neutral-300 text-blue-600 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-700"
+						class="h-4 w-4 rounded border-neutral-300 text-accent-600 focus:ring-accent-500 dark:border-neutral-600 dark:bg-neutral-700"
 					/>
 					<div>
 						<div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Bypass if Highest Quality</div>
@@ -280,7 +280,7 @@
 						<input
 							type="checkbox"
 							bind:checked={bypassIfAboveCfScore}
-							class="h-4 w-4 rounded border-neutral-300 text-blue-600 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-700"
+							class="h-4 w-4 rounded border-neutral-300 text-accent-600 focus:ring-accent-500 dark:border-neutral-600 dark:bg-neutral-700"
 						/>
 						<div>
 							<div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Bypass if Above Custom Format Score</div>
@@ -336,7 +336,7 @@
 					type="button"
 					disabled={saving || !isValid}
 					on:click={handleSaveClick}
-					class="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
+					class="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-accent-500 dark:hover:bg-accent-600"
 				>
 					{#if saving}
 						<Loader2 size={14} class="animate-spin" />
diff --git a/src/routes/delay-profiles/[databaseId]/views/CardView.svelte b/src/routes/delay-profiles/[databaseId]/views/CardView.svelte
index c72db68..7717361 100644
--- a/src/routes/delay-profiles/[databaseId]/views/CardView.svelte
+++ b/src/routes/delay-profiles/[databaseId]/views/CardView.svelte
@@ -55,7 +55,7 @@
 				{#if profile.tags.length > 0}
 					<div class="mt-2 flex flex-wrap gap-1">
 						{#each profile.tags as tag}
-							<span class="inline-flex items-center px-1.5 py-0.5 rounded font-mono text-[10px] bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+							<span class="inline-flex items-center px-1.5 py-0.5 rounded font-mono text-[10px] bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200">
 								{tag.name}
 							</span>
 						{/each}
diff --git a/src/routes/delay-profiles/[databaseId]/views/TableView.svelte b/src/routes/delay-profiles/[databaseId]/views/TableView.svelte
index c8a35fd..3e21731 100644
--- a/src/routes/delay-profiles/[databaseId]/views/TableView.svelte
+++ b/src/routes/delay-profiles/[databaseId]/views/TableView.svelte
@@ -51,7 +51,7 @@
 						${row.tags.length > 0 ? `
 							<div class="mt-1 flex flex-wrap gap-1">
 								${row.tags.map(tag => `
-									<span class="inline-flex items-center px-2 py-0.5 rounded font-mono text-[10px] bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+									<span class="inline-flex items-center px-2 py-0.5 rounded font-mono text-[10px] bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200">
 										${tag.name}
 									</span>
 								`).join('')}
diff --git a/src/routes/quality-profiles/[databaseId]/[id]/languages/+page.svelte b/src/routes/quality-profiles/[databaseId]/[id]/languages/+page.svelte
index 61d130e..ef0bd8b 100644
--- a/src/routes/quality-profiles/[databaseId]/[id]/languages/+page.svelte
+++ b/src/routes/quality-profiles/[databaseId]/[id]/languages/+page.svelte
@@ -148,7 +148,7 @@
 				placeholder="Search for a language..."
 				class="block w-full rounded-lg border px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 transition-colors focus:outline-none focus:ring-1 dark:text-neutral-50 dark:placeholder-neutral-500 {showValidationError
 					? 'border-red-300 bg-red-50 focus:border-red-500 focus:ring-red-500 dark:border-red-700 dark:bg-red-950 dark:focus:border-red-500'
-					: 'border-neutral-300 bg-white focus:border-blue-500 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800'}"
+					: 'border-neutral-300 bg-white focus:border-accent-500 focus:ring-accent-500 dark:border-neutral-700 dark:bg-neutral-800'}"
 			/>
 
 			{#if showValidationError}
@@ -182,7 +182,7 @@
 		<div>
 			<div class="flex items-center gap-2 font-medium text-neutral-900 dark:text-neutral-100">
 				<span>Preferred</span>
-				<span class="inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Radarr Only</span>
+				<span class="inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200">Radarr Only</span>
 			</div>
 			<div class="mt-1">Uses Radarr's built-in language preference setting</div>
 		</div>
diff --git a/src/routes/quality-profiles/[databaseId]/[id]/qualities/+page.svelte b/src/routes/quality-profiles/[databaseId]/[id]/qualities/+page.svelte
index 70ba72c..bff9549 100644
--- a/src/routes/quality-profiles/[databaseId]/[id]/qualities/+page.svelte
+++ b/src/routes/quality-profiles/[databaseId]/[id]/qualities/+page.svelte
@@ -356,7 +356,7 @@
 									<div class="absolute inset-0 rounded-lg border-2 border-dashed border-green-500 bg-green-50/30 dark:border-green-400 dark:bg-green-950/30 pointer-events-none"></div>
 								{/if}
 								{#if hoverTargetIndex === index && willAddToGroup}
-									<div class="absolute inset-0 rounded-lg border-2 border-dashed border-blue-500 bg-blue-50/30 dark:border-blue-400 dark:bg-blue-950/30 pointer-events-none"></div>
+									<div class="absolute inset-0 rounded-lg border-2 border-dashed border-accent-500 bg-accent-50/30 dark:border-accent-400 dark:bg-accent-950/30 pointer-events-none"></div>
 								{/if}
 								<div class="flex items-center justify-between relative">
 									<div class="flex-1">
@@ -370,13 +370,13 @@
 														if (e.key === 'Enter') saveGroupName();
 														if (e.key === 'Escape') cancelEditingGroupName();
 													}}
-													class="max-w-xs rounded border border-blue-500 bg-white px-2 py-1 text-sm font-medium text-neutral-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:text-neutral-100"
+													class="max-w-xs rounded border border-accent-500 bg-white px-2 py-1 text-sm font-medium text-neutral-900 focus:outline-none focus:ring-2 focus:ring-accent-500 dark:bg-neutral-800 dark:text-neutral-100"
 												/>
 											{:else}
 												<div class="font-medium text-neutral-900 dark:text-neutral-100">
 													{#if item.type === 'group'}
 														<span
-															class="cursor-pointer hover:text-blue-600 dark:hover:text-blue-400"
+															class="cursor-pointer hover:text-accent-600 dark:hover:text-accent-400"
 															on:click={(e) => {
 																e.stopPropagation();
 																startEditingGroupName(item, index);
@@ -411,7 +411,7 @@
 												Create Group
 											</div>
 										{:else if hoverTargetIndex === index && willAddToGroup}
-											<div class="text-xs font-medium text-blue-600 dark:text-blue-400">
+											<div class="text-xs font-medium text-accent-600 dark:text-accent-400">
 												Add to Group
 											</div>
 										{/if}
diff --git a/src/routes/quality-profiles/[databaseId]/[id]/scoring/+page.svelte b/src/routes/quality-profiles/[databaseId]/[id]/scoring/+page.svelte
index c04201a..d0a9e1a 100644
--- a/src/routes/quality-profiles/[databaseId]/[id]/scoring/+page.svelte
+++ b/src/routes/quality-profiles/[databaseId]/[id]/scoring/+page.svelte
@@ -699,11 +699,11 @@
 								type="text"
 								bind:value={newProfileName}
 								placeholder="Profile name"
-								class="block w-full rounded border border-neutral-300 bg-white px-2 py-1.5 text-xs text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
+								class="block w-full rounded border border-neutral-300 bg-white px-2 py-1.5 text-xs text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
 							/>
 							<button
 								type="submit"
-								class="w-full rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
+								class="w-full rounded bg-accent-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-accent-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-accent-500 dark:hover:bg-accent-600"
 								disabled={!newProfileName.trim()}
 							>
 								Save Profile
diff --git a/src/routes/quality-profiles/[databaseId]/views/CardView.svelte b/src/routes/quality-profiles/[databaseId]/views/CardView.svelte
index 0e02f45..5df01b5 100644
--- a/src/routes/quality-profiles/[databaseId]/views/CardView.svelte
+++ b/src/routes/quality-profiles/[databaseId]/views/CardView.svelte
@@ -24,7 +24,7 @@
 				{#if profile.tags.length > 0}
 					<div class="mt-2 flex flex-wrap gap-1">
 						{#each profile.tags as tag}
-							<span class="inline-flex items-center px-1.5 py-0.5 rounded font-mono text-[10px] bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+							<span class="inline-flex items-center px-1.5 py-0.5 rounded font-mono text-[10px] bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200">
 								{tag.name}
 							</span>
 						{/each}
@@ -47,7 +47,7 @@
 					{/if}
 					<span class="inline-flex items-center px-1.5 py-0.5 rounded border text-[10px] font-mono text-neutral-900 dark:text-neutral-100
 						{quality.is_upgrade_until
-							? 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950'
+							? 'border-accent-200 bg-accent-50 dark:border-accent-800 dark:bg-accent-950'
 							: 'border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800'}">
 						{quality.name}
 					</span>
diff --git a/src/routes/quality-profiles/[databaseId]/views/TableView.svelte b/src/routes/quality-profiles/[databaseId]/views/TableView.svelte
index 06c9a93..c577a0e 100644
--- a/src/routes/quality-profiles/[databaseId]/views/TableView.svelte
+++ b/src/routes/quality-profiles/[databaseId]/views/TableView.svelte
@@ -29,7 +29,7 @@
 						${row.tags.length > 0 ? `
 							<div class="mt-1 flex flex-wrap gap-1">
 								${row.tags.map(tag => `
-									<span class="inline-flex items-center px-2 py-0.5 rounded font-mono text-[10px] bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+									<span class="inline-flex items-center px-2 py-0.5 rounded font-mono text-[10px] bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200">
 										${tag.name}
 									</span>
 								`).join('')}
@@ -59,7 +59,7 @@
 							${row.qualities.map(q => `
 								<div class="relative px-2 py-0.5 rounded border ${
 									q.is_upgrade_until
-										? 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950'
+										? 'border-accent-200 bg-accent-50 dark:border-accent-800 dark:bg-accent-950'
 										: 'border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800'
 								}">
 									<span class="font-mono text-xs">${q.name}</span>
diff --git a/src/routes/settings/about/+page.svelte b/src/routes/settings/about/+page.svelte
index 52beab7..ba0225b 100644
--- a/src/routes/settings/about/+page.svelte
+++ b/src/routes/settings/about/+page.svelte
@@ -167,7 +167,7 @@
 											</span>
 											{#if migration.latest}
 												<span
-													class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
+													class="rounded-full bg-accent-100 px-2 py-0.5 text-xs font-medium text-accent-800 dark:bg-accent-900/30 dark:text-accent-400"
 												>
 													Latest
 												</span>
@@ -215,13 +215,13 @@
 													target="_blank"
 													rel="noopener noreferrer"
 													data-sveltekit-reload
-													class="font-mono text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+													class="font-mono text-sm font-medium text-accent-600 hover:text-accent-700 dark:text-accent-400 dark:hover:text-accent-300"
 												>
 													{release.tag_name}
 												</a>
 												{#if index === 0}
 													<span
-														class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
+														class="rounded-full bg-accent-100 px-2 py-0.5 text-xs font-medium text-accent-800 dark:bg-accent-900/30 dark:text-accent-400"
 													>
 														Latest
 													</span>
diff --git a/src/routes/settings/about/components/InfoRow.svelte b/src/routes/settings/about/components/InfoRow.svelte
index 8b8b87c..9e05acf 100644
--- a/src/routes/settings/about/components/InfoRow.svelte
+++ b/src/routes/settings/about/components/InfoRow.svelte
@@ -22,7 +22,7 @@
 				target="_blank"
 				rel="noopener noreferrer"
 				data-sveltekit-reload
-				class="rounded bg-neutral-100 px-2 py-1 font-mono text-blue-600 hover:text-blue-700 dark:bg-neutral-800 dark:text-blue-400 dark:hover:text-blue-300"
+				class="rounded bg-neutral-100 px-2 py-1 font-mono text-accent-600 hover:text-accent-700 dark:bg-neutral-800 dark:text-accent-400 dark:hover:text-accent-300"
 			>
 				{value}
 			</a>