From 8f6cf07e82f13b57f2904d8f823e72660730caa8 Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Wed, 10 Nov 2021 16:27:12 +0530 Subject: [PATCH] feat: more syntax hightlight colors --- .../hoppscotch-app/assets/scss/themes.scss | 42 +++++++++---------- .../helpers/editor/themes/baseTheme.ts | 23 +++++----- 2 files changed, 33 insertions(+), 32 deletions(-) diff --git a/packages/hoppscotch-app/assets/scss/themes.scss b/packages/hoppscotch-app/assets/scss/themes.scss index 077e5b5a..db587efd 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.purple.800"); + --editor-type-color: theme("colors.purple.500"); --editor-name-color: theme("colors.blue.500"); - --editor-operator-color: theme("colors.indigo.600"); + --editor-operator-color: theme("colors.indigo.500"); --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.green.500"); --editor-link-color: theme("colors.cyan.500"); --editor-process-color: theme("colors.gray.400"); - --editor-constant-color: theme("colors.indigo.500"); + --editor-constant-color: theme("colors.fuchsia.500"); --editor-keyword-color: theme("colors.pink.500"); } @mixin light-editor-theme { - --editor-type-color: theme("colors.purple.800"); + --editor-type-color: theme("colors.purple.600"); --editor-name-color: theme("colors.red.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.green.500"); - --editor-link-color: theme("colors.cyan.500"); + --editor-invalid-color: theme("colors.red.600"); + --editor-separator-color: theme("colors.gray.600"); + --editor-meta-color: theme("colors.gray.600"); + --editor-variable-color: theme("colors.green.600"); + --editor-link-color: theme("colors.cyan.600"); --editor-process-color: theme("colors.blue.600"); - --editor-constant-color: theme("colors.indigo.500"); - --editor-keyword-color: theme("colors.pink.500"); + --editor-constant-color: theme("colors.fuchsia.600"); + --editor-keyword-color: theme("colors.pink.600"); } @mixin black-editor-theme { - --editor-type-color: theme("colors.purple.800"); + --editor-type-color: theme("colors.purple.400"); --editor-name-color: theme("colors.gray.400"); - --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.green.500"); - --editor-link-color: theme("colors.cyan.500"); - --editor-process-color: theme("colors.blue.500"); - --editor-constant-color: theme("colors.indigo.500"); - --editor-keyword-color: theme("colors.pink.500"); + --editor-operator-color: theme("colors.indigo.400"); + --editor-invalid-color: theme("colors.red.400"); + --editor-separator-color: theme("colors.gray.400"); + --editor-meta-color: theme("colors.gray.400"); + --editor-variable-color: theme("colors.green.400"); + --editor-link-color: theme("colors.cyan.400"); + --editor-process-color: theme("colors.blue.400"); + --editor-constant-color: theme("colors.fuchsia.400"); + --editor-keyword-color: theme("colors.pink.400"); } @mixin green-theme { diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts index 7d6dd522..46c9e7e9 100644 --- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts +++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts @@ -11,14 +11,13 @@ export const baseTheme = EditorView.theme({ fontFamily: "var(--font-mono)", backgroundColor: "var(--primary-color)", }, - ".cm-focused .cm-cursor": { - borderLeftColor: "var(--secondary-light-color)", + ".cm-cursor": { + borderColor: "var(--secondary-color)", + }, + ".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": { + backgroundColor: "var(--accent-dark-color)", + color: "var(--accent-contrast-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-light-color)", color: "var(--secondary-light-color)", @@ -41,14 +40,15 @@ export const baseTheme = EditorView.theme({ }, ".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": { - backgroundColor: "var(--accent-dark-color)", + ".cm-selectionMatch": { outline: "1px solid var(--accent-dark-color)", }, + ".cm-matchingBracket, .cm-nonmatchingBracket": { + backgroundColor: "var(--accent-dark-color)", + color: "var(--accent-contrast-color)", + }, ".cm-gutters": { fontFamily: "var(--font-mono)", backgroundColor: "var(--primary-color)", @@ -68,6 +68,7 @@ export const baseTheme = EditorView.theme({ ".cm-line": { paddingLeft: "0.5em", paddingRight: "0.5em", + color: "var(--secondary-dark-color)", }, ".cm-activeLineGutter": { backgroundColor: "var(--primary-dark-color)",