From 11ea7dcb3bea0c3acf8209821ad04e293dc8eb9c Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Sun, 26 Apr 2026 01:55:17 -0400
Subject: [PATCH] feat(client): add a sidebar-specific accent colour for dark
 mode

The sidebar selected-icon colour was sharing primary.main, which read too dark in dark mode. Introduce palette.sidebar.accent (brand green in light mode, a lighter green in dark mode) and route NavItem through it so primary stays brand-green for buttons and the rest of the UI.
---
 client/src/Components/sidebar/NavItem.tsx | 6 ++++--
 client/src/Utils/Theme/Palette.ts         | 7 +++++++
 client/src/Utils/Theme/Theme.ts           | 6 ++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/Components/sidebar/NavItem.tsx b/client/src/Components/sidebar/NavItem.tsx
index 756b10d60..24f2c5778 100644
--- a/client/src/Components/sidebar/NavItem.tsx
+++ b/client/src/Components/sidebar/NavItem.tsx
@@ -22,7 +22,9 @@ export const NavItem = ({
 }) => {
 	const { collapsed } = useSidebar();
 	const theme = useTheme();
-	const iconStroke = selected ? theme.palette.primary.main : theme.palette.text.secondary;
+	const iconStroke = selected
+		? theme.palette.sidebar.accent
+		: theme.palette.text.secondary;
 
 	const buttonBgColor = selected ? theme.palette.action.selected : "transparent";
 	const buttonBgHoverColor = selected
@@ -79,7 +81,7 @@ export const NavItem = ({
 						},
 						".MuiListItemButton-root:hover &": {
 							"& svg path, & svg line, & svg polyline, & svg rect, & svg circle": {
-								stroke: theme.palette.primary.main,
+								stroke: theme.palette.sidebar.accent,
 							},
 						},
 					}}
diff --git a/client/src/Utils/Theme/Palette.ts b/client/src/Utils/Theme/Palette.ts
index 93b09e4e9..0fe08583a 100644
--- a/client/src/Utils/Theme/Palette.ts
+++ b/client/src/Utils/Theme/Palette.ts
@@ -15,6 +15,7 @@ export const colors = {
 	gray900: "#151518",
 	gray850: "#1c1c21",
 	brandGreen: "#13715B",
+	brandGreenLight: "#4DAF94",
 };
 
 export const lightPalette = {
@@ -24,6 +25,9 @@ export const lightPalette = {
 	secondary: {
 		main: colors.gray200,
 	},
+	sidebar: {
+		accent: colors.brandGreen,
+	},
 };
 
 export const darkPalette = {
@@ -37,4 +41,7 @@ export const darkPalette = {
 		default: colors.gray900,
 		paper: colors.gray850,
 	},
+	sidebar: {
+		accent: colors.brandGreenLight,
+	},
 };
diff --git a/client/src/Utils/Theme/Theme.ts b/client/src/Utils/Theme/Theme.ts
index f48ab1686..19f864c6f 100644
--- a/client/src/Utils/Theme/Theme.ts
+++ b/client/src/Utils/Theme/Theme.ts
@@ -13,6 +13,12 @@ declare module "@mui/material/styles" {
 		eyebrow?: React.CSSProperties;
 		fontFamilyMonospace?: string;
 	}
+	interface Palette {
+		sidebar: { accent: string };
+	}
+	interface PaletteOptions {
+		sidebar?: { accent: string };
+	}
 }
 
 declare module "@mui/material/Typography" {