From 052d143d6e7fe3ea8b72930e682c7524b5dcea04 Mon Sep 17 00:00:00 2001
From: sanish chirayath <sanish@usebruno.com>
Date: Thu, 18 Dec 2025 20:37:59 +0530
Subject: [PATCH] fix: example icon color (#6447)

* fix: example icon color

fix: example color

* fix: indentation

* fix: use gray color from colors for example

* fix:  margin  issues
---
 .../RequestTabs/ExampleTab/index.js           |  4 +-
 .../RequestTabs/RequestTab/StyledWrapper.js   |  4 ++
 .../ExampleItem/StyledWrapper.js              |  5 ++
 .../CollectionItem/ExampleItem/index.js       |  4 +-
 packages/bruno-app/src/themes/dark.js         | 52 ++++++++++++-------
 packages/bruno-app/src/themes/light.js        | 10 ++++
 6 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js b/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
index cf98ad6a7..1ed16ff64 100644
--- a/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
@@ -115,8 +115,8 @@ const ExampleTab = ({ tab, collection }) => {
           }
         }}
       >
-        <ExampleIcon size={14} color="currentColor" className="mr-1.5 text-gray-500 flex-shrink-0" />
-        <span className="tab-name" title={example.name}>
+        <ExampleIcon size={14} color="currentColor" className="example-icon flex-shrink-0" />
+        <span className="tab-name ml-1" title={example.name}>
           {example.name}
         </span>
       </div>
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
index 1ce1ee691..bf4c34b0b 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
@@ -28,6 +28,10 @@ const StyledWrapper = styled.div`
     // so that the name does not cutoff when italicized
     padding-right: 2px;
   }
+
+  .example-icon {
+    color: ${(props) => props.theme.requestTabs.example.iconColor};
+  }
 `;
 
 export default StyledWrapper;
