From 708e88241f34140cb650517ddc1c58c31ee1c4f9 Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Fri, 27 Mar 2026 18:13:08 +0530
Subject: [PATCH] style: update CodeMirror bracket highlighting in
 StyledWrapper components (#7596)

- Enhanced the styling for matching and non-matching brackets in CodeMirror across multiple StyledWrapper components.
- Updated background and text colors to align with the theme for better visibility and user experience.
---
 .../FileEditor/CodeEditor/StyledWrapper.js            | 11 +++++++++++
 .../src/components/CodeEditor/StyledWrapper.js        | 10 ++++++++--
 .../RequestPane/QueryEditor/StyledWrapper.js          | 11 +++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/CodeEditor/StyledWrapper.js
index 5f60a144a..cd62a2730 100644
--- a/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/CodeEditor/StyledWrapper.js
@@ -61,6 +61,17 @@ const StyledWrapper = styled.div`
   .cm-variable-invalid {
     color: ${(props) => props.theme.codemirror.variable.invalid};
   }
+
+  .CodeMirror-matchingbracket {
+    background: ${(props) => props.theme.status.success.background} !important;
+    text-decoration: unset;
+  }
+
+  .CodeMirror-nonmatchingbracket {
+    color: ${(props) => props.theme.colors.text.danger} !important;
+    background: ${(props) => props.theme.status.danger.background} !important;
+    text-decoration: unset;
+  }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
index 314eaf371..b3c5647b4 100644
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -151,8 +151,14 @@ const StyledWrapper = styled.div`
   
   //matching bracket fix
   .CodeMirror-matchingbracket {
-    background: #5cc0b48c !important;
-    text-decoration:unset;
+    background: ${(props) => props.theme.status.success.background} !important;
+    text-decoration: unset;
+  }
+
+  .CodeMirror-nonmatchingbracket {
+    color: ${(props) => props.theme.colors.text.danger} !important;
+    background: ${(props) => props.theme.status.danger.background} !important;
+    text-decoration: unset;
   }
 
   .cm-search-line-highlight {
diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
index df8c80407..097d07fec 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
@@ -67,6 +67,17 @@ const StyledWrapper = styled.div`
   }
 
 
+  .CodeMirror-matchingbracket {
+    background: ${(props) => props.theme.status.success.background} !important;
+    text-decoration: unset;
+  }
+
+  .CodeMirror-nonmatchingbracket {
+    color: ${(props) => props.theme.colors.text.danger} !important;
+    background: ${(props) => props.theme.status.danger.background} !important;
+    text-decoration: unset;
+  }
+
   .CodeMirror-search-hint {
     display: inline;
   }