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 16:27:12 +05:30
parent 245b8a6e3c
commit 8f6cf07e82
2 changed files with 33 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 {

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

@@ -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)",