From 62169427b97c7038f66c19cb88610fb0523a8a80 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 28 Oct 2026 10:58:02 +0100
Subject: [PATCH] fix: tint the sidebar's folder icons from theme tokens
 instead of fixed hues

---
 components/layout/sidebar.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 0e6bf3892..e320c46e2 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -190,18 +190,20 @@ const getIconForMailbox = (role?: string, hasChildren?: boolean, isExpanded?: bo
   return Folder;
 };
 
+// Role tints from the theme's tokens (R11), so a theme recolours them and
+// dark mode has its own values: the chart palette for the main roles.
 const ROLE_ICON_COLOR: Record<string, string> = {
-  inbox: "text-blue-600/80 dark:text-blue-400/80",
-  sent: "text-emerald-600/80 dark:text-emerald-400/80",
-  drafts: "text-violet-600/80 dark:text-violet-400/80",
+  inbox: "text-chart-1/80",
+  sent: "text-chart-2/80",
+  drafts: "text-chart-5/80",
   trash: "text-muted-foreground",
-  junk: "text-red-600/80 dark:text-red-400/80",
-  archive: "text-amber-600/80 dark:text-amber-400/80",
-  shared: "text-cyan-600/80 dark:text-cyan-400/80",
-  important: "text-orange-600/80 dark:text-orange-400/80",
-  memos: "text-yellow-600/80 dark:text-yellow-400/80",
-  scheduled: "text-sky-600/80 dark:text-sky-400/80",
-  snoozed: "text-slate-500/80 dark:text-slate-400/80",
+  junk: "text-chart-4/80",
+  archive: "text-chart-3/80",
+  shared: "text-info/80",
+  important: "text-warning/80",
+  memos: "text-warning/80",
+  scheduled: "text-info/80",
+  snoozed: "text-muted-foreground",
 };
 
 function getIconClass(isSelected: boolean, isVirtual: boolean, colorful: boolean, roleKey?: string) {
@@ -1248,7 +1250,7 @@ function SidebarImpl({
     return (
       <SidebarRow
         key={key}
-        icon={<CalendarClock className={cn("w-4 h-4 flex-shrink-0", mvShell ? "text-foreground/80" : "text-sky-600 dark:text-sky-400")} />}
+        icon={<CalendarClock className={cn("w-4 h-4 flex-shrink-0", mvShell ? "text-foreground/80" : ROLE_ICON_COLOR.scheduled)} />}
         label={t('scheduled')}
         depth={account?.depth ?? 0}
         isSelected={!selectedKeyword && isScheduledSelected}