feat: default dark mode theme tweaks

2026-06-23 20:55:41 +00:00 · 2025-12-29 05:46:31 +05:30
parent f5ed96ad16
commit 6aa5e44b11
33 changed files with 553 additions and 661 deletions
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -116,7 +116,7 @@ const StyledWrapper = styled.div`
    span.cm-atom {
      color: ${(props) => props.theme.codemirror.tokens.atom} !important;
    }
-    span.cm-variable {
+    span.cm-variable, span.cm-variable-2 {
      color: ${(props) => props.theme.codemirror.tokens.variable} !important;
    }
    span.cm-keyword {
--- a/packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';

 const StyledWrapper = styled.div`
  .bruno-search-bar {
@@ -9,15 +10,15 @@ const StyledWrapper = styled.div`
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
-    padding: 0 2px;
-    min-height: 36px;
-    background: ${(props) => props.theme.sidebar.search.bg} !important;
-    border-radius: 4px;
-    border: 1px solid ${(props) => props.theme.sidebar.search.bg} !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    gap: 0;
+    padding: 1px 3px;
    width: auto;
-    min-width: 180px;
    max-width: 320px;
+    min-height: 22px;
+    background: ${(props) => props.theme.background.base};
+    color: ${(props) => props.theme.text.base};
+    border: solid 1px ${(props) => props.theme.border.border2};
+    border-radius: ${(props) => props.theme.border.radius.sm};
  }

  .bruno-search-bar input {
@@ -38,7 +39,7 @@ const StyledWrapper = styled.div`
    padding: 0 1px;
    margin: 0 1px;
    cursor: pointer;
-    color: #aaa;
+    color: ${(props) => props.theme.colors.text.subtext1};
    border-radius: 3px;
    height: 18px;
    width: 18px;
@@ -51,27 +52,14 @@ const StyledWrapper = styled.div`
    min-width: 28px;
    text-align: center;
    font-size: ${(props) => props.theme.font.size.xs};
-    color: #aaa;
+    color: ${(props) => props.theme.colors.text.subtext1};
    margin: 0 8px 0 1px; 
    white-space: nowrap;
  }

-  .bruno-search-bar.compact {
-    background: ${(props) => props.theme.codemirror.bg};
-    color: ${(props) => props.theme.codemirror.text || props.theme.text};
-    border: none;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-    border-radius: 4px;
-    padding: 1px 3px;
-    min-height: 22px;
-    display: flex;
-    align-items: center;
-    gap: 0;
-  }
-
  .bruno-search-bar input {
    background: transparent;
-    color: inherit;
+    color: ${(props) => props.theme.colors.text.subtext2};
    border: none;
    outline: none;
    font-size: ${(props) => props.theme.font.size.base};
@@ -92,7 +80,9 @@ const StyledWrapper = styled.div`
  }

  .searchbar-icon-btn.active {
-    color: #f39c12 !important;
+    color: ${(props) => props.theme.brand};
+    background-color: ${(props) => rgba(props.theme.brand, 0.1)};
+    font-weght: 500;
  }
 `;

--- a/packages/bruno-app/src/components/CodeMirrorSearch/index.js
+++ b/packages/bruno-app/src/components/CodeMirrorSearch/index.js
@@ -166,7 +166,7 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {

  return (
    <StyledWrapper>
-      <div className="bruno-search-bar compact">
+      <div className="bruno-search-bar">
        <input
          autoFocus
          type="text"
--- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
@@ -6,8 +6,15 @@ const Wrapper = styled.div`
  font-size: ${(props) => props.theme.font.size.base};
  color: ${(props) => props.theme.dropdown.color};
  background-color: ${(props) => props.theme.dropdown.bg};
-  box-shadow: ${(props) => props.theme.shadow.sm};
+  ${(props) =>
+    props.theme.dropdown.shadow && props.theme.dropdown.shadow !== 'none'
+      ? `box-shadow: ${props.theme.dropdown.shadow};`
+      : ''}
  border-radius: ${(props) => props.theme.border.radius.base};
+  ${(props) =>
+    props.theme.dropdown.border && props.theme.dropdown.border !== 'none'
+      ? `border: 1px solid ${props.theme.dropdown.border};`
+      : ''}
  max-height: 90vh;
  overflow-y: auto;
  max-width: unset !important;
