u

src/colors.js

@@ -270,8 +270,8 @@ export const ASK_PROMPT_BORDER_PAIR = { light: BLUE_PANEL, dark: BLUE_BORDER };
 /** Deep petrol — the app's structural dark. */
 export const NAV_SURFACE = mix(DARK_6, CHROMA.PETROL.dark, 0.3);
 
-/** Horizontal sheen across the sidebar. */
+/** Horizontal sheen across the sidebar — kept very soft, no hard banding. */
-export const NAV_BACKGROUND = `linear-gradient(90deg, ${mix(NAV_SURFACE, DARK_6, 0.4)} 0%, ${mix(NAV_SURFACE, WHITE, 0.06)} 25%, ${NAV_SURFACE} 60%, ${mix(NAV_SURFACE, DARK_6, 0.3)} 100%)`;
+export const NAV_BACKGROUND = `linear-gradient(90deg, ${mix(NAV_SURFACE, DARK_6, 0.16)} 0%, ${mix(NAV_SURFACE, WHITE, 0.04)} 25%, ${NAV_SURFACE} 60%, ${mix(NAV_SURFACE, DARK_6, 0.12)} 100%)`;
 
 export const NAV_ITEM = mix(WHITE, CHROMA.PETROL.dark, 0.45);
 export const NAV_ITEM_HOVER = mix(DARK_5, CHROMA.PETROL.dark, 0.3);
@@ -282,6 +282,14 @@ export const NAV_ITEM_ACTIVE_TEXT = mix(CHROMA.PETROL.light, WHITE, 0.15);
 /** Accent for active items and live draft badges. */
 export const NAV_ITEM_ACTIVE_ACCENT = CHROMA.PETROL.light;
 
+/**
+ * Sub-navigation (2nd level) sits on the light app background, not on the
+ * dark sidebar — so its active surface only needs a mid dip to let the light
+ * accent read. Well short of the fully deep `NAV_ITEM_ACTIVE`.
+ */
+export const NAV_SUB_ACTIVE = mix(MAIN_BACKGROUND, NAV_ITEM_ACTIVE, 0.55);
+export const NAV_SUB_ACTIVE_HOVER = mix(MAIN_BACKGROUND, NAV_ITEM_ACTIVE, 0.55);
+
 /* ────────────────────────────────────────────────────────────────────────────
  * 9. CHAT / AI ASSISTANT
  * -------------------------------------------------------------------------*/

src/components/AppShell.jsx

@@ -14,6 +14,9 @@ import { artikelQueryPath } from './article/artikelQuery';
 import { defaultCategoryPath } from './category/categoryRoute';
 import { navigationAutomat } from '../automats';
 import {
+  NAV_ITEM_ACTIVE_ACCENT,
+  NAV_SUB_ACTIVE,
+  NAV_SUB_ACTIVE_HOVER,
   NAV_SURFACE,
 } from '../colors';
 import { ChatFab, ChatDrawer } from './chat';
@@ -195,12 +198,16 @@ class AppSubNav extends PureComponent {
                 justifyContent: 'center',
                 gap: 0.5,
                 color: active
-                  ? theme.palette.primary.main
+                  ? theme.nav?.itemActiveAccent || NAV_ITEM_ACTIVE_ACCENT
                   : theme.palette.text.secondary,
-                bgcolor: active ? theme.palette.action.selected : 'transparent',
+                bgcolor: active ? theme.nav?.subActive || NAV_SUB_ACTIVE : 'transparent',
                 '&:hover': {
-                  bgcolor: theme.palette.action.hover,
+                  bgcolor: active
-                  color: theme.palette.primary.main,
+                    ? theme.nav?.subActiveHover || NAV_SUB_ACTIVE_HOVER
+                    : theme.palette.action.hover,
+                  color: active
+                    ? theme.nav?.itemActiveAccent || NAV_ITEM_ACTIVE_ACCENT
+                    : theme.palette.primary.main,
                 },
               })}
             >

src/theme/themes/default.js

@@ -5,12 +5,14 @@ import {
   NAV_ITEM,
   NAV_ITEM_ACTIVE,
   NAV_ITEM_ACTIVE_ACCENT,
-  NAV_ITEM_ACTIVE_TEXT,
   NAV_ITEM_HOVER,
   NAV_ITEM_HOVER_TEXT,
+  NAV_SUB_ACTIVE,
+  NAV_SUB_ACTIVE_HOVER,
   NAV_SURFACE,
   PRIMARY,
   WHITE,
+NAV_ITEM_ACTIVE_TEXT,
 } from '../../colors';
 
 const nav = {
@@ -21,8 +23,11 @@ const nav = {
   itemHover: NAV_ITEM_HOVER,
   itemHoverText: NAV_ITEM_HOVER_TEXT,
   itemActive: NAV_ITEM_ACTIVE,
+  itemActiveHover: NAV_ITEM_ACTIVE,
   itemActiveText: NAV_ITEM_ACTIVE_TEXT,
   itemActiveAccent: NAV_ITEM_ACTIVE_ACCENT,
+  subActive: NAV_SUB_ACTIVE,
+  subActiveHover: NAV_SUB_ACTIVE_HOVER,
 };
 
 export const defaultThemeId = 'default';