btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat: more syntax hightlight colors

Browse Source
This commit is contained in:
liyasthomas
2021-11-10 13:53:10 +05:30
parent a9bca8e1f8
commit a967100be8
2 changed files with 39 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/hoppscotch-app/assets/scss/themes.scss
View File

@@ -53,45 +53,45 @@
} }
@mixin dark-editor-theme { @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-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-invalid-color: theme("colors.red.500");
--editor-separator-color: theme("colors.gray.500"); --editor-separator-color: theme("colors.gray.500");
--editor-meta-color: theme("colors.gray.500"); --editor-meta-color: theme("colors.gray.500");
--editor-variable-color: theme("colors.gray.500"); --editor-variable-color: theme("colors.green.500");
--editor-link-color: theme("colors.blue.500"); --editor-link-color: theme("colors.cyan.500");
--editor-process-color: theme("colors.gray.400"); --editor-process-color: theme("colors.gray.400");
--editor-constant-color: theme("colors.blue.500"); --editor-constant-color: theme("colors.indigo.500");
--editor-keyword-color: theme("colors.blue.500"); --editor-keyword-color: theme("colors.pink.500");
} }
@mixin light-editor-theme { @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-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-invalid-color: theme("colors.red.500");
--editor-separator-color: theme("colors.gray.500"); --editor-separator-color: theme("colors.gray.500");
--editor-meta-color: theme("colors.gray.500"); --editor-meta-color: theme("colors.gray.500");
--editor-variable-color: theme("colors.gray.500"); --editor-variable-color: theme("colors.green.500");
--editor-link-color: theme("colors.blue.500"); --editor-link-color: theme("colors.cyan.500");
--editor-process-color: theme("colors.blue.600"); --editor-process-color: theme("colors.blue.600");
--editor-constant-color: theme("colors.blue.500"); --editor-constant-color: theme("colors.indigo.500");
--editor-keyword-color: theme("colors.blue.500"); --editor-keyword-color: theme("colors.pink.500");
} }
@mixin black-editor-theme { @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-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-invalid-color: theme("colors.red.500");
--editor-separator-color: theme("colors.gray.500"); --editor-separator-color: theme("colors.gray.500");
--editor-meta-color: theme("colors.gray.500"); --editor-meta-color: theme("colors.gray.500");
--editor-variable-color: theme("colors.gray.500"); --editor-variable-color: theme("colors.green.500");
--editor-link-color: theme("colors.blue.500"); --editor-link-color: theme("colors.cyan.500");
--editor-process-color: theme("colors.blue.500"); --editor-process-color: theme("colors.blue.500");
--editor-constant-color: theme("colors.blue.500"); --editor-constant-color: theme("colors.indigo.500");
--editor-keyword-color: theme("colors.blue.500"); --editor-keyword-color: theme("colors.pink.500");
} }
@mixin green-theme { @mixin green-theme {

26
packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
View File

@@ -11,13 +11,16 @@ export const baseTheme = EditorView.theme({
fontFamily: "var(--font-mono)", fontFamily: "var(--font-mono)",
backgroundColor: "var(--primary-color)", backgroundColor: "var(--primary-color)",
}, },
"&.cm-focused .cm-cursor": { ".cm-focused .cm-cursor": {
borderLeftColor: "var(--secondary-light-color)", borderLeftColor: "var(--secondary-light-color)",
}, },
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": ".cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content::selection, .cm-line::selection":
{ backgroundColor: "var(--primary-light-color)" }, {
backgroundColor: "var(--accent-dark-color)!important",
color: "var(--secondary-dark-color)",
},
".cm-panels": { ".cm-panels": {
backgroundColor: "var(--primary-dark-color)", backgroundColor: "var(--primary-light-color)",
color: "var(--secondary-light-color)", color: "var(--secondary-light-color)",
}, },
".cm-panels.cm-panels-top": { ".cm-panels.cm-panels-top": {
@@ -26,13 +29,23 @@ export const baseTheme = EditorView.theme({
".cm-panels.cm-panels-bottom": { ".cm-panels.cm-panels-bottom": {
borderTop: "1px solid var(--divider-light-color)", 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-activeLine": { backgroundColor: "var(--primary-light-color)" },
".cm-searchMatch": { ".cm-searchMatch": {
backgroundColor: "var(--accent-light-color)", backgroundColor: "var(--accent-light-color)",
outline: "1px solid var(--accent-dark-color)", outline: "1px solid var(--accent-dark-color)",
}, },
".cm-selectionMatch": { backgroundColor: "var(--accent-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)", backgroundColor: "var(--accent-dark-color)",
outline: "1px solid var(--accent-dark-color)", outline: "1px solid var(--accent-dark-color)",
}, },
@@ -59,6 +72,9 @@ export const baseTheme = EditorView.theme({
".cm-activeLineGutter": { ".cm-activeLineGutter": {
backgroundColor: "var(--primary-dark-color)", backgroundColor: "var(--primary-dark-color)",
}, },
".cm-scroller::-webkit-scrollbar": {
display: "none",
},
}) })
const editorTypeColor = "var(--editor-type-color)" const editorTypeColor = "var(--editor-type-color)"