From a967100be85a31b8d91df0291cedd0740750aa8e Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 10 Nov 2021 13:53:10 +0530
Subject: [PATCH] feat: more syntax hightlight colors

---
 .../hoppscotch-app/assets/scss/themes.scss    | 36 +++++++++----------
 .../helpers/editor/themes/baseTheme.ts        | 26 +++++++++++---
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/themes.scss b/packages/hoppscotch-app/assets/scss/themes.scss
index 9b12f5927..077e5b5a3 100644
--- a/packages/hoppscotch-app/assets/scss/themes.scss
+++ b/packages/hoppscotch-app/assets/scss/themes.scss
@@ -53,45 +53,45 @@
 }
 
 @mixin dark-editor-theme {
-  --editor-type-color: theme("colors.gray.800");
+  --editor-type-color: theme("colors.purple.800");
   --editor-name-color: theme("colors.blue.500");
-  --editor-operator-color: theme("colors.gray.600");
+  --editor-operator-color: theme("colors.indigo.600");
   --editor-invalid-color: theme("colors.red.500");
   --editor-separator-color: theme("colors.gray.500");
   --editor-meta-color: theme("colors.gray.500");
-  --editor-variable-color: theme("colors.gray.500");
-  --editor-link-color: theme("colors.blue.500");
+  --editor-variable-color: theme("colors.green.500");
+  --editor-link-color: theme("colors.cyan.500");
   --editor-process-color: theme("colors.gray.400");
-  --editor-constant-color: theme("colors.blue.500");
-  --editor-keyword-color: theme("colors.blue.500");
+  --editor-constant-color: theme("colors.indigo.500");
+  --editor-keyword-color: theme("colors.pink.500");
 }
 
 @mixin light-editor-theme {
-  --editor-type-color: theme("colors.gray.800");
+  --editor-type-color: theme("colors.purple.800");
   --editor-name-color: theme("colors.red.600");
-  --editor-operator-color: theme("colors.gray.600");
+  --editor-operator-color: theme("colors.indigo.600");
   --editor-invalid-color: theme("colors.red.500");
   --editor-separator-color: theme("colors.gray.500");
   --editor-meta-color: theme("colors.gray.500");
-  --editor-variable-color: theme("colors.gray.500");
-  --editor-link-color: theme("colors.blue.500");
+  --editor-variable-color: theme("colors.green.500");
+  --editor-link-color: theme("colors.cyan.500");
   --editor-process-color: theme("colors.blue.600");
-  --editor-constant-color: theme("colors.blue.500");
-  --editor-keyword-color: theme("colors.blue.500");
+  --editor-constant-color: theme("colors.indigo.500");
+  --editor-keyword-color: theme("colors.pink.500");
 }
 
 @mixin black-editor-theme {
-  --editor-type-color: theme("colors.gray.800");
+  --editor-type-color: theme("colors.purple.800");
   --editor-name-color: theme("colors.gray.400");
-  --editor-operator-color: theme("colors.gray.600");
+  --editor-operator-color: theme("colors.indigo.600");
   --editor-invalid-color: theme("colors.red.500");
   --editor-separator-color: theme("colors.gray.500");
   --editor-meta-color: theme("colors.gray.500");
-  --editor-variable-color: theme("colors.gray.500");
-  --editor-link-color: theme("colors.blue.500");
+  --editor-variable-color: theme("colors.green.500");
+  --editor-link-color: theme("colors.cyan.500");
   --editor-process-color: theme("colors.blue.500");
-  --editor-constant-color: theme("colors.blue.500");
-  --editor-keyword-color: theme("colors.blue.500");
+  --editor-constant-color: theme("colors.indigo.500");
+  --editor-keyword-color: theme("colors.pink.500");
 }
 
 @mixin green-theme {
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index c1f5b15e2..7d6dd5224 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -11,13 +11,16 @@ export const baseTheme = EditorView.theme({
     fontFamily: "var(--font-mono)",
     backgroundColor: "var(--primary-color)",
   },
-  "&.cm-focused .cm-cursor": {
+  ".cm-focused .cm-cursor": {
     borderLeftColor: "var(--secondary-light-color)",
   },
-  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-    { backgroundColor: "var(--primary-light-color)" },
+  ".cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content::selection, .cm-line::selection":
+    {
+      backgroundColor: "var(--accent-dark-color)!important",
+      color: "var(--secondary-dark-color)",
+    },
   ".cm-panels": {
-    backgroundColor: "var(--primary-dark-color)",
+    backgroundColor: "var(--primary-light-color)",
     color: "var(--secondary-light-color)",
   },
   ".cm-panels.cm-panels-top": {
@@ -26,13 +29,23 @@ export const baseTheme = EditorView.theme({
   ".cm-panels.cm-panels-bottom": {
     borderTop: "1px solid var(--divider-light-color)",
   },
+  ".cm-textfield": {
+    backgroundColor: "var(--primary-dark-color)",
+    color: "var(--secondary-light-color)",
+  },
+  ".cm-button": {
+    backgroundColor: "var(--primary-dark-color)",
+    color: "var(--secondary-light-color)",
+    backgroundImage: "none",
+    border: "none",
+  },
   ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
   ".cm-searchMatch": {
     backgroundColor: "var(--accent-light-color)",
     outline: "1px solid var(--accent-dark-color)",
   },
   ".cm-selectionMatch": { backgroundColor: "var(--accent-color)" },
-  "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+  ".cm-focused .cm-matchingBracket, .cm-focused .cm-nonmatchingBracket": {
     backgroundColor: "var(--accent-dark-color)",
     outline: "1px solid var(--accent-dark-color)",
   },
@@ -59,6 +72,9 @@ export const baseTheme = EditorView.theme({
   ".cm-activeLineGutter": {
     backgroundColor: "var(--primary-dark-color)",
   },
+  ".cm-scroller::-webkit-scrollbar": {
+    display: "none",
+  },
 })
 
 const editorTypeColor = "var(--editor-type-color)"