diff --git 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
index 4632e6d3a..8a5465413 100644
--- 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
@@ -49,6 +49,11 @@ const StyledWrapper = styled.div`
       }
     }
   }
+
+  .example-icon {
+    color: ${(props) => props.theme.sidebar.collection.item.example.iconColor};
+  }
+
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
index 2f0fb1dfe..f7a23b0d9 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
@@ -198,8 +198,8 @@ const ExampleItem = ({ example, item, collection }) => {
         style={{ paddingLeft: 8 }}
       >
         <div style={{ width: 16, minWidth: 16 }}></div>
-        <ExampleIcon size={16} color="currentColor" className="mr-2 text-gray-400 flex-shrink-0" />
-        <span className="item-name truncate text-gray-700 dark:text-gray-300 ">{example.name}</span>
+        <ExampleIcon size={16} color="currentColor" className="example-icon mr-1 flex-shrink-0" />
+        <span className="item-name truncate">{example.name}</span>
       </div>
       <div className="menu-icon pr-2">
         <MenuDropdown
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
index 70f568938..95b886cb6 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -8,10 +8,16 @@ const colors = {
   GREEN: '#4ec9b0',
   YELLOW: '#d9a342',
 
-  GRAY_1: '#666666',
-  GRAY_2: '#444444',
-  GRAY_3: '#3D3D3D',
-  GRAY_4: '#252526',
+  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
@@ -101,19 +107,19 @@ const darkTheme = {
   sidebar: {
     color: '#ccc',
     muted: '#9d9d9d',
-    bg: colors.GRAY_4,
+    bg: colors.GRAY_1,
     dragbar: {
       border: 'transparent',
-      activeBorder: colors.GRAY_1
+      activeBorder: colors.GRAY_4
     },
 
     badge: {
-      bg: colors.GRAY_3
+      bg: colors.GRAY_2
     },
 
     search: {
       border: '1px solid transparent',
-      bg: colors.GRAY_3
+      bg: colors.GRAY_2
     },
 
     collection: {
@@ -124,6 +130,9 @@ const darkTheme = {
         indentBorder: 'solid 1px #585858',
         active: {
           indentBorder: 'solid 1px #4c4c4c'
+        },
+        example: {
+          iconColor: colors.GRAY_5
         }
       }
     },
@@ -182,7 +191,7 @@ const darkTheme = {
       indentBorder: 'solid 1px #313131',
       activeBg: '#37373c',
       search: {
-        bg: colors.GRAY_3
+        bg: colors.GRAY_2
       }
     }
   },
@@ -209,7 +218,7 @@ const darkTheme = {
       icon: 'rgb(204, 204, 204)',
       iconDanger: '#fa5343',
       errorHoverBg: '#4a2a2a',
-      border: `solid 1px ${colors.GRAY_2}`
+      border: `solid 1px ${colors.GRAY_3}`
     },
     dragbar: {
       border: '#444',
@@ -237,7 +246,7 @@ const darkTheme = {
       bg: '#252526',
       table: {
         thead: {
-          bg: colors.GRAY_3,
+          bg: colors.GRAY_2,
           color: '#ccc'
         }
       }
@@ -250,12 +259,12 @@ const darkTheme = {
 
   collection: {
     environment: {
-      bg: colors.GRAY_3,
+      bg: colors.GRAY_2,
 
       settings: {
-        bg: colors.GRAY_3,
+        bg: colors.GRAY_2,
         sidebar: {
-          bg: colors.GRAY_3,
+          bg: colors.GRAY_2,
           borderRight: '#4f4f4f'
         },
         item: {
@@ -359,8 +368,11 @@ const darkTheme = {
       hoverColor: 'rgb(204, 204, 204)',
       hoverBg: '#1e1e1e'
     },
+    example: {
+      iconColor: colors.GRAY_5
+    },
     active: {
-      bg: colors.GRAY_3
+      bg: colors.GRAY_2
     },
     shortTab: {
       color: '#ccc',
@@ -617,20 +629,20 @@ const darkTheme = {
       toolbar: {
         environmentSelector: {
           bg: colors.BG,
-          border: colors.GRAY_2,
+          border: colors.GRAY_3,
           icon: colors.BRAND,
           text: colors.TEXT,
           caret: colors.TEXT_MUTED,
-          separator: colors.GRAY_2,
+          separator: colors.GRAY_3,
           hoverBg: colors.BG,
-          hoverBorder: colors.GRAY_1,
+          hoverBorder: colors.GRAY_4,
 
           noEnvironment: {
             text: colors.TEXT_MUTED,
             bg: colors.BG,
-            border: colors.GRAY_2,
+            border: colors.GRAY_3,
             hoverBg: colors.BG,
-            hoverBorder: colors.GRAY_1
+            hoverBorder: colors.GRAY_4
           }
         },
         sandboxMode: {
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
index 6f038a70d..310479ca3 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -17,6 +17,10 @@ const colors = {
   GRAY_4: '#e5e5e5',
   GRAY_5: '#cbcbcb',
   GRAY_6: '#b0b0b0',
+  GRAY_7: '#666666',
+  GRAY_8: '#444444',
+  GRAY_9: '#3D3D3D',
+  GRAY_10: '#252526',
 
   CODEMIRROR_TOKENS: {
     DEFINITION: '#566f4e', // Deep moss
@@ -130,6 +134,9 @@ const lightTheme = {
         indentBorder: `solid 1px ${colors.GRAY_4}`,
         active: {
           indentBorder: `solid 1px ${colors.GRAY_4}`
+        },
+        example: {
+          iconColor: colors.GRAY_7
         }
       }
     },
@@ -366,6 +373,9 @@ const lightTheme = {
       hoverColor: 'rgb(76 76 76)',
       hoverBg: 'rgb(234, 234, 234)'
     },
+    example: {
+      iconColor: colors.GRAY_7
+    },
     active: {
       bg: '#e7e7e7'
     },