--- a/packages/bruno-app/src/components/Modal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Modal/StyledWrapper.js
@@ -41,6 +41,7 @@ const Wrapper = styled.div`
    flex-grow: 0;
    margin: 3vh 10vw;
    margin-top: 50px;
+    border: 1px solid ${(props) => props.theme.border.border0};

    &.modal-sm {
      min-width: 300px;
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js
@@ -1,12 +1,13 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  border-left: 3px solid ${(props) => props.theme.colors.text.danger};
-  border-radius: ${(props) => props.theme.border.radius.sm};
  max-height: 160px;
  overflow-y: auto;
-  background-color: color-mix(in srgb, ${(props) => props.theme.colors.text.danger} 6%, transparent);
  margin-bottom: 8px;
+  background-color: ${(props) => props.theme.background.base};
+  border: solid 1px ${(props) => props.theme.border.border2};
+  border-left: 4px solid ${(props) => props.theme.colors.text.danger};
+  border-radius: ${(props) => props.theme.border.radius.base};

  .close-button {
    opacity: 0.6;
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js
@@ -46,9 +46,9 @@ const StyledWrapper = styled.div`
    width: 100%;

    input {
-      border: ${(props) => props.theme.sidebar.search.border};
-      border-radius: 2px;
-      background-color: ${(props) => props.theme.sidebar.search.bg};
+      border: solid 1px ${(props) => props.theme.border.border2};
+      border-radius: ${(props) => props.theme.border.radius.sm};
+      background-color: ${(props) => props.theme.background.base};

      &:focus {
        outline: none;
--- a/packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js
@@ -1,27 +1,13 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  border-left: 4px solid ${(props) => props.theme.colors.text.danger};
-  border-top: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-radius: 0.375rem;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  max-height: 200px;
  min-height: 70px;
  overflow-y: auto;
-  background-color: ${(props) => props.theme.bg === '#1e1e1e' ? 'rgba(40, 40, 40, 0.5)' : 'rgba(250, 250, 250, 0.9)'};
-  
-  .error-icon-container {
-    margin-top: 0.125rem;
-    padding: 0.375rem;
-    border-radius: 9999px;
-    background-color: ${(props) => props.theme.bg === '#1e1e1e' ? 'rgba(40, 40, 40, 0.8)' : 'rgba(240, 240, 240, 0.8)'};
-    
-    svg {
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
+  background-color: ${(props) => props.theme.background.base};
+  border: solid 1px ${(props) => props.theme.border.border2};
+  border-left: 4px solid ${(props) => props.theme.colors.text.danger};
+  border-radius: ${(props) => props.theme.border.radius.base};
  
  .close-button {
    opacity: 0.7;
@@ -50,6 +36,10 @@ const StyledWrapper = styled.div`
    word-break: break-all;
    color: ${(props) => props.theme.text};
  }
+
+  .separator {
+    border-top: 1px solid ${(props) => props.theme.border.border1};
+  }
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/ResponsePane/ScriptError/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/ScriptError/index.js
@@ -38,7 +38,7 @@ const ScriptError = ({ item, onClose }) => {
        <div className="flex-1 min-w-0">
          {errors.map((error, index) => (
            <div key={index}>
-              {index > 0 && <div className="border-t border-gray-300 my-3 dark:border-gray-600"></div>}
+              {index > 0 && <div className="separator my-2"></div>}
              <div className="error-title">
                {error.title}
              </div>
--- a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
@@ -75,12 +75,6 @@ const StyledWrapper = styled.div`
    color: ${(props) => props.theme.colors.text.green} !important;
  }

-  .separator {
-    height: 16px;
-    border-left: 1px solid ${(props) => props.theme.preferences.sidebar.border};
-    margin: 0 8px;
-  }
-
  .result-view-tabs {
    display: flex;
    align-items: center;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
@@ -18,7 +18,7 @@ const StyledWrapper = styled.div`
  }

  .indent-block {
-    border-right: ${(props) => props.theme.sidebar.collection.item.indentBorder};
+    border-right: 1px solid ${(props) => props.theme.border.border1};
  }

  .collection-item-name {
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
@@ -17,7 +17,7 @@ const Wrapper = styled.div`
  }

  .indent-block {
-    border-right: ${(props) => props.theme.sidebar.collection.item.indentBorder};
+    border-right: 1px solid ${(props) => props.theme.border.border1};
  }

  .collection-item-name {
@@ -107,6 +107,7 @@ const Wrapper = styled.div`
      .menu-icon,
      .collection-item-menu-icon {
        visibility: visible;
+        background-color: transparent !important;
      }
    }

@@ -132,7 +133,7 @@ const Wrapper = styled.div`
      }

      .indent-block {
-        border-right: ${(props) => props.theme.sidebar.collection.item.active.indentBorder} !important;
+        border-right: 1px solid ${(props) => props.theme.border.border1} !important;
      }
    }

--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js
@@ -20,6 +20,7 @@ const Wrapper = styled.div`
    &.collection-keyboard-focused {
      .collection-actions {
        visibility: visible;
+        background-color: transparent !important;
      }
    }

--- a/packages/bruno-app/src/components/Sidebar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/StyledWrapper.js
@@ -125,15 +125,6 @@ const Wrapper = styled.div`
      border-left: solid 1px ${(props) => props.theme.sidebar.dragbar.activeBorder};
    }
  }
-
-  .second-tab-placeholder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex: 1;
-    color: ${(props) => props.theme.sidebar.muted};
-  }
 `;

 export default Wrapper;
--- a/packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx
+++ b/packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ColorSwatch, ColorSection } from './components';

 // Catppuccin Latte (Light)
 const latte = {
@@ -150,24 +151,6 @@ const mocha = {

 const themes = [latte, frappe, macchiato, mocha];

-const ColorSwatch = ({ name, color, textColor }) => (
-  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px' }}>
-    <div
-      style={{
-        width: '56px',
-        height: '56px',
-        backgroundColor: color,
-        borderRadius: '8px',
-        border: '1px solid rgba(128,128,128,0.2)'
-      }}
-    />
-    <div style={{ textAlign: 'center' }}>
-      <div style={{ fontSize: '10px', fontWeight: 600, color: textColor }}>{name}</div>
-      <div style={{ fontSize: '9px', color: textColor, opacity: 0.7, fontFamily: 'monospace' }}>{color}</div>
-    </div>
-  </div>
-);
-
 const ThemeSection = ({ theme }) => {
  const textColor = theme.mode === 'dark' ? '#cdd6f4' : '#4c4f69';
  const mutedColor = theme.mode === 'dark' ? '#a6adc8' : '#6c6f85';
@@ -188,23 +171,8 @@ const ThemeSection = ({ theme }) => {
        {theme.mode === 'light' ? 'Light theme' : 'Dark theme'} — Base: {theme.base}
      </p>

-      <h3 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '12px', color: textColor }}>
-        Accents
-      </h3>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', marginBottom: '24px' }}>
-        {Object.entries(theme.accents).map(([name, color]) => (
-          <ColorSwatch key={name} name={name} color={color} textColor={textColor} />
-        ))}
-      </div>
-
-      <h3 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '12px', color: textColor }}>
-        Surface & Text
-      </h3>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
-        {Object.entries(theme.surface).map(([name, color]) => (
-          <ColorSwatch key={name} name={name} color={color} textColor={textColor} />
-        ))}
-      </div>
+      <ColorSection title="Accents" colors={theme.accents} textColor={textColor} />
+      <ColorSection title="Surface & Text" colors={theme.surface} textColor={textColor} />
    </div>
  );
 };
--- a/packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx
+++ b/packages/bruno-app/src/themes/PaletteViewer/Dark.stories.jsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { palette } from '../dark/dark';
+import { ColorSwatch, ColorSection } from './components';
+
+const textColor = '#cccccc';
+const mutedColor = '#858585';
+
+export default {
+  title: 'Themes/Dark Palette',
+  parameters: {
+    layout: 'padded'
+  }
+};
+
+export const Overview = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: palette.background.BASE, minHeight: '100vh' }}>
+      <h1 style={{ fontSize: '24px', fontWeight: 700, marginBottom: '8px', color: textColor }}>
+        Dark Theme Palette
+      </h1>
+      <p style={{ fontSize: '14px', color: mutedColor, marginBottom: '32px' }}>
+        14 accent colors with full hue coverage
+      </p>
+      <ColorSection title="Accents" colors={palette.accents} textColor={textColor} />
+      <ColorSection title="Background" colors={palette.background} textColor={textColor} />
+      <ColorSection title="Text" colors={palette.text} textColor={textColor} />
+      <ColorSection title="Overlay" colors={palette.overlay} textColor={textColor} />
+      <ColorSection title="Border" colors={palette.border} textColor={textColor} />
+      <ColorSection title="Utility" colors={palette.utility} textColor={textColor} />
+    </div>
+  )
+};
+
+export const Accents = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
+      <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: textColor }}>
+        Accent Colors
+      </h2>
+      <p style={{ fontSize: '13px', color: mutedColor, marginBottom: '24px' }}>
+        Warm &rarr; Cool progression across the color wheel
+      </p>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
+        {Object.entries(palette.accents).map(([name, color]) => (
+          <ColorSwatch key={name} name={name} color={color} textColor={textColor} />
+        ))}
+      </div>
+    </div>
+  )
+};
+
+export const Background = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
+      <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: textColor }}>
+        Background Colors
+      </h2>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
+        {Object.entries(palette.background).map(([name, color]) => (
+          <ColorSwatch key={name} name={name} color={color} textColor={textColor} />
+        ))}
+      </div>
+    </div>
+  )
+};
+
+export const Text = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
+      <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: textColor }}>
+        Text Colors
+      </h2>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
+        {Object.entries(palette.text).map(([name, color]) => (
+          <ColorSwatch key={name} name={name} color={color} textColor={textColor} />
+        ))}
+      </div>
+    </div>
+  )
+};
+
+export const HueWheel = {
+  render: () => {
+    const accents = Object.entries(palette.accents);
+    // Sort by hue for visualization
+    const sorted = [...accents].sort((a, b) => {
+      const hueA = parseInt(a[1].match(/hsl\((\d+)/)?.[1] || 0);
+      const hueB = parseInt(b[1].match(/hsl\((\d+)/)?.[1] || 0);
+      return hueA - hueB;
+    });
+
+    return (
+      <div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
+        <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: textColor }}>
+          Hue Distribution
+        </h2>
+        <p style={{ fontSize: '13px', color: mutedColor, marginBottom: '24px' }}>
+          Colors sorted by hue value (0&deg; &rarr; 360&deg;)
+        </p>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {sorted.map(([name, color]) => {
+            const hueMatch = color.match(/hsl\((\d+)/);
+            const hue = hueMatch ? parseInt(hueMatch[1]) : 0;
+            return (
+              <div key={name} style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                <div style={{ width: '70px', fontSize: '12px', fontWeight: 600, color: textColor }}>{name}</div>
+                <div style={{ width: '40px', fontSize: '11px', color: mutedColor, fontFamily: 'monospace' }}>{hue}&deg;</div>
+                <div
+                  style={{
+                    width: `${(hue / 360) * 280 + 50}px`,
+                    height: '28px',
+                    backgroundColor: color,
+                    borderRadius: '4px'
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+};
--- a/packages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx
+++ b/packages/bruno-app/src/themes/PaletteViewer/Light.stories.jsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import { palette } from '../light/light';
+import { ColorSwatch, ColorSection } from './components';
+
+const textColor = '#343434';
+const mutedColor = '#666666';
+
+export default {
+  title: 'Themes/Light Palette',
+  parameters: {
+    layout: 'padded'
+  }
+};
+
+export const Overview = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: palette.background.BASE, minHeight: '100vh' }}>
+      <h1 style={{ fontSize: '24px', fontWeight: 700, marginBottom: '8px', color: textColor }}>
+        Light Theme Palette
+      </h1>
+      <p style={{ fontSize: '14px', color: mutedColor, marginBottom: '32px' }}>
+        14 accent colors with full hue coverage
+      </p>
+      <ColorSection title="Accents" colors={palette.accents} textColor={textColor} />
+      <ColorSection title="System" colors={palette.system} textColor={textColor} />
+      <ColorSection title="Background" colors={palette.background} textColor={textColor} />
+      <ColorSection title="Text" colors={palette.text} textColor={textColor} />
+      <ColorSection title="Overlay" colors={palette.overlay} textColor={textColor} />
+      <ColorSection title="Border" colors={palette.border} textColor={textColor} />
+      <ColorSection title="Utility" colors={palette.utility} textColor={textColor} />
+    </div>
+  )
+};
+
+export const Accents = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
+      <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: textColor }}>
+        Accent Colors
+      </h2>
+      <p style={{ fontSize: '13px', color: mutedColor, marginBottom: '24px' }}>
+        Warm &rarr; Cool progression across the color wheel
+      </p>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
+        {Object.entries(palette.accents).map(([name, color]) => (
+          <ColorSwatch key={name} name={name} color={color} textColor={textColor} />
+        ))}
+      </div>
+    </div>
+  )
+};
+
+export const Background = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
+      <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: textColor }}>
+        Background Colors
+      </h2>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
+        {Object.entries(palette.background).map(([name, color]) => (
+          <ColorSwatch key={name} name={name} color={color} textColor={textColor} />
+        ))}
+      </div>
+    </div>
+  )
+};
+
+export const Text = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
+      <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: textColor }}>
+        Text Colors
+      </h2>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
+        {Object.entries(palette.text).map(([name, color]) => (
+          <ColorSwatch key={name} name={name} color={color} textColor={textColor} />
+        ))}
+      </div>
+    </div>
+  )
+};
+
+export const HueWheel = {
+  render: () => {
+    const accents = Object.entries(palette.accents);
+    // Sort by hue for visualization
+    const sorted = [...accents].sort((a, b) => {
+      const hueA = parseInt(a[1].match(/hsl\((\d+)/)?.[1] || 0);
+      const hueB = parseInt(b[1].match(/hsl\((\d+)/)?.[1] || 0);
+      return hueA - hueB;
+    });
+
+    return (
+      <div style={{ padding: '24px', backgroundColor: palette.background.BASE }}>
+        <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: textColor }}>
+          Hue Distribution
+        </h2>
+        <p style={{ fontSize: '13px', color: mutedColor, marginBottom: '24px' }}>
+          Colors sorted by hue value (0&deg; &rarr; 360&deg;)
+        </p>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {sorted.map(([name, color]) => {
+            const hueMatch = color.match(/hsl\((\d+)/);
+            const hue = hueMatch ? parseInt(hueMatch[1]) : 0;
+            return (
+              <div key={name} style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                <div style={{ width: '70px', fontSize: '12px', fontWeight: 600, color: textColor }}>{name}</div>
+                <div style={{ width: '40px', fontSize: '11px', color: mutedColor, fontFamily: 'monospace' }}>{hue}&deg;</div>
+                <div
+                  style={{
+                    width: `${(hue / 360) * 280 + 50}px`,
+                    height: '28px',
+                    backgroundColor: color,
+                    borderRadius: '4px'
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+};
--- a/packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx
+++ b/packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx
@@ -1,215 +0,0 @@
-import React from 'react';
-
-// Light theme palette - 14 accent colors
-const palette = {
-  accents: {
-    PRIMARY: '#bd7a28',
-    RED: 'hsl(8 60% 52%)', // warm coral - NEW
-    ROSE: 'hsl(352 45% 50%)', // soft red (approved)
-    BROWN: 'hsl(28 55% 38%)', // warm brown (liked)
-    ORANGE: 'hsl(35 85% 42%)', // vibrant orange
-    YELLOW: 'hsl(45 75% 42%)', // golden yellow
-    LIME: 'hsl(85 45% 40%)', // yellow-green - NEW
-    GREEN: 'hsl(145 50% 36%)', // forest green
-    TEAL: 'hsl(178 50% 36%)', // true teal
-    CYAN: 'hsl(195 55% 42%)', // cyan-blue - NEW
-    BLUE: 'hsl(214 55% 45%)', // true blue (liked)
-    INDIGO: 'hsl(235 45% 45%)', // deep indigo
-    VIOLET: 'hsl(258 42% 50%)', // soft violet - NEW
-    PURPLE: 'hsl(280 45% 48%)', // rich purple
-    PINK: 'hsl(328 50% 48%)' // magenta-pink - NEW
-  },
-  system: {
-    CONTROL_ACCENT: '#b96f1d' // for accent-color
-  },
-  background: {
-    BASE: '#ffffff',
-    MANTLE: '#f8f8f8',
-    CRUST: '#f1f1f1',
-    SURFACE0: '#f1f1f1',
-    SURFACE1: '#eaeaea',
-    SURFACE2: '#e5e5e5'
-  },
-  text: {
-    BASE: '#343434',
-    SUBTEXT2: '#666666',
-    SUBTEXT1: '#838383',
-    SUBTEXT0: '#9B9B9B'
-  },
-  overlay: {
-    OVERLAY2: '#8b8b8b',
-    OVERLAY1: '#B0B0B0',
-    OVERLAY0: '#C0C0C0'
-  },
-  border: {
-    BORDER2: '#cccccc',
-    BORDER1: '#e5e5e5',
-    BORDER0: '#efefef'
-  },
-  utility: {
-    WHITE: '#ffffff',
-    BLACK: '#000000'
-  }
-};
-
-const ColorSwatch = ({ name, color, textColor = '#343434' }) => (
-  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
-    <div
-      style={{
-        width: '80px',
-        height: '80px',
-        backgroundColor: color,
-        borderRadius: '8px',
-        border: '1px solid #e5e5e5',
-        boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
-      }}
-    />
-    <div style={{ textAlign: 'center' }}>
-      <div style={{ fontSize: '11px', fontWeight: 600, color: textColor }}>{name}</div>
-      <div style={{ fontSize: '9px', color: '#666666', fontFamily: 'monospace' }}>{color}</div>
-    </div>
-  </div>
-);
-
-const ColorSection = ({ title, colors, textColor }) => (
-  <div style={{ marginBottom: '32px' }}>
-    <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', color: '#343434' }}>{title}</h3>
-    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
-      {Object.entries(colors).map(([name, color]) => (
-        <ColorSwatch key={name} name={name} color={color} textColor={textColor} />
-      ))}
-    </div>
-  </div>
-);
-
-export default {
-  title: 'Themes/Light Palette',
-  parameters: {
-    layout: 'padded'
-  }
-};
-
-export const Overview = {
-  render: () => (
-    <div style={{ padding: '24px', backgroundColor: '#ffffff', minHeight: '100vh' }}>
-      <h1 style={{ fontSize: '24px', fontWeight: 700, marginBottom: '8px', color: '#343434' }}>
-        Light Theme Palette
-      </h1>
-      <p style={{ fontSize: '14px', color: '#666666', marginBottom: '32px' }}>
-        14 accent colors with full hue coverage
-      </p>
-      <ColorSection title="Accents" colors={palette.accents} />
-      <ColorSection title="Background" colors={palette.background} />
-      <ColorSection title="Text" colors={palette.text} />
-      <ColorSection title="Overlay" colors={palette.overlay} />
-      <ColorSection title="Border" colors={palette.border} />
-      <ColorSection title="Utility" colors={palette.utility} />
-    </div>
-  )
-};
-
-export const Accents = {
-  render: () => (
-    <div style={{ padding: '24px', backgroundColor: '#ffffff' }}>
-      <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: '#343434' }}>
-        Accent Colors
-      </h2>
-      <p style={{ fontSize: '13px', color: '#666', marginBottom: '24px' }}>
-        Warm → Cool progression across the color wheel
-      </p>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
-        {Object.entries(palette.accents).map(([name, color]) => (
-          <ColorSwatch key={name} name={name} color={color} />
-        ))}
-      </div>
-    </div>
-  )
-};
-
-export const Background = {
-  render: () => (
-    <div style={{ padding: '24px', backgroundColor: '#ffffff' }}>
-      <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: '#343434' }}>
-        Background Colors
-      </h2>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
-        {Object.entries(palette.background).map(([name, color]) => (
-          <ColorSwatch key={name} name={name} color={color} />
-        ))}
-      </div>
-    </div>
-  )
-};
-
-export const Text = {
-  render: () => (
-    <div style={{ padding: '24px', backgroundColor: '#ffffff' }}>
-      <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: '#343434' }}>
-        Text Colors
-      </h2>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
-        {Object.entries(palette.text).map(([name, color]) => (
-          <div key={name} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
-            <div
-              style={{
-                width: '80px',
-                height: '80px',
-                backgroundColor: color,
-                borderRadius: '8px',
-                border: '1px solid #e5e5e5',
-                boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
-              }}
-            />
-            <div style={{ textAlign: 'center' }}>
-              <div style={{ fontSize: '11px', fontWeight: 600, color: '#343434' }}>{name}</div>
-              <div style={{ fontSize: '9px', color: '#666666', fontFamily: 'monospace' }}>{color}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-};
-
-export const HueWheel = {
-  render: () => {
-    const accents = Object.entries(palette.accents);
-    // Sort by hue for visualization
-    const sorted = [...accents].sort((a, b) => {
-      const hueA = parseInt(a[1].match(/hsl\((\d+)/)?.[1] || 0);
-      const hueB = parseInt(b[1].match(/hsl\((\d+)/)?.[1] || 0);
-      return hueA - hueB;
-    });
-
-    return (
-      <div style={{ padding: '24px', backgroundColor: '#ffffff' }}>
-        <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: '#343434' }}>
-          Hue Distribution
-        </h2>
-        <p style={{ fontSize: '13px', color: '#666', marginBottom: '24px' }}>
-          Colors sorted by hue value (0° → 360°)
-        </p>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-          {sorted.map(([name, color]) => {
-            const hueMatch = color.match(/hsl\((\d+)/);
-            const hue = hueMatch ? parseInt(hueMatch[1]) : 0;
-            return (
-              <div key={name} style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-                <div style={{ width: '70px', fontSize: '12px', fontWeight: 600 }}>{name}</div>
-                <div style={{ width: '40px', fontSize: '11px', color: '#666', fontFamily: 'monospace' }}>{hue}°</div>
-                <div
-                  style={{
-                    width: `${(hue / 360) * 280 + 50}px`,
-                    height: '28px',
-                    backgroundColor: color,
-                    borderRadius: '4px'
-                  }}
-                />
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-};
--- a/packages/bruno-app/src/themes/PaletteViewer/components.jsx
+++ b/packages/bruno-app/src/themes/PaletteViewer/components.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+// Shorten long names for display
+const formatName = (name) => {
+  if (name === 'CONTROL_ACCENT') return 'CTRL_ACC';
+  return name;
+};
+
+// Shorten HSL colors for display
+const formatColor = (color) => {
+  if (color.startsWith('hsl(')) {
+    // Handle all HSL formats: "hsl(0 70% 71%)", "hsl(0, 70%, 71%)", "hsl(0deg 0% 10%)"
+    const match = color.match(/hsl\((\d+)(?:deg)?\s*,?\s*(\d+)%\s*,?\s*(\d+)%\)/);
+    if (match) {
+      return `${match[1]}/${match[2]}/${match[3]}`;
+    }
+  }
+  return color;
+};
+
+export const ColorSwatch = ({ name, color, textColor = '#cccccc', size = 56 }) => (
+  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px' }}>
+    <div
+      style={{
+        width: `${size}px`,
+        height: `${size}px`,
+        backgroundColor: color,
+        borderRadius: '8px',
+        border: '1px solid rgba(128,128,128,0.2)'
+      }}
+    />
+    <div style={{ textAlign: 'center' }}>
+      <div style={{ fontSize: '10px', fontWeight: 600, color: textColor }}>{formatName(name)}</div>
+      <div style={{ fontSize: '9px', color: textColor, opacity: 0.7, fontFamily: 'monospace' }}>{formatColor(color)}</div>
+    </div>
+  </div>
+);
+
+export const ColorSection = ({ title, colors, textColor = '#cccccc', size = 56 }) => (
+  <div style={{ marginBottom: '24px' }}>
+    <h3 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '12px', color: textColor }}>{title}</h3>
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
+      {Object.entries(colors).map(([name, color]) => (
+        <ColorSwatch key={name} name={name} color={color} textColor={textColor} size={size} />
+      ))}
+    </div>
+  </div>
+);
--- a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
@@ -137,20 +137,15 @@ const catppuccinFrappeTheme = {
    muted: colors.SUBTEXT0,
    bg: colors.BASE,
    dragbar: {
-      border: colors.SURFACE1,
-      activeBorder: colors.SURFACE2
-    },
-
-    search: {
-      border: '1px solid transparent',
-      bg: colors.SURFACE0
+      border: colors.SURFACE0,
+      activeBorder: colors.OVERLAY0
    },

    collection: {
      item: {
        bg: colors.SURFACE0,
-        hoverBg: colors.SURFACE1,
-        focusBorder: colors.LAVENDER,
+        hoverBg: colors.SURFACE0,
+        focusBorder: colors.SURFACE1,
        indentBorder: `solid 1px ${colors.SURFACE2}`,
        active: {
          indentBorder: `solid 1px ${colors.MAUVE}`
@@ -169,9 +164,10 @@ const catppuccinFrappeTheme = {
  dropdown: {
    color: colors.TEXT,
    iconColor: colors.SUBTEXT1,
-    bg: colors.MANTLE,
+    bg: colors.SURFACE0,
    hoverBg: 'rgba(115, 121, 148, 0.16)',
-    shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+    shadow: 'none',
+    border: colors.SURFACE1,
    separator: colors.SURFACE1,
    selectedColor: colors.MAUVE,
    mutedText: colors.SUBTEXT0
@@ -209,7 +205,7 @@ const catppuccinFrappeTheme = {
      border: `solid 1px ${colors.SURFACE0}`
    },
    dragbar: {
-      border: colors.SURFACE1,
+      border: colors.SURFACE0,
      activeBorder: colors.OVERLAY0
    },
    responseStatus: colors.TEXT,
@@ -566,12 +562,6 @@ const catppuccinFrappeTheme = {
    text: colors.SUBTEXT1
  },

-  preferences: {
-    sidebar: {
-      border: colors.SURFACE1
-    }
-  },
-
  examples: {
    buttonBg: 'rgba(202, 158, 230, 0.1)',
    buttonColor: colors.MAUVE,
--- a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
@@ -137,20 +137,15 @@ const catppuccinMacchiatoTheme = {
    muted: colors.SUBTEXT0,
    bg: colors.BASE,
    dragbar: {
-      border: colors.SURFACE1,
-      activeBorder: colors.SURFACE2
-    },
-
-    search: {
-      border: '1px solid transparent',
-      bg: colors.SURFACE0
+      border: colors.SURFACE0,
+      activeBorder: colors.OVERLAY0
    },

    collection: {
      item: {
        bg: colors.SURFACE0,
-        hoverBg: colors.SURFACE1,
-        focusBorder: colors.LAVENDER,
+        hoverBg: colors.SURFACE0,
+        focusBorder: colors.SURFACE1,
        indentBorder: `solid 1px ${colors.SURFACE2}`,
        active: {
          indentBorder: `solid 1px ${colors.MAUVE}`
@@ -171,7 +166,8 @@ const catppuccinMacchiatoTheme = {
    iconColor: colors.SUBTEXT1,
    bg: colors.MANTLE,
    hoverBg: 'rgba(110, 115, 141, 0.16)',
-    shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+    shadow: 'none',
+    border: colors.SURFACE1,
    separator: colors.SURFACE1,
    selectedColor: colors.MAUVE,
    mutedText: colors.SUBTEXT0
@@ -209,7 +205,7 @@ const catppuccinMacchiatoTheme = {
      border: `solid 1px ${colors.SURFACE0}`
    },
    dragbar: {
-      border: colors.SURFACE1,
+      border: colors.SURFACE0,
      activeBorder: colors.OVERLAY0
    },
    responseStatus: colors.TEXT,
@@ -566,12 +562,6 @@ const catppuccinMacchiatoTheme = {
    text: colors.SUBTEXT1
  },

-  preferences: {
-    sidebar: {
-      border: colors.SURFACE1
-    }
-  },
-
  examples: {
    buttonBg: 'rgba(198, 160, 246, 0.1)',
    buttonColor: colors.MAUVE,
--- a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
@@ -137,20 +137,15 @@ const catppuccinMochaTheme = {
    muted: colors.SUBTEXT0,
    bg: colors.BASE,
    dragbar: {
-      border: colors.SURFACE1,
-      activeBorder: colors.SURFACE2
-    },
-
-    search: {
-      border: '1px solid transparent',
-      bg: colors.SURFACE0
+      border: colors.SURFACE0,
+      activeBorder: colors.OVERLAY0
    },

    collection: {
      item: {
        bg: colors.SURFACE0,
-        hoverBg: colors.SURFACE1,
-        focusBorder: colors.LAVENDER,
+        hoverBg: colors.SURFACE0,
+        focusBorder: colors.SURFACE1,
        indentBorder: `solid 1px ${colors.SURFACE2}`,
        active: {
          indentBorder: `solid 1px ${colors.MAUVE}`
@@ -171,7 +166,8 @@ const catppuccinMochaTheme = {
    iconColor: colors.SUBTEXT1,
    bg: colors.MANTLE,
    hoverBg: 'rgba(108, 112, 134, 0.16)',
-    shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+    shadow: 'none',
+    border: colors.SURFACE1,
    separator: colors.SURFACE1,
    selectedColor: colors.MAUVE,
    mutedText: colors.SUBTEXT0
@@ -209,7 +205,7 @@ const catppuccinMochaTheme = {
      border: `solid 1px ${colors.SURFACE0}`
    },
    dragbar: {
-      border: colors.SURFACE1,
+      border: colors.SURFACE0,
      activeBorder: colors.OVERLAY0
    },
    responseStatus: colors.TEXT,
@@ -566,12 +562,6 @@ const catppuccinMochaTheme = {
    text: colors.SUBTEXT1
  },

-  preferences: {
-    sidebar: {
-      border: colors.SURFACE1
-    }
-  },
-
  examples: {
    buttonBg: 'rgba(203, 166, 247, 0.1)',
    buttonColor: colors.MAUVE,
--- a/packages/bruno-app/src/themes/dark/dark-monochrome.js
+++ b/packages/bruno-app/src/themes/dark/dark-monochrome.js
@@ -128,11 +128,6 @@ const darkMonochromeTheme = {
      activeBorder: colors.GRAY_4
    },

-    search: {
-      border: '1px solid transparent',
-      bg: colors.GRAY_2
-    },
-
    collection: {
      item: {
        bg: '#37373D',
@@ -158,7 +153,8 @@ const darkMonochromeTheme = {
    iconColor: 'rgb(204, 204, 204)',
    bg: 'rgb(48, 48, 49)',
    hoverBg: '#6A6A6A29',
-    shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+    shadow: 'none',
+    border: '#444',
    separator: '#444',
    selectedColor: '#a3a3a3',
    mutedText: '#9B9B9B'
@@ -283,8 +279,8 @@ const darkMonochromeTheme = {
        border: colors.BRAND
      },
      secondary: {
-        bg: colors.GRAY_4,
-        text: '#fff',
+        bg: colors.BG,
+        text: colors.TEXT,
        border: colors.GRAY_5
      },
      success: {
@@ -553,12 +549,6 @@ const darkMonochromeTheme = {
    text: '#B8B8B8'
  },

-  preferences: {
-    sidebar: {
-      border: '#444444'
-    }
-  },
-
  examples: {
    buttonBg: '#a3a3a31A',
    buttonColor: '#a3a3a3',
--- a/packages/bruno-app/src/themes/dark/dark-pastel.js
+++ b/packages/bruno-app/src/themes/dark/dark-pastel.js
@@ -148,10 +148,6 @@ const darkPastelTheme = {
      border: colors.GRAY_3,
      activeBorder: colors.BRAND
    },
-    search: {
-      border: '1px solid transparent',
-      bg: colors.GRAY_2
-    },
    collection: {
      item: {
        bg: colors.GRAY_2,
@@ -176,7 +172,8 @@ const darkPastelTheme = {
    iconColor: colors.TEXT_MUTED,
    bg: colors.GRAY_2,
    hoverBg: colors.GRAY_3,
-    shadow: 'rgba(0, 0, 0, 0.5) 0px 6px 16px -2px',
+    shadow: 'none',
+    border: colors.GRAY_4,
    separator: colors.GRAY_4,
    selectedColor: colors.BRAND,
    mutedText: colors.GRAY_6
@@ -571,12 +568,6 @@ const darkPastelTheme = {
    text: colors.TEXT
  },

-  preferences: {
-    sidebar: {
-      border: colors.GRAY_4
-    }
-  },
-
  examples: {
    buttonBg: `${colors.BRAND}20`,
    buttonColor: colors.BRAND,
--- a/packages/bruno-app/src/themes/dark/dark.js
+++ b/packages/bruno-app/src/themes/dark/dark.js
@@ -1,56 +1,73 @@
+export const palette = {
+  accents: {
+    PRIMARY: '#d9a342',
+    RED: 'hsl(0   70% 71%)',
+    ROSE: 'hsl(350 65% 78%)',
+    BROWN: 'hsl(41  52% 77%)',
+    ORANGE: 'hsl(24  75% 75%)',
+    YELLOW: 'hsl(48  68% 74%)',
+    LIME: 'hsl(75  65% 71%)',
+    GREEN: 'hsl(140 59% 71%)',
+    TEAL: 'hsl(170 55% 71%)',
+    CYAN: 'hsl(190 70% 76%)',
+    BLUE: 'hsl(202 82% 80%)',
+    INDIGO: 'hsl(225 73% 82%)',
+    VIOLET: 'hsl(260 65% 81%)',
+    PURPLE: 'hsl(285 60% 78%)',
+    PINK: 'hsl(320 65% 81%)'
+  },
+  background: {
+    BASE: 'hsl(0deg 0% 10%)',
+    MANTLE: '#252526',
+    CRUST: '#1e1e1e',
+    SURFACE0: '#26292b',
+    SURFACE1: 'hsl(204, 4%, 23%)'
+  },
+  text: {
+    BASE: 'hsl(0deg 0% 80%)',
+    SUBTEXT2: '#bbb',
+    SUBTEXT1: '#aaa',
+    SUBTEXT0: '#999'
+  },
+  border: {
+    BORDER2: '#444444',
+    BORDER1: '#333333',
+    BORDER0: '#2a2a2a'
+  },
+  overlay: {
+    OVERLAY2: '#666666',
+    OVERLAY1: '#555555',
+    OVERLAY0: '#444444'
+  },
+  utility: {
+    WHITE: '#ffffff',
+    BLACK: '#000000'
+  }
+};
+
 const colors = {
-  // BRAND: '#d9a342',
-  BRAND: '#d9a342',
-  TEXT: '#d4d4d4',
-  TEXT_MUTED: '#858585',
-  TEXT_LINK: '#8BB7E0',
-  BG: '#1e1e1e',
-
-  GREEN: '#4ec9b0',
-  YELLOW: '#d9a342',
-  WHITE: '#fff',
-  BLACK: '#000',
-
-  GRAY_1: '#252526',
  GRAY_2: '#3D3D3D',
  GRAY_3: '#444444',
  GRAY_4: '#666666',
-  GRAY_5: '#b0b0b0',
-  GRAY_6: '#cbcbcb',
-  GRAY_7: '#e5e5e5',
-  GRAY_8: '#eaeaea',
-  GRAY_9: '#f3f3f3',
-  GRAY_10: '#f8f8f8',
-
-  CODEMIRROR_TOKENS: {
-    DEFINITION: '#9ccc9c', // Softer, brighter sage — better contrast
-    PROPERTY: 'hsl(202 90% 80% / 1)', // Soft sky blue, high clarity without being loud
-    STRING: 'hsl(41 50% 69% / 1)', // VSCode-like warm string tone
-    NUMBER: 'hsl(168 50% 57% / 1)', // Standard teal with higher clarity
-    ATOM: 'hsl(305 32% 69% / 1)', // Brighter lavender, matches VSCode purple
-    VARIABLE: 'hsl(201 90% 73% / 1)', // Clear aqua-blue (used widely in dark themes)
-    KEYWORD: 'hsl(10 36% 65% / 1)', // Coral-ish but muted to avoid eye strain
-    COMMENT: '#6a9955', // Greenish-slate — very readable & subtle
-    OPERATOR: '#d4d4d4' // Light gray — consistent with dark mode operators
-  }
+  GRAY_5: '#b0b0b0'
 };

 const darkTheme = {
  mode: 'dark',
-  brand: colors.BRAND,
-  text: colors.TEXT,
-  textLink: colors.TEXT_LINK,
-  bg: colors.BG,
+  brand: palette.accents.PRIMARY,
+  text: palette.text.BASE,
+  textLink: palette.accents.BLUE,
+  bg: palette.background.BASE,

  accents: {
-    primary: colors.BRAND
+    primary: palette.accents.PRIMARY
  },

  background: {
-    base: colors.BG,
-    mantle: colors.GRAY_1,
+    base: palette.background.BASE,
+    mantle: palette.background.MANTLE,
    crust: '#333333',
-    surface0: colors.GRAY_2,
+    surface0: palette.background.SURFACE0,
    surface1: colors.GRAY_3,
    surface2: colors.GRAY_4
  },
@@ -86,28 +103,28 @@ const darkTheme = {
      lg: '10px',
      xl: '12px'
    },
-    border2: colors.GRAY_4,
-    border1: colors.GRAY_3,
-    border0: colors.GRAY_2
+    border2: palette.border.BORDER2,
+    border1: palette.border.BORDER1,
+    border0: palette.border.BORDER0
  },

  colors: {
    text: {
-      white: colors.WHITE,
-      green: colors.GREEN,
-      danger: '#f06f57',
-      warning: '#f57c00',
-      muted: colors.TEXT_MUTED,
-      purple: '#cd56d6',
-      yellow: colors.YELLOW,
-      subtext2: colors.GRAY_6,
-      subtext1: colors.GRAY_5,
-      subtext0: colors.GRAY_4
+      white: palette.text.BASE,
+      green: palette.accents.GREEN,
+      danger: palette.accents.RED,
+      warning: palette.accents.ORANGE,
+      muted: palette.text.SUBTEXT1,
+      purple: palette.accents.PURPLE,
+      yellow: palette.accents.YELLOW,
+      subtext2: palette.text.SUBTEXT2,
+      subtext1: palette.text.SUBTEXT1,
+      subtext0: palette.text.SUBTEXT0
    },
    bg: {
      danger: '#d03544'
    },
-    accent: colors.BRAND
+    accent: palette.accents.PRIMARY
  },

  input: {
@@ -121,48 +138,44 @@ const darkTheme = {
  },

  sidebar: {
-    color: '#ccc',
-    muted: '#9d9d9d',
-    bg: colors.BG,
+    color: palette.text.BASE,
+    muted: palette.text.SUBTEXT1,
+    bg: palette.background.BASE,
    dragbar: {
-      border: colors.GRAY_2,
-      activeBorder: colors.GRAY_4
-    },
-
-    search: {
-      border: '1px solid transparent',
-      bg: colors.GRAY_2
+      border: palette.border.BORDER1,
+      activeBorder: palette.border.BORDER2
    },

    collection: {
      item: {
-        bg: '#37373D',
-        hoverBg: '#2A2D2F',
-        focusBorder: '#4e4e4e',
-        indentBorder: 'solid 1px #585858',
+        bg: palette.background.SURFACE0,
+        hoverBg: palette.background.SURFACE0,
+        focusBorder: palette.border.BORDER2,
+        indentBorder: `solid 1px ${palette.border.BORDER1}`,
        active: {
          indentBorder: 'solid 1px #4c4c4c'
        },
        example: {
-          iconColor: colors.GRAY_5
+          iconColor: palette.text.BASE
        }
      }
    },

    dropdownIcon: {
-      color: '#ccc'
+      color: palette.text.BASE
    }
  },

  dropdown: {
-    color: 'rgb(204, 204, 204)',
-    iconColor: 'rgb(204, 204, 204)',
-    bg: 'rgb(48, 48, 49)',
-    hoverBg: '#6A6A6A29',
-    shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
-    separator: '#444',
-    selectedColor: '#d9a342',
-    mutedText: '#9B9B9B'
+    color: palette.text.BASE,
+    iconColor: palette.text.SUBTEXT2,
+    bg: palette.background.MANTLE,
+    hoverBg: palette.background.SURFACE1,
+    shadow: 'none',
+    border: palette.border.BORDER1,
+    separator: palette.border.BORDER1,
+    selectedColor: palette.accents.PRIMARY,
+    mutedText: palette.text.SUBTEXT1
  },

  workspace: {
@@ -175,35 +188,35 @@ const darkTheme = {

  request: {
    methods: {
-      get: '#5fbf7a', // Fresh jade — readable, calm success tone
-      post: 'hsl(270 49% 74% / 1)', // Soft amethyst — cool, composed accent
-      put: '#d7a35a', // Warm amber-bronze — bridges BRAND + STRING
-      delete: '#e06c75', // VSCode red — destructive but readable
-      patch: '#d7a35a', // Same as PUT
-      options: '#c8b072', // Muted olive-gold — neutral method
-      head: '#9da5b4' // Cool gray-blue — subtle, low priority
+      get: palette.accents.GREEN,
+      post: palette.accents.INDIGO,
+      put: palette.accents.ORANGE,
+      delete: palette.accents.RED,
+      patch: palette.accents.ORANGE,
+      options: palette.accents.TEAL,
+      head: palette.accents.CYAN
    },

-    grpc: '#5fb3c4', // Steel cyan — technical, protocol-heavy, calm
-    ws: '#d9a342', // Brand gold — perfect as-is
-    gql: '#c96ab1' // Softened GraphQL pink — less neon, still iconic
+    grpc: palette.accents.BROWN,
+    ws: palette.accents.ORANGE,
+    gql: palette.accents.PINK
  },

  requestTabPanel: {
    url: {
-      bg: colors.BG,
+      bg: palette.background.BASE,
      icon: 'rgb(204, 204, 204)',
      iconDanger: '#fa5343',
-      border: `solid 1px ${colors.GRAY_3}`
+      border: `solid 1px ${palette.border.BORDER1}`
    },
    dragbar: {
-      border: '#444',
-      activeBorder: '#8a8a8a'
+      border: palette.border.BORDER1,
+      activeBorder: palette.border.BORDER2
    },
    responseStatus: '#ccc',
-    responseOk: '#8cd656',
-    responseError: '#f06f57',
-    responsePending: '#569cd6',
+    responseOk: palette.accents.GREEN,
+    responseError: palette.accents.RED,
+    responsePending: palette.accents.BLUE,
    responseOverlayBg: 'rgba(30, 30, 30, 0.6)',

    card: {
@@ -235,12 +248,12 @@ const darkTheme = {

  modal: {
    title: {
-      color: '#ccc',
-      bg: 'rgb(38, 38, 39)'
+      color: palette.text.BASE,
+      bg: palette.background.BASE
    },
    body: {
-      color: '#ccc',
-      bg: 'rgb(48, 48, 49)'
+      color: palette.text.BASE,
+      bg: palette.background.MANTLE
    },
    input: {
      bg: 'rgb(65, 65, 65)',
@@ -279,29 +292,29 @@ const darkTheme = {
  button2: {
    color: {
      primary: {
-        bg: colors.BRAND,
-        text: colors.BLACK,
-        border: colors.BRAND
+        bg: palette.accents.PRIMARY,
+        text: palette.utility.BLACK,
+        border: palette.accents.PRIMARY
      },
      secondary: {
-        bg: '#2a2a2a',
-        text: 'hsl(39 67% 64% / 1)',
-        border: '#3a3a3a'
+        bg: palette.background.MANTLE,
+        text: palette.text.BASE,
+        border: palette.border.BORDER1
      },
      success: {
-        bg: '#059669',
-        text: '#fff',
-        border: '#059669'
+        bg: palette.accents.GREEN,
+        text: palette.utility.WHITE,
+        border: palette.accents.GREEN
      },
      warning: {
-        bg: '#f59e0b',
+        bg: palette.accents.ORANGE,
        text: '#1e1e1e',
-        border: '#f59e0b'
+        border: palette.accents.ORANGE
      },
      danger: {
-        bg: '#f43f5e',
-        text: '#fff',
-        border: '#f43f5e'
+        bg: palette.accents.RED,
+        text: palette.utility.WHITE,
+        border: palette.accents.RED
      }
    }
  },
@@ -326,9 +339,9 @@ const darkTheme = {
  },

  requestTabs: {
-    color: '#ccc',
-    bg: '#2A2D2F',
-    bottomBorder: '#444',
+    color: palette.text.BASE,
+    bg: palette.background.SURFACE0,
+    bottomBorder: palette.border.BORDER2,
    icon: {
      color: '#9f9f9f',
      hoverColor: 'rgb(204, 204, 204)',
@@ -338,22 +351,22 @@ const darkTheme = {
      iconColor: colors.GRAY_5
    },
    shortTab: {
-      color: '#ccc',
+      color: palette.text.BASE,
      bg: 'transparent',
-      hoverColor: '#ccc',
+      hoverColor: palette.text.BASE,
      hoverBg: colors.GRAY_3
    }
  },

  codemirror: {
-    bg: colors.BG,
-    border: colors.BG,
+    bg: palette.background.BASE,
+    border: palette.background.BASE,
    placeholder: {
      color: '#a2a2a2',
      opacity: 0.5
    },
    gutter: {
-      bg: colors.BG
+      bg: palette.background.BASE
    },
    variable: {
      valid: 'rgb(11 178 126)',
@@ -372,15 +385,15 @@ const darkTheme = {
      }
    },
    tokens: {
-      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
-      property: colors.CODEMIRROR_TOKENS.PROPERTY,
-      string: colors.CODEMIRROR_TOKENS.STRING,
-      number: colors.CODEMIRROR_TOKENS.NUMBER,
-      atom: colors.CODEMIRROR_TOKENS.ATOM,
-      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
-      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
-      comment: colors.CODEMIRROR_TOKENS.COMMENT,
-      operator: colors.CODEMIRROR_TOKENS.OPERATOR
+      definition: palette.accents.GREEN,
+      property: palette.accents.BLUE,
+      string: palette.accents.BROWN,
+      number: palette.accents.GREEN,
+      atom: palette.accents.YELLOW,
+      variable: palette.accents.ROSE,
+      keyword: palette.accents.ROSE,
+      comment: palette.text.SUBTEXT1,
+      operator: palette.accents.BROWN
    },
    searchLineHighlightCurrent: 'rgba(120,120,120,0.18)',
    searchMatch: '#FFD700',
@@ -444,7 +457,7 @@ const darkTheme = {
    optionHoverBg: 'rgba(255, 255, 255, 0.05)',
    optionLabelColor: '#cccccc',
    optionCountColor: '#858585',
-    checkboxColor: colors.BRAND,
+    checkboxColor: palette.accents.PRIMARY,
    scrollbarTrack: '#2d2d30',
    scrollbarThumb: '#5a5a5a',
    scrollbarThumbHover: '#6a6a6a'
@@ -468,9 +481,9 @@ const darkTheme = {
    },
    importPaths: {
      header: {
-        text: '#9d9d9d',
+        text: palette.text.SUBTEXT1,
        button: {
-          color: '#9d9d9d',
+          color: palette.text.SUBTEXT1,
          hoverColor: '#d4d4d4'
        }
      },
@@ -486,7 +499,7 @@ const darkTheme = {
        bg: 'transparent',
        hoverBg: 'rgba(255, 255, 255, 0.05)',
        text: '#d4d4d4',
-        icon: '#9d9d9d',
+        icon: palette.text.SUBTEXT1,
        checkbox: {
          color: '#d4d4d4'
        },
@@ -496,7 +509,7 @@ const darkTheme = {
        }
      },
      empty: {
-        text: '#9d9d9d'
+        text: palette.text.SUBTEXT1
      },
      button: {
        bg: '#185387',
@@ -507,9 +520,9 @@ const darkTheme = {
    },
    protoFiles: {
      header: {
-        text: '#9d9d9d',
+        text: palette.text.SUBTEXT1,
        button: {
-          color: '#9d9d9d',
+          color: palette.text.SUBTEXT1,
          hoverColor: '#d4d4d4'
        }
      },
@@ -529,15 +542,15 @@ const darkTheme = {
          border: '#d9a342'
        },
        text: '#d4d4d4',
-        secondaryText: '#9d9d9d',
-        icon: '#9d9d9d',
+        secondaryText: palette.text.SUBTEXT1,
+        icon: palette.text.SUBTEXT1,
        invalid: {
          opacity: 0.6,
          text: '#f06f57'
        }
      },
      empty: {
-        text: '#9d9d9d'
+        text: palette.text.SUBTEXT1
      },
      button: {
        bg: '#185387',
@@ -554,12 +567,6 @@ const darkTheme = {
    text: '#B8B8B8'
  },

-  preferences: {
-    sidebar: {
-      border: '#444444'
-    }
-  },
-
  examples: {
    buttonBg: '#d9a3421A',
    buttonColor: '#d9a342',
@@ -585,31 +592,31 @@ const darkTheme = {
    collection: {
      toolbar: {
        environmentSelector: {
-          bg: colors.BG,
+          bg: palette.background.BASE,
          border: colors.GRAY_3,
-          icon: colors.BRAND,
-          text: colors.TEXT,
-          caret: colors.TEXT_MUTED,
+          icon: palette.accents.PRIMARY,
+          text: palette.text.BASE,
+          caret: palette.text.SUBTEXT1,
          separator: colors.GRAY_3,
-          hoverBg: colors.BG,
+          hoverBg: palette.background.BASE,
          hoverBorder: colors.GRAY_4,

          noEnvironment: {
-            text: colors.TEXT_MUTED,
-            bg: colors.BG,
+            text: palette.text.SUBTEXT1,
+            bg: palette.background.BASE,
            border: colors.GRAY_3,
-            hoverBg: colors.BG,
+            hoverBg: palette.background.BASE,
            hoverBorder: colors.GRAY_4
          }
        },
        sandboxMode: {
          safeMode: {
            bg: 'rgba(78, 201, 176, 0.12)',
-            color: colors.GREEN
+            color: palette.accents.GREEN
          },
          developerMode: {
            bg: 'rgba(217, 163, 66, 0.11)',
-            color: colors.YELLOW
+            color: palette.accents.YELLOW
          }
        }
      }
--- a/packages/bruno-app/src/themes/dark/nord.js
+++ b/packages/bruno-app/src/themes/dark/nord.js
@@ -147,10 +147,6 @@ const nordTheme = {
      border: colors.NORD2,
      activeBorder: colors.NORD3
    },
-    search: {
-      border: '1px solid transparent',
-      bg: colors.NORD1
-    },
    collection: {
      item: {
        bg: colors.NORD1,
@@ -175,7 +171,8 @@ const nordTheme = {
    iconColor: colors.NORD4,
    bg: colors.NORD1,
    hoverBg: colors.NORD2,
-    shadow: 'rgba(0, 0, 0, 0.3) 0px 2px 8px',
+    shadow: 'none',
+    border: colors.NORD3,
    separator: colors.NORD3,
    selectedColor: colors.NORD8,
    mutedText: colors.TEXT_MUTED
@@ -570,12 +567,6 @@ const nordTheme = {
    text: colors.NORD4
  },

-  preferences: {
-    sidebar: {
-      border: colors.NORD3
-    }
-  },
-
  examples: {
    buttonBg: 'rgba(136, 192, 208, 0.1)',
    buttonColor: colors.BRAND,
--- a/packages/bruno-app/src/themes/dark/vscode.js
+++ b/packages/bruno-app/src/themes/dark/vscode.js
@@ -149,10 +149,6 @@ const vscodeDarkTheme = {
      border: colors.BORDER_LIGHT,
      activeBorder: colors.GRAY_5
    },
-    search: {
-      border: '1px solid transparent',
-      bg: colors.GRAY_2
-    },
    collection: {
      item: {
        bg: colors.GRAY_2,
@@ -177,7 +173,8 @@ const vscodeDarkTheme = {
    iconColor: colors.TEXT,
    bg: colors.SIDEBAR_BG,
    hoverBg: colors.GRAY_3,
-    shadow: 'rgba(0, 0, 0, 0.36) 0px 2px 8px',
+    shadow: 'none',
+    border: colors.BORDER,
    separator: colors.BORDER,
    selectedColor: colors.TEXT_LINK,
    mutedText: colors.TEXT_MUTED
@@ -572,12 +569,6 @@ const vscodeDarkTheme = {
    text: colors.TEXT
  },

-  preferences: {
-    sidebar: {
-      border: colors.BORDER
-    }
-  },
-
  examples: {
    buttonBg: 'rgba(0, 122, 204, 0.15)',
    buttonColor: colors.TEXT_LINK,
--- a/packages/bruno-app/src/themes/light/catppuccin-latte.js
+++ b/packages/bruno-app/src/themes/light/catppuccin-latte.js
@@ -141,11 +141,6 @@ const catppuccinLatteTheme = {
      activeBorder: colors.SURFACE2
    },

-    search: {
-      border: `1px solid ${colors.SURFACE1}`,
-      bg: colors.BASE
-    },
-
    collection: {
      item: {
        bg: colors.SURFACE0,
@@ -172,6 +167,7 @@ const catppuccinLatteTheme = {
    bg: colors.BASE,
    hoverBg: colors.SURFACE0,
    shadow: 'rgba(76, 79, 105, 0.25) 0px 6px 12px -2px, rgba(76, 79, 105, 0.3) 0px 3px 7px -3px',
+    border: 'none',
    separator: colors.SURFACE1,
    selectedColor: colors.MAUVE,
    mutedText: colors.SUBTEXT0
@@ -564,12 +560,6 @@ const catppuccinLatteTheme = {
    text: colors.TEXT
  },

-  preferences: {
-    sidebar: {
-      border: colors.SURFACE1
-    }
-  },
-
  examples: {
    buttonBg: 'rgba(136, 57, 239, 0.1)',
    buttonColor: colors.MAUVE,
--- a/packages/bruno-app/src/themes/light/light-monochrome.js
+++ b/packages/bruno-app/src/themes/light/light-monochrome.js
@@ -129,11 +129,6 @@ const lightMonochromeTheme = {
      activeBorder: colors.GRAY_5
    },

-    search: {
-      border: '1px solid rgb(211 211 211)',
-      bg: '#fff'
-    },
-
    collection: {
      item: {
        bg: colors.GRAY_3,
@@ -160,6 +155,7 @@ const lightMonochromeTheme = {
    bg: '#fff',
    hoverBg: '#e9ecef',
    shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
+    border: 'none',
    separator: '#e7e7e7',
    selectedColor: '#525252',
    mutedText: '#9B9B9B'
@@ -551,12 +547,6 @@ const lightMonochromeTheme = {
    text: '#343434'
  },

-  preferences: {
-    sidebar: {
-      border: '#EFEFEF'
-    }
-  },
-
  examples: {
    buttonBg: '#5252521A',
    buttonColor: '#525252',
--- a/packages/bruno-app/src/themes/light/light-pastel.js
+++ b/packages/bruno-app/src/themes/light/light-pastel.js
@@ -146,10 +146,6 @@ const lightPastelTheme = {
      border: colors.GRAY_4,
      activeBorder: colors.BRAND
    },
-    search: {
-      border: `1px solid ${colors.GRAY_4}`,
-      bg: colors.WHITE
-    },
    collection: {
      item: {
        bg: colors.GRAY_2,
@@ -175,6 +171,7 @@ const lightPastelTheme = {
    bg: colors.GRAY_1,
    hoverBg: colors.GRAY_2,
    shadow: 'rgba(0, 0, 0, 0.15) 0px 6px 16px -2px, rgba(0, 0, 0, 0.1) 0px 3px 8px -3px',
+    border: 'none',
    separator: colors.GRAY_3,
    selectedColor: colors.BRAND,
    mutedText: colors.GRAY_6
@@ -569,12 +566,6 @@ const lightPastelTheme = {
    text: colors.TEXT
  },

-  preferences: {
-    sidebar: {
-      border: colors.GRAY_3
-    }
-  },
-
  examples: {
    buttonBg: `${colors.BRAND}15`,
    buttonColor: colors.BRAND,
--- a/packages/bruno-app/src/themes/light/light.js
+++ b/packages/bruno-app/src/themes/light/light.js
@@ -1,4 +1,4 @@
-const palette = {
+export const palette = {
  accents: {
    PRIMARY: '#bd7a28',
    RED: 'hsl(8 60% 52%)', // warm coral - NEW
@@ -157,15 +157,10 @@ const lightTheme = {
      activeBorder: palette.background.SURFACE2
    },

-    search: {
-      border: `1px solid ${palette.border.BORDER2}`,
-      bg: palette.utility.WHITE
-    },
-
    collection: {
      item: {
-        bg: palette.background.SURFACE0,
-        hoverBg: palette.background.SURFACE0,
+        bg: palette.background.SURFACE1,
+        hoverBg: palette.background.SURFACE1,
        focusBorder: palette.border.BORDER2,
        indentBorder: `solid 1px ${palette.border.BORDER1}`,
        active: {
@@ -187,7 +182,8 @@ const lightTheme = {
    iconColor: palette.text.SUBTEXT2,
    bg: palette.utility.WHITE,
    hoverBg: palette.background.CRUST,
-    shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
+    shadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05)',
+    border: 'none',
    separator: palette.border.BORDER1,
    selectedColor: palette.accents.PRIMARY,
    mutedText: palette.text.SUBTEXT0
@@ -579,12 +575,6 @@ const lightTheme = {
    text: palette.text.BASE
  },

-  preferences: {
-    sidebar: {
-      border: palette.border.BORDER0
-    }
-  },
-
  examples: {
    buttonBg: '#D977061A',
    buttonColor: '#D97706',
--- a/packages/bruno-app/src/themes/light/vscode.js
+++ b/packages/bruno-app/src/themes/light/vscode.js
@@ -150,10 +150,6 @@ const vscodeLightTheme = {
      border: colors.BORDER,
      activeBorder: colors.GRAY_5
    },
-    search: {
-      border: `1px solid ${colors.BORDER_DARK}`,
-      bg: colors.WHITE
-    },
    collection: {
      item: {
        bg: colors.GRAY_2,
@@ -179,6 +175,7 @@ const vscodeLightTheme = {
    bg: colors.WHITE,
    hoverBg: colors.GRAY_2,
    shadow: 'rgba(0, 0, 0, 0.16) 0px 6px 12px -2px, rgba(0, 0, 0, 0.1) 0px 3px 7px -3px',
+    border: 'none',
    separator: colors.BORDER,
    selectedColor: colors.BRAND,
    mutedText: colors.TEXT_MUTED
@@ -573,12 +570,6 @@ const vscodeLightTheme = {
    text: colors.TEXT
  },

-  preferences: {
-    sidebar: {
-      border: colors.BORDER
-    }
-  },
-
  examples: {
    buttonBg: 'rgba(0, 122, 204, 0.1)',
    buttonColor: colors.BRAND,
--- a/packages/bruno-app/src/themes/schema/oss.js
+++ b/packages/bruno-app/src/themes/schema/oss.js
@@ -165,15 +165,6 @@ export const ossSchema = {
          required: ['border', 'activeBorder'],
          additionalProperties: false
        },
-        search: {
-          type: 'object',
-          properties: {
-            border: { type: 'string' },
-            bg: { type: 'string' }
-          },
-          required: ['border', 'bg'],
-          additionalProperties: false
-        },
        collection: {
          type: 'object',
          properties: {
@@ -217,7 +208,7 @@ export const ossSchema = {
          additionalProperties: false
        }
      },
-      required: ['color', 'muted', 'bg', 'dragbar', 'search', 'collection', 'dropdownIcon'],
+      required: ['color', 'muted', 'bg', 'dragbar', 'collection', 'dropdownIcon'],
      additionalProperties: false
    },

@@ -228,12 +219,13 @@ export const ossSchema = {
        iconColor: { type: 'string' },
        bg: { type: 'string' },
        hoverBg: { type: 'string' },
-        shadow: { type: 'string' },
+        shadow: { type: 'string', description: 'Box shadow. Use "none" for no shadow.' },
        separator: { type: 'string' },
        selectedColor: { type: 'string' },
-        mutedText: { type: 'string' }
+        mutedText: { type: 'string' },
+        border: { type: 'string', description: 'Border color. Use "none" for no border.' }
      },
-      required: ['color', 'iconColor', 'bg', 'hoverBg', 'shadow', 'separator', 'selectedColor', 'mutedText'],
+      required: ['color', 'iconColor', 'bg', 'hoverBg', 'shadow', 'separator', 'selectedColor', 'mutedText', 'border'],
      additionalProperties: false
    },

@@ -1026,22 +1018,6 @@ export const ossSchema = {
      additionalProperties: false
    },

-    preferences: {
-      type: 'object',
-      properties: {
-        sidebar: {
-          type: 'object',
-          properties: {
-            border: { type: 'string' }
-          },
-          required: ['border'],
-          additionalProperties: false
-        }
-      },
-      required: ['sidebar'],
-      additionalProperties: false
-    },
-
    examples: {
      type: 'object',
      properties: {
@@ -1167,7 +1143,7 @@ export const ossSchema = {
    'sidebar', 'dropdown', 'workspace', 'request',
    'requestTabPanel', 'notifications', 'modal', 'button', 'button2', 'tabs',
    'requestTabs', 'codemirror', 'table', 'plainGrid', 'scrollbar', 'dragAndDrop',
-    'infoTip', 'statusBar', 'console', 'grpc', 'deprecationWarning', 'preferences', 'examples', 'app'
+    'infoTip', 'statusBar', 'console', 'grpc', 'deprecationWarning', 'examples', 'app'
  ],
  additionalProperties: false
 };