From d2c7faa0f593f5234bb9ff6d71248c0813fdabd6 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 9 Mar 2026 17:45:57 +0200
Subject: [PATCH] Add different color for sidebar/header

---
 app/components/SideNav.module.css      | 2 +-
 app/components/layout/index.module.css | 2 +-
 app/styles/vars.css                    | 5 +++++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/components/SideNav.module.css b/app/components/SideNav.module.css
index d465206a8..4068a63ac 100644
--- a/app/components/SideNav.module.css
+++ b/app/components/SideNav.module.css
@@ -1,5 +1,5 @@
 .sideNav {
-	background-color: var(--color-bg);
+	background-color: var(--color-bg-nav);
 	min-width: var(--layout-sidenav-width);
 	max-width: var(--layout-sidenav-width);
 	border-right: 1.5px solid var(--color-border);
diff --git a/app/components/layout/index.module.css b/app/components/layout/index.module.css
index 8e3e8a61a..918973025 100644
--- a/app/components/layout/index.module.css
+++ b/app/components/layout/index.module.css
@@ -10,7 +10,7 @@
 	align-items: center;
 	gap: var(--s-2);
 	border-bottom: 1.5px solid var(--color-border);
-	background-color: var(--color-bg);
+	background-color: var(--color-bg-nav);
 	font-weight: var(--weight-extra);
 	padding-inline: var(--s-4);
 	position: sticky;
diff --git a/app/styles/vars.css b/app/styles/vars.css
index 191e05f61..2ef43da39 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -190,6 +190,11 @@ html {
 	--color-bg: var(--color-base-7);
 	--color-bg-high: var(--color-base-6);
 	--color-bg-higher: var(--color-base-5);
+	--color-bg-nav: color-mix(
+		in oklch,
+		var(--color-bg) 75%,
+		var(--color-bg-high) 25%
+	);
 	--color-bg-ability: oklch(11.736% 0.00867 215.976);
 	--color-bg-badge: oklch(0% 0 0);