From c83c0556540dc197cb895b462b6e6f532772a9a4 Mon Sep 17 00:00:00 2001
From: Bijin A B <bijin@usebruno.com>
Date: Sat, 3 Jan 2026 00:08:14 +0530
Subject: [PATCH] chore: theme updates (#6642)

---
 .../StatusBar/ThemeDropdown/StyledWrapper.js           |  3 ++-
 packages/bruno-app/src/themes/dark/catppuccin-mocha.js |  6 +++---
 packages/bruno-app/src/themes/dark/dark.js             |  6 +++---
 .../bruno-app/src/themes/light/catppuccin-latte.js     | 10 +++++-----
 packages/bruno-app/src/themes/light/light-pastel.js    |  2 +-
 5 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js b/packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js
index b6c40288a..8c5ae5023 100644
--- a/packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js
@@ -8,8 +8,9 @@ const StyledWrapper = styled.div`
     height: 325px;
     padding: 8px;
     background: ${(props) => props.theme.dropdown.bg};
+    border: 1px solid ${(props) => props.theme.dropdown.border};
     border-radius: 6px;
-    box-shadow: 0px 1px 4px 0px #0000000D;
+    box-shadow: ${(props) => props.theme.dropdown.shadow};
     outline: none;
 
     &.two-columns {
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
index 6d9f4a0a7..52d4796ac 100644
--- a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
@@ -1,7 +1,7 @@
 // Catppuccin Mocha - Dark Theme (Original)
 // Based on https://catppuccin.com/palette/
 
-import { rgba } from 'polished';
+import { rgba, darken, lighten } from 'polished';
 
 const colors = {
   // Catppuccin Mocha Palette
@@ -208,11 +208,11 @@ const catppuccinMochaTheme = {
   dropdown: {
     color: colors.TEXT,
     iconColor: colors.SUBTEXT1,
-    bg: colors.SURFACE0,
+    bg: lighten(0.03, colors.BASE),
     hoverBg: 'rgba(108, 112, 134, 0.16)',
     shadow: 'none',
     border: rgba(colors.SURFACE1, 0.5),
-    separator: colors.SURFACE1,
+    separator: rgba(colors.SURFACE1, 0.5),
     selectedColor: colors.MAUVE,
     mutedText: colors.SUBTEXT0
   },
diff --git a/packages/bruno-app/src/themes/dark/dark.js b/packages/bruno-app/src/themes/dark/dark.js
index 22e82844d..0721808c4 100644
--- a/packages/bruno-app/src/themes/dark/dark.js
+++ b/packages/bruno-app/src/themes/dark/dark.js
@@ -220,7 +220,7 @@ const darkTheme = {
     collection: {
       item: {
         bg: palette.background.SURFACE0,
-        hoverBg: palette.background.SURFACE0,
+        hoverBg: palette.background.MANTLE,
         focusBorder: palette.border.BORDER2,
         indentBorder: `solid 1px ${palette.border.BORDER1}`,
         active: {
@@ -240,8 +240,8 @@ const darkTheme = {
   dropdown: {
     color: palette.text.BASE,
     iconColor: palette.text.SUBTEXT2,
-    bg: palette.background.MANTLE,
-    hoverBg: palette.background.SURFACE1,
+    bg: palette.background.CRUST,
+    hoverBg: palette.background.MANTLE,
     shadow: 'none',
     border: palette.border.BORDER1,
     separator: palette.border.BORDER1,
diff --git a/packages/bruno-app/src/themes/light/catppuccin-latte.js b/packages/bruno-app/src/themes/light/catppuccin-latte.js
index 188d4964d..60fdb7ddc 100644
--- a/packages/bruno-app/src/themes/light/catppuccin-latte.js
+++ b/packages/bruno-app/src/themes/light/catppuccin-latte.js
@@ -167,7 +167,7 @@ const catppuccinLatteTheme = {
   },
 
   input: {
-    bg: colors.SURFACE0,
+    bg: rgba(colors.SURFACE0, 0.2),
     border: colors.SURFACE1,
     focusBorder: colors.LAVENDER,
     placeholder: {
@@ -187,8 +187,8 @@ const catppuccinLatteTheme = {
 
     collection: {
       item: {
-        bg: colors.SURFACE0,
-        hoverBg: colors.SURFACE1,
+        bg: rgba(colors.SURFACE0, 0.5),
+        hoverBg: rgba(colors.SURFACE0, 0.7),
         focusBorder: colors.LAVENDER,
         indentBorder: `solid 1px ${colors.SURFACE1}`,
         active: {
@@ -209,7 +209,7 @@ const catppuccinLatteTheme = {
     color: colors.TEXT,
     iconColor: colors.SUBTEXT1,
     bg: colors.BASE,
-    hoverBg: colors.SURFACE0,
+    hoverBg: rgba(colors.SURFACE0, 0.5),
     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,
@@ -381,7 +381,7 @@ const catppuccinLatteTheme = {
 
   requestTabs: {
     color: colors.TEXT,
-    bg: colors.SURFACE0,
+    bg: '#E4E7EC',
     bottomBorder: colors.SURFACE1,
     icon: {
       color: colors.OVERLAY0,
diff --git a/packages/bruno-app/src/themes/light/light-pastel.js b/packages/bruno-app/src/themes/light/light-pastel.js
index 61f0125f0..a5b0f8fe0 100644
--- a/packages/bruno-app/src/themes/light/light-pastel.js
+++ b/packages/bruno-app/src/themes/light/light-pastel.js
@@ -192,7 +192,7 @@ const lightPastelTheme = {
     collection: {
       item: {
         bg: colors.GRAY_2,
-        hoverBg: colors.GRAY_3,
+        hoverBg: rgba(colors.GRAY_3, 0.5),
         focusBorder: colors.BRAND,
         indentBorder: `solid 1px ${colors.GRAY_4}`,
         active: {