diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index c5d8a5d0..491db2ca 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -48,6 +48,7 @@ import * as O from "fp-ts/Option"
 import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
+import baseTheme from "./themes/baseTheme"
 
 type CodeMirrorOptions = {
   extendedEditorConfig: Omit<CodeMirror.EditorConfiguration, "value">
@@ -341,6 +342,7 @@ export function useNewCodemirror(
     doc: value.value,
     extensions: [
       basicSetup,
+      baseTheme,
       ViewPlugin.fromClass(
         class {
           update(update: ViewUpdate) {
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
new file mode 100644
index 00000000..190cf8d7
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -0,0 +1,22 @@
+import { EditorView } from "@codemirror/view"
+
+const baseTheme = EditorView.theme({
+  "&": {
+    fontSize: "var(--body-font-size)",
+  },
+  ".cm-content": {
+    fontFamily: "var(--font-mono)",
+    backgroundColor: "var(--primary-color)",
+  },
+  ".cm-gutters": {
+    fontFamily: "var(--font-mono)",
+    backgroundColor: "var(--primary-color)",
+    borderColor: "var(--divider-light-color)",
+  },
+  ".cm-lineNumbers": {
+    minWidth: "3em",
+    color: "var(--secondary-light-color)",
+  },
+})
+
+export default baseTheme