From 82e4eb7b403940deb59c0426689160a405ca0bfb Mon Sep 17 00:00:00 2001
From: "Calum H." <contact@cal.engineer>
Date: Fri, 16 Jan 2026 18:23:43 +0000
Subject: [PATCH] feat: light mode fixes for navtab + files tab (#5134)

---
 apps/frontend/src/components/ui/NavTabs.vue       | 15 +++++++++++----
 .../servers/files/explorer/FileItem.vue           |  6 ++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/components/ui/NavTabs.vue b/apps/frontend/src/components/ui/NavTabs.vue
index a84e186a..019bbb93 100644
--- a/apps/frontend/src/components/ui/NavTabs.vue
+++ b/apps/frontend/src/components/ui/NavTabs.vue
@@ -18,11 +18,18 @@
 					v-if="link.icon"
 					class="size-5"
 					:class="{
-						'text-brand': currentActiveIndex === index && !subpageSelected,
+						'text-button-textSelected': currentActiveIndex === index && !subpageSelected,
 						'text-secondary': currentActiveIndex !== index || subpageSelected,
 					}"
 				/>
-				<span class="text-nowrap text-contrast">{{ link.label }}</span>
+				<span
+					class="text-nowrap"
+					:class="{
+						'text-button-textSelected': currentActiveIndex === index && !subpageSelected,
+						'text-contrast': currentActiveIndex !== index || subpageSelected,
+					}"
+					>{{ link.label }}</span
+				>
 			</NuxtLink>
 		</template>
 		<template v-else>
@@ -39,14 +46,14 @@
 					v-if="link.icon"
 					class="size-5"
 					:class="{
-						'text-brand': currentActiveIndex === index && !subpageSelected,
+						'text-button-textSelected': currentActiveIndex === index && !subpageSelected,
 						'text-secondary': currentActiveIndex !== index || subpageSelected,
 					}"
 				/>
 				<span
 					class="text-nowrap"
 					:class="{
-						'text-brand': currentActiveIndex === index && !subpageSelected,
+						'text-button-textSelected': currentActiveIndex === index && !subpageSelected,
 						'text-contrast': currentActiveIndex !== index || subpageSelected,
 					}"
 					>{{ link.label }}</span
diff --git a/packages/ui/src/components/servers/files/explorer/FileItem.vue b/packages/ui/src/components/servers/files/explorer/FileItem.vue
index 5ee3aa04..671743e6 100644
--- a/packages/ui/src/components/servers/files/explorer/FileItem.vue
+++ b/packages/ui/src/components/servers/files/explorer/FileItem.vue
@@ -341,6 +341,12 @@ function handleDrop(event: DragEvent) {
 
 <style scoped>
 .file-row-alt {
+	background: color-mix(in srgb, var(--surface-2), black 3%);
+}
+
+:global(.dark-mode) .file-row-alt,
+:global(.dark) .file-row-alt,
+:global(.oled-mode) .file-row-alt {
 	background: color-mix(in srgb, var(--surface-2), black 10%);
 }
 </style>