feat: dark mode color contrast change

src/app.scss

@@ -103,9 +103,9 @@
 		hsla(0, 0%, 95%, 1) 100%
 	);
 	--bg-panel: hsl(0, 0%, 100%);
-	--bg-panel-accented: hsl(0, 0%, 92%);
+	--bg-panel-highlight: hsl(0, 0%, 92%);
 	--bg-separator: hsl(0, 0%, 88%);
-	--bg-button: var(--bg-panel-accented);
+	--bg-button: var(--bg-panel-highlight);
 	--bg-badge: var(--accent-pink);
 	--bg-input: #e0e0e0;
 
@@ -127,13 +127,13 @@
 
 	// foregrounds
 	--fg: hsl(0, 0%, 100%);
-	--fg-muted: hsla(0, 0%, 100%, 0.6);
+	--fg-muted: hsla(0, 0%, 100%, 0.65);
 	--fg-on-accent: hsl(0, 0%, 0%);
 	--fg-on-badge: hsl(0, 0%, 0%);
 	--fg-accent: var(--accent);
 
 	// backgrounds
-	--bg: hsl(220, 5%, 12%);
+	--bg: hsl(220, 5%, 15%);
 	--bg-gradient: linear-gradient(
 		to bottom,
 		hsla(303, 100%, 50%, 0.1),
@@ -184,10 +184,10 @@
 		hsla(220, 5%, 12%, 0.5),
 		hsla(220, 5%, 12%, 1) 100%
 	);
-	--bg-panel: hsl(220, 4%, 18%);
-	--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent);
+	--bg-panel: hsl(220, 4%, 24%);
+	--bg-panel-highlight: hsl(220, 2%, 32%);
 	--bg-separator: hsl(220, 4%, 28%);
-	--bg-button: hsl(220, 6%, 28%);
+	--bg-button: hsl(220, 6%, 34%);
 	--bg-badge: var(--accent-pink);
 
 	--shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15);

src/lib/components/functional/Navbar.svelte

@@ -44,7 +44,7 @@
 		class={clsx(
 			"w-16 md:w-32 h-full relative z-10 rounded-xl flex items-center justify-center gap-3 overflow-hidden",
 			{
-				"bg-panel-accented":
+				"bg-panel-highlight":
 					item.activeMatch(page.url.pathname) && !browser,
 			},
 		)}
@@ -105,7 +105,7 @@
 	<Panel class="max-w-[778px] w-full h-20 flex items-center gap-3 relative">
 		{#if linkRects[selectedIndex]}
 			<div
-				class="absolute bg-panel-accented rounded-xl"
+				class="absolute bg-panel-highlight rounded-xl"
 				style="width: {linkRects[selectedIndex]
 					.width}px; height: {linkRects[selectedIndex]
 					.height}px; top: {linkRects[selectedIndex].top -

tailwind.config.ts

@@ -7,7 +7,7 @@ export default {
 		extend: {
 			backgroundColor: {
 				panel: "var(--bg-panel)",
-				"panel-accented": "var(--bg-panel-accented)",
+				"panel-highlight": "var(--bg-panel-highlight)",
 				separator: "var(--bg-separator)",
 				button: "var(--bg-button)",
 				"panel-alt": "var(--bg-button)",