From 155aef9778a01d50982ad1fcaf9c0c5b70068be8 Mon Sep 17 00:00:00 2001
From: matteoscrugli <ma.scrugli@gmail.com>
Date: Tue, 13 Jan 2026 01:48:24 +0100
Subject: [PATCH] Customize monochrome palette accent and sidebar colors

- Light mode: accent color linked to sidebar (#212121)
- Dark mode: sidebar uses very dark color (#0a0a0a)
- Add CSS override for solid monochrome sidebar background

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/contexts/ThemeContext.tsx | 42 +++++++++++++++++---------
 frontend/src/styles/Sidebar.css        |  6 ++++
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/frontend/src/contexts/ThemeContext.tsx b/frontend/src/contexts/ThemeContext.tsx
index 94ed964..53fd44e 100644
--- a/frontend/src/contexts/ThemeContext.tsx
+++ b/frontend/src/contexts/ThemeContext.tsx
@@ -225,7 +225,7 @@ export const COLOR_PALETTES: Record<ColorPalette, PaletteColors> = {
       textPrimary: '#0a0a0a',
       textSecondary: '#737373',
       border: '#e5e5e5',
-      sidebarBg: '#1a1a1a',
+      sidebarBg: '#212121',
       sidebarText: '#fafafa',
     },
     dark: {
@@ -501,17 +501,27 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     const root = document.documentElement;
-    const colors = ACCENT_COLORS[accentColor];
-    // For 'auto' accent, use dark colors in dark mode
-    const main = (theme === 'dark' && colors.darkMain) ? colors.darkMain : colors.main;
-    const hover = (theme === 'dark' && colors.darkHover) ? colors.darkHover : colors.hover;
+    let main: string;
+    let hover: string;
+
+    // Monochrome palette uses the dark sidebar color as accent in light mode only
+    if (colorPalette === 'monochrome' && theme === 'light') {
+      main = '#212121';
+      hover = '#2f2f2f';
+    } else {
+      const colors = ACCENT_COLORS[accentColor];
+      // For 'auto' accent, use dark colors in dark mode
+      main = (theme === 'dark' && colors.darkMain) ? colors.darkMain : colors.main;
+      hover = (theme === 'dark' && colors.darkHover) ? colors.darkHover : colors.hover;
+    }
+
     root.style.setProperty('--color-accent', main);
     root.style.setProperty('--color-accent-hover', hover);
     const rgb = hexToRgbString(main);
     if (rgb) {
       root.style.setProperty('--color-accent-rgb', rgb);
     }
-  }, [accentColor, theme]);
+  }, [accentColor, theme, colorPalette]);
 
   useEffect(() => {
     const root = document.documentElement;
@@ -562,6 +572,9 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     const palette = COLOR_PALETTES[colorPalette];
     const baseColors = theme === 'dark' ? palette.dark : palette.light;
 
+    // Set data-palette attribute for CSS overrides
+    root.dataset.palette = colorPalette;
+
     // Apply overrides if they exist for the current theme mode
     const overrides = theme === 'dark' ? customColors.dark : customColors.light;
     const appColors = { ...baseColors, ...overrides };
@@ -576,7 +589,14 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     // Determine sidebar colors based on sidebarStyle
     let sidebarBg, sidebarText, sidebarBorder;
 
-    if (sidebarStyle === 'light') {
+    // Monochrome palette always uses dark sidebar regardless of sidebarStyle or custom overrides
+    if (colorPalette === 'monochrome') {
+      // Use palette colors directly, ignoring any custom overrides for sidebar
+      const monochromeColors = theme === 'dark' ? palette.dark : palette.light;
+      sidebarBg = monochromeColors.sidebarBg;
+      sidebarText = monochromeColors.sidebarText;
+      sidebarBorder = theme === 'dark' ? 'rgba(255, 255, 255, 0.12)' : 'rgba(255, 255, 255, 0.05)';
+    } else if (sidebarStyle === 'light') {
       // Always Light: Use light palette colors (bgCard for slight contrast vs bgMain if main is white)
       // Check for light mode overrides
       const lightOverrides = customColors.light || {};
@@ -591,13 +611,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
       // This respects the user's preference for the default dark sidebar in light mode
       sidebarBg = appColors.sidebarBg;
       sidebarText = appColors.sidebarText;
-
-      // Increase visibility for monochrome dark
-      if (colorPalette === 'monochrome' && theme === 'dark') {
-        sidebarBorder = 'rgba(255, 255, 255, 0.12)';
-      } else {
-        sidebarBorder = 'rgba(255, 255, 255, 0.05)';
-      }
+      sidebarBorder = 'rgba(255, 255, 255, 0.05)';
     }
 
     root.style.setProperty('--color-bg-sidebar', sidebarBg);
diff --git a/frontend/src/styles/Sidebar.css b/frontend/src/styles/Sidebar.css
index df93829..013f965 100644
--- a/frontend/src/styles/Sidebar.css
+++ b/frontend/src/styles/Sidebar.css
@@ -36,6 +36,12 @@
   .sidebar.open {
     backdrop-filter: blur(24px) saturate(1.2);
   }
+
+  /* Monochrome palette uses solid dark sidebar, no transparency */
+  [data-palette='monochrome'] .sidebar {
+    background: var(--color-bg-sidebar);
+    backdrop-filter: none;
+  }
 }
 
 .sidebar.clickable {