diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index b3943ddfd..a795b0b47 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -491,3 +491,9 @@ details summary::-webkit-details-marker {
   @apply overflow-auto;
   @apply break-words;
 }
+
+.env-highlight {
+  * {
+    @apply text-accentContrast;
+  }
+}
diff --git a/packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts b/packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts
index 66a1bbd5d..6111a560f 100644
--- a/packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts
+++ b/packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts
@@ -19,10 +19,11 @@ import {
 const HOPP_ENVIRONMENT_REGEX = /(<<\w+>>)/g
 
 const HOPP_ENV_HIGHLIGHT =
-  "cursor-help transition rounded px-1 focus:outline-none mx-0.5"
+  "cursor-help transition rounded px-1 focus:outline-none mx-0.5 env-highlight"
 const HOPP_ENV_HIGHLIGHT_FOUND =
   "bg-accentDark text-accentContrast hover:bg-accent"
-const HOPP_ENV_HIGHLIGHT_NOT_FOUND = "bg-red-400 text-red-50 hover:bg-red-600"
+const HOPP_ENV_HIGHLIGHT_NOT_FOUND =
+  "bg-red-500 text-accentContrast hover:bg-red-600"
 
 const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
   hoverTooltip(