From be6c802745457ff3ab5be59109dfac34251c06b5 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 8 Nov 2021 17:42:34 +0530
Subject: [PATCH] feat: init base theme for codemirror

---
 .../helpers/editor/codemirror.ts              |  2 ++
 .../helpers/editor/themes/baseTheme.ts        | 22 +++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts

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