Merge pull request #824 from Light-Heart-Labs/fix/sidebar-theme-compliance

fix(dashboard): replace hardcoded sidebar styles with theme-aware CSS custom properties

Author: Lightheartdevs

dream-server/extensions/services/dashboard/src/components/Sidebar.jsx

@@ -19,8 +19,6 @@ export default function Sidebar({ status, collapsed, onToggle }) {
   const [serviceTokens, setServiceTokens] = useState({})
   const [apiLinks, setApiLinks] = useState([])
   const [showAllQuickLinks, setShowAllQuickLinks] = useState(false)
-  const dreamSidebarAccent = '#8a2cff'
-  const dreamSidebarAccentSoft = '#b56dff'
 
   useEffect(() => {
     fetch('/api/service-tokens')
@@ -90,28 +88,25 @@ export default function Sidebar({ status, collapsed, onToggle }) {
     <aside
       className={`fixed left-0 top-0 h-screen ${collapsed ? 'w-20' : 'w-64'} flex flex-col transition-all duration-200`}
       style={{
-        background: `
-          radial-gradient(circle at top left, rgba(138,44,255,0.2), transparent 28%),
-          linear-gradient(180deg, #1a1722 0%, #17131f 58%, #110f17 100%)
-        `,
-        borderRight: '1px solid rgba(138,44,255,0.16)',
+        background: `var(--sidebar-bg-glow), var(--sidebar-bg)`,
+        borderRight: '1px solid var(--sidebar-border)',
         boxShadow: 'inset -1px 0 0 rgba(255,255,255,0.04)',
       }}
     >
       {/* Logo */}
-      <div className="px-4 pt-6 pb-5 border-b overflow-hidden" style={{ borderColor: 'rgba(138,44,255,0.14)' }}>
+      <div className="px-4 pt-6 pb-5 border-b overflow-hidden" style={{ borderColor: 'var(--sidebar-border)' }}>
         {collapsed ? (
           <div className="flex flex-col items-center">
             <div
               className="flex h-11 w-11 items-center justify-center rounded-xl border"
               style={{
-                background: 'linear-gradient(180deg, rgba(138,44,255,0.18), rgba(138,44,255,0.06))',
-                borderColor: 'rgba(181,109,255,0.24)',
+                background: `linear-gradient(180deg, color-mix(in srgb, var(--sidebar-accent) 18%, transparent), color-mix(in srgb, var(--sidebar-accent) 6%, transparent))`,
+                borderColor: `color-mix(in srgb, var(--sidebar-accent-soft) 24%, transparent)`,
               }}
             >
-              <span className="text-lg font-black tracking-tight" style={{ color: dreamSidebarAccentSoft }}>DS</span>
+              <span className="text-lg font-black tracking-tight" style={{ color: 'var(--sidebar-accent-soft)' }}>DS</span>
             </div>
-            <p className="text-[8px] font-mono mt-2 tracking-[0.18em] uppercase" style={{ color: 'rgba(226,223,255,0.62)' }}>
+            <p className="text-[8px] font-mono mt-2 tracking-[0.18em] uppercase" style={{ color: 'var(--sidebar-text-muted)' }}>
               v{status?.version || '...'}
             </p>
           </div>
@@ -130,10 +125,10 @@ export default function Sidebar({ status, collapsed, onToggle }) {
    \\__ \\ / _ \\ / ___/| | / // _ \\ / ___/
   ___/ //  __// /    | |/ //  __// /
  /____/ \\___//_/     |___/ \\___//_/`}</pre>
-            <p className="text-[8px] font-mono tracking-[0.28em] mt-2.5 uppercase" style={{ color: dreamSidebarAccentSoft }}>
+            <p className="text-[8px] font-mono tracking-[0.28em] mt-2.5 uppercase" style={{ color: 'var(--sidebar-accent-soft)' }}>
               LOCAL AI // SOVEREIGN INTELLIGENCE
             </p>
-            <p className="text-[10px] mt-1" style={{ color: 'rgba(226,223,255,0.72)' }}>
+            <p className="text-[10px] mt-1" style={{ color: 'var(--sidebar-text-secondary)' }}>
               {status?.tier || 'Minimal'} • v{status?.version || '...'}
             </p>
           </>
@@ -157,8 +152,8 @@ export default function Sidebar({ status, collapsed, onToggle }) {
                 }
                 style={({ isActive }) => isActive
                   ? {
-                    border: '1px solid rgba(181,109,255,0.2)',
-                    boxShadow: '0 12px 28px rgba(126,34,206,0.24)',
+                    border: '1px solid var(--sidebar-active-border)',
+                    boxShadow: 'var(--sidebar-active-shadow)',
                   }
                   : {
                     background: 'transparent',
@@ -174,17 +169,17 @@ export default function Sidebar({ status, collapsed, onToggle }) {
 
         {/* External Links — hidden when collapsed */}
         {!collapsed && (
-          <div className="mt-4 pt-4 border-t" style={{ borderColor: 'rgba(181,109,255,0.14)' }}>
+          <div className="mt-4 pt-4 border-t" style={{ borderColor: 'var(--sidebar-border)' }}>
             <div className="mb-2 flex items-center justify-between px-3">
-              <p className="text-[10px] font-semibold uppercase tracking-[0.24em]" style={{ color: dreamSidebarAccentSoft }}>
+              <p className="text-[10px] font-semibold uppercase tracking-[0.24em]" style={{ color: 'var(--sidebar-accent-soft)' }}>
                 Quick Links
               </p>
               {externalLinks.length > 0 && (
                 <button
                   type="button"
                   onClick={() => setShowAllQuickLinks(current => !current)}
                   className="text-[9px] font-mono uppercase tracking-[0.18em] transition-colors hover:text-theme-text"
-                  style={{ color: dreamSidebarAccentSoft }}
+                  style={{ color: 'var(--sidebar-accent-soft)' }}
                 >
                   {showAllQuickLinks ? 'Show open' : 'View all'}
                 </button>
@@ -203,15 +198,15 @@ export default function Sidebar({ status, collapsed, onToggle }) {
                         ? 'hover:bg-white/[0.03]'
                         : 'text-theme-text-muted/40 cursor-not-allowed'
                     }`}
-                    style={healthy ? { color: 'rgba(238,236,255,0.82)' } : undefined}
+                    style={healthy ? { color: 'var(--sidebar-text)' } : undefined}
                   >
-                    <span className="mt-0.5" style={{ color: healthy ? dreamSidebarAccentSoft : 'rgba(161,161,170,0.3)' }}>
+                    <span className="mt-0.5" style={{ color: healthy ? 'var(--sidebar-accent-soft)' : 'var(--sidebar-inactive)' }}>
                       <Icon size={15} />
                     </span>
                     <span className="text-[12px] leading-4">{label}</span>
                     <span
                       className="ml-auto text-[9px] font-mono uppercase tracking-[0.18em]"
-                      style={{ color: healthy ? dreamSidebarAccentSoft : 'rgba(161,161,170,0.3)' }}
+                      style={{ color: healthy ? 'var(--sidebar-accent-soft)' : 'var(--sidebar-inactive)' }}
                     >
                       {healthy ? 'OPEN' : '—'}
                     </span>
@@ -229,25 +224,25 @@ export default function Sidebar({ status, collapsed, onToggle }) {
           onClick={cycleTheme}
           className="flex items-center justify-center p-2 rounded-lg text-theme-text-muted hover:text-theme-text transition-colors"
           title={`Theme: ${labels[theme]} (click to cycle)`}
-          style={{ background: 'rgba(255,255,255,0.02)' }}
+          style={{ background: 'var(--sidebar-hover-bg)' }}
         >
           <Palette size={18} />
         </button>
         {!collapsed && (
-          <span className="text-xs" style={{ color: 'rgba(220,204,255,0.72)' }}>{labels[theme]}</span>
+          <span className="text-xs" style={{ color: 'var(--sidebar-label)' }}>{labels[theme]}</span>
         )}
         <button
           onClick={onToggle}
           className={`${collapsed ? '' : 'ml-auto'} flex items-center justify-center p-2 rounded-lg text-theme-text-muted hover:text-theme-text transition-colors`}
           title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-          style={{ background: 'rgba(255,255,255,0.02)' }}
+          style={{ background: 'var(--sidebar-hover-bg)' }}
         >
           {collapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
         </button>
       </div>
 
       {/* Status Footer */}
-      <div className="p-4 border-t" style={{ borderColor: 'rgba(138,44,255,0.16)' }}>
+      <div className="p-4 border-t" style={{ borderColor: 'var(--sidebar-border)' }}>
         {!collapsed && (
           <div className="flex items-center justify-between text-sm mb-2">
             <span className="text-theme-text-muted">Services</span>

dream-server/extensions/services/dashboard/src/index.css

@@ -50,6 +50,19 @@
   --liquid-button-fill: linear-gradient(135deg, rgba(157, 0, 255, 0.98), rgba(120, 24, 216, 0.96));
   --liquid-nav-fill: linear-gradient(135deg, rgba(157, 0, 255, 0.96), rgba(120, 24, 216, 0.94));
   --liquid-progress-track: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
+  --sidebar-bg: linear-gradient(180deg, #1a1722 0%, #17131f 58%, #110f17 100%);
+  --sidebar-bg-glow: radial-gradient(circle at top left, rgba(157,0,255,0.2), transparent 28%);
+  --sidebar-border: rgba(157,0,255,0.16);
+  --sidebar-accent: #8a2cff;
+  --sidebar-accent-soft: #b56dff;
+  --sidebar-text: rgba(226,223,255,0.82);
+  --sidebar-text-muted: rgba(226,223,255,0.62);
+  --sidebar-text-secondary: rgba(226,223,255,0.72);
+  --sidebar-label: rgba(220,204,255,0.72);
+  --sidebar-active-border: rgba(181,109,255,0.2);
+  --sidebar-active-shadow: 0 12px 28px rgba(126,34,206,0.24);
+  --sidebar-hover-bg: rgba(255,255,255,0.02);
+  --sidebar-inactive: rgba(161,161,170,0.3);
 }
 
 /* Lemonade — warm parchment theme matching lemonade-server.ai branding */
@@ -95,6 +108,19 @@
   --liquid-button-fill: linear-gradient(135deg, rgba(245,197,24,0.92), rgba(226,178,15,0.9));
   --liquid-nav-fill: linear-gradient(135deg, rgba(245,197,24,0.92), rgba(226,178,15,0.88));
   --liquid-progress-track: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.04));
+  --sidebar-bg: linear-gradient(180deg, #EFE4C6 0%, #E8DCBA 58%, #E2D5B0 100%);
+  --sidebar-bg-glow: radial-gradient(circle at top left, rgba(245,197,24,0.15), transparent 28%);
+  --sidebar-border: rgba(196,176,120,0.3);
+  --sidebar-accent: #D4A810;
+  --sidebar-accent-soft: #B8920D;
+  --sidebar-text: #3D3626;
+  --sidebar-text-muted: #8A8478;
+  --sidebar-text-secondary: #6B665C;
+  --sidebar-label: #8A8478;
+  --sidebar-active-border: rgba(245,197,24,0.3);
+  --sidebar-active-shadow: 0 12px 28px rgba(180,140,10,0.12);
+  --sidebar-hover-bg: rgba(0,0,0,0.03);
+  --sidebar-inactive: rgba(138,132,120,0.4);
 }
 
 /* Light — clean modern futuristic light theme */
@@ -139,6 +165,19 @@
   --liquid-button-fill: linear-gradient(135deg, rgba(37,99,235,0.94), rgba(29,78,216,0.9));
   --liquid-nav-fill: linear-gradient(135deg, rgba(37,99,235,0.94), rgba(29,78,216,0.88));
   --liquid-progress-track: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.04));
+  --sidebar-bg: linear-gradient(180deg, #EAEAEC 0%, #E4E4E7 58%, #DDDDE0 100%);
+  --sidebar-bg-glow: radial-gradient(circle at top left, rgba(37,99,235,0.1), transparent 28%);
+  --sidebar-border: rgba(161,161,170,0.3);
+  --sidebar-accent: #2563EB;
+  --sidebar-accent-soft: #3B82F6;
+  --sidebar-text: #27272A;
+  --sidebar-text-muted: #A1A1AA;
+  --sidebar-text-secondary: #52525B;
+  --sidebar-label: #A1A1AA;
+  --sidebar-active-border: rgba(37,99,235,0.25);
+  --sidebar-active-shadow: 0 12px 28px rgba(37,99,235,0.12);
+  --sidebar-hover-bg: rgba(0,0,0,0.03);
+  --sidebar-inactive: rgba(161,161,170,0.4);
 }
 
 /* Arctic — cool light theme with ice blue accents */
@@ -183,6 +222,19 @@
   --liquid-button-fill: linear-gradient(135deg, rgba(14,165,233,0.94), rgba(2,132,199,0.9));
   --liquid-nav-fill: linear-gradient(135deg, rgba(14,165,233,0.94), rgba(2,132,199,0.88));
   --liquid-progress-track: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.04));
+  --sidebar-bg: linear-gradient(180deg, #E4EEF8 0%, #DCE8F4 58%, #D4E2F0 100%);
+  --sidebar-bg-glow: radial-gradient(circle at top left, rgba(14,165,233,0.12), transparent 28%);
+  --sidebar-border: rgba(168,200,232,0.4);
+  --sidebar-accent: #0EA5E9;
+  --sidebar-accent-soft: #38BDF8;
+  --sidebar-text: #1A2332;
+  --sidebar-text-muted: #8AA0B8;
+  --sidebar-text-secondary: #4A6178;
+  --sidebar-label: #8AA0B8;
+  --sidebar-active-border: rgba(14,165,233,0.25);
+  --sidebar-active-shadow: 0 12px 28px rgba(14,165,233,0.12);
+  --sidebar-hover-bg: rgba(0,0,0,0.03);
+  --sidebar-inactive: rgba(138,160,184,0.4);
 }
 
 /* ── Card styling (shadow + radius from theme) ──────────── */