diff --git a/src/styles/CustomCM.scss b/src/styles/CustomCM.scss
index 5eee015a..083e2de9 100644
--- a/src/styles/CustomCM.scss
+++ b/src/styles/CustomCM.scss
@@ -142,6 +142,16 @@ taken from https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-
   overflow: hidden !important;
 }
 
+/* highlights matching bracket when user clicks on one of the brackets */
+.CodeMirror-matchingbracket {
+  text-decoration: none;
+
+  @include themify($themes) {
+    background-color: themed("highlightBracket");
+    color: themed('color');
+  }
+}
+
 /* most of the codemirror styles we can override for text
 .cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
 .cm-s-material .cm-operator { color: rgba(233, 237, 237, 1); }
diff --git a/src/styles/Editor.scss b/src/styles/Editor.scss
index ef524ebe..2f752b95 100644
--- a/src/styles/Editor.scss
+++ b/src/styles/Editor.scss
@@ -132,10 +132,7 @@
     background-color: themed("backgroundColor");
   }
 
-  .cm-s-material .CodeMirror-matchingbracket {
-    background-color: rgb(0 255 0 / 40%);
-    text-decoration: none;
-  }
+  
 }
 
 .btn-language-dropdown {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 0cff7d3d..eac7fec8 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -72,6 +72,7 @@ $themes: (
     property: #056d45,
     cursor: #f4ee94,
     selectedLine: $off-white,
+    highlightBracket: rgba(174, 214, 67, 0.4), //$teachla-green but with lower opacity
   ),
   dark: (
     // defaults
@@ -96,6 +97,7 @@ $themes: (
     property: #80cbae,
     cursor: #f4ee94,
     selectedLine: rgba(255, 255, 255, 0.1),
+    highlightBracket: rgba(40, 170, 38, 0.4), //$teachla-secondary-2 but with lower opacity
   ),
 );