feat(sidebar): add distinct scrollbar color for sidebar

The sidebar scrollbar was invisible because it used the same color as
the sidebar background. Add dedicated sidebar scrollbar CSS variables
and class with higher-contrast thumb colors. Update all 11 built-in
themes with appropriate sidebar scrollbar overrides for light variants
(and Solarized dark). Update THEMES.md documentation.

Author: mremond

apps/fluux/src-tauri/tauri.conf.json

@@ -68,7 +68,7 @@
     ],
     "macOS": {
       "minimumSystemVersion": "10.13",
-      "bundleVersion": "b01be90",
+      "bundleVersion": "e6a872b",
       "entitlements": "Entitlements.plist",
       "signingIdentity": null
     },

apps/fluux/src/components/Sidebar.tsx

@@ -400,9 +400,9 @@ export function Sidebar({ onSelectContact, onStartChat, onManageUser, adminCateg
         <div
           ref={sidebarListRef}
           tabIndex={0}
-          className="focus-zone flex-1 min-h-0"
+          className="focus-zone flex-1 min-h-0 p-0.5"
         >
-          <div className="h-full overflow-y-auto py-1 pl-1 pr-1">
+          <div className="sidebar-scroll h-full overflow-y-auto rounded-sm py-0.5 px-0.5">
             <SidebarZoneContext.Provider value={sidebarListRef}>
               <div key={sidebarView} style={{ animation: 'sidebar-view-enter 150ms ease-out' }}>
               {sidebarView === 'messages' ? (

apps/fluux/src/index.css

@@ -151,6 +151,8 @@
   /* Scrollbar */
   --fluux-scrollbar-thumb: var(--fluux-base-05);
   --fluux-scrollbar-thumb-hover: var(--fluux-base-20);
+  --fluux-scrollbar-thumb-sidebar: var(--fluux-base-30);
+  --fluux-scrollbar-thumb-sidebar-hover: var(--fluux-base-50);
 
   /* Focus ring */
   --fluux-focus-ring: hsla(var(--fluux-accent-h), var(--fluux-accent-s), var(--fluux-accent-l), 0.5);
@@ -341,6 +343,15 @@
   background: var(--scrollbar-thumb-hover);
 }
 
+/* Sidebar scrollbar — more visible on dark sidebar background */
+.sidebar-scroll::-webkit-scrollbar-thumb {
+  background: var(--fluux-scrollbar-thumb-sidebar);
+}
+
+.sidebar-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--fluux-scrollbar-thumb-sidebar-hover);
+}
+
 /* Smooth scrolling */
 html {
   scroll-behavior: smooth;

apps/fluux/src/themes/builtins/catppuccin-mocha.ts

@@ -106,6 +106,8 @@ export const catppuccinMochaTheme: ThemeDefinition = {
       '--fluux-selection-bg': 'hsla(267, 83%, 58%, 0.15)',
       '--fluux-scrollbar-thumb': '#bcc0cc',
       '--fluux-scrollbar-thumb-hover': '#acb0be',
+      '--fluux-scrollbar-thumb-sidebar': '#acb0be',
+      '--fluux-scrollbar-thumb-sidebar-hover': '#9ca0ae',
       // Syntax highlighting
       '--syntax-token-keyword': '#8839ef',
       '--syntax-token-string': '#40a02b',

apps/fluux/src/themes/builtins/dracula.ts

@@ -83,6 +83,8 @@ export const draculaTheme: ThemeDefinition = {
       '--fluux-selection-bg': 'hsla(265, 70%, 55%, 0.15)',
       '--fluux-scrollbar-thumb': '#c8c8c2',
       '--fluux-scrollbar-thumb-hover': '#b0b0aa',
+      '--fluux-scrollbar-thumb-sidebar': '#b8b8b2',
+      '--fluux-scrollbar-thumb-sidebar-hover': '#a0a09a',
       '--fluux-text-link': '#a8308c',
       // Syntax highlighting
       '--syntax-token-keyword': '#a8308c',

apps/fluux/src/themes/builtins/github.ts

@@ -88,6 +88,8 @@ export const githubTheme: ThemeDefinition = {
       '--fluux-selection-bg': 'hsla(212, 92%, 45%, 0.15)',
       '--fluux-scrollbar-thumb': '#dae0e7',
       '--fluux-scrollbar-thumb-hover': '#c8ced5',
+      '--fluux-scrollbar-thumb-sidebar': '#c8ced5',
+      '--fluux-scrollbar-thumb-sidebar-hover': '#b0b8c2',
       // Syntax highlighting
       '--syntax-token-keyword': '#cf222e',
       '--syntax-token-string': '#0a3069',

apps/fluux/src/themes/builtins/gruvbox.ts

@@ -84,6 +84,8 @@ export const gruvboxTheme: ThemeDefinition = {
       '--fluux-selection-bg': 'hsla(24, 88%, 35%, 0.15)',
       '--fluux-scrollbar-thumb': '#bdae93',
       '--fluux-scrollbar-thumb-hover': '#a89984',
+      '--fluux-scrollbar-thumb-sidebar': '#a89984',
+      '--fluux-scrollbar-thumb-sidebar-hover': '#928374',
       // Syntax highlighting
       '--syntax-token-keyword': '#9d0006',
       '--syntax-token-string': '#79740e',

apps/fluux/src/themes/builtins/kanagawa.ts

@@ -86,6 +86,8 @@ export const kanagawaTheme: ThemeDefinition = {
       '--fluux-selection-bg': 'hsla(219, 36%, 45%, 0.15)',
       '--fluux-scrollbar-thumb': '#d5cea3',
       '--fluux-scrollbar-thumb-hover': '#c9c297',
+      '--fluux-scrollbar-thumb-sidebar': '#c0b990',
+      '--fluux-scrollbar-thumb-sidebar-hover': '#b0a980',
       '--fluux-text-link': '#cc6d00', // lotusOrange
       // Syntax highlighting
       '--syntax-token-keyword': '#624c83',

apps/fluux/src/themes/builtins/monokai.ts

@@ -84,6 +84,8 @@ export const monokaiTheme: ThemeDefinition = {
       '--fluux-selection-bg': 'hsla(338, 75%, 42%, 0.15)',
       '--fluux-scrollbar-thumb': '#c8c4b8',
       '--fluux-scrollbar-thumb-hover': '#b0aca0',
+      '--fluux-scrollbar-thumb-sidebar': '#b0aca0',
+      '--fluux-scrollbar-thumb-sidebar-hover': '#989488',
       '--fluux-text-link': '#b86e0a',
       // Syntax highlighting
       '--syntax-token-keyword': '#c41854',

apps/fluux/src/themes/builtins/nord.ts

@@ -84,6 +84,8 @@ export const nordTheme: ThemeDefinition = {
       '--fluux-selection-bg': 'hsla(213, 32%, 42%, 0.15)',
       '--fluux-scrollbar-thumb': '#c8d0e0',
       '--fluux-scrollbar-thumb-hover': '#a5b1c7',
+      '--fluux-scrollbar-thumb-sidebar': '#b5bfd2',
+      '--fluux-scrollbar-thumb-sidebar-hover': '#97a4bc',
       // Syntax highlighting
       '--syntax-token-keyword': '#5e81ac',
       '--syntax-token-string': '#7b9e60',