diff --git a/src/themes/toposTheme.ts b/src/themes/toposTheme.ts index 30e1a40..67d4455 100644 --- a/src/themes/toposTheme.ts +++ b/src/themes/toposTheme.ts @@ -3,13 +3,12 @@ import { Extension } from "@codemirror/state"; import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"; import { tags as t } from "@lezer/highlight"; -const base00 = "#353535", +const base00 = "#262626", base01 = "#3B4252", base02 = "#FEFEFE", base03 = "#4C566A", base04 = "#D8DEE9", base05 = "#E5E9F0", - base06 = "#ECEFF4", base07 = "#8FBCBB", base_red = "#BF616A", base_deeporange = "#D08770", @@ -22,28 +21,9 @@ const base00 = "#353535", base_green = "#A3BE8C", base_lightgreen = "#A3BE8C"; -// const base00 = "#353535", -// base01 = "#3B4252", -// base02 = "#F0F0F0", -// base03 = "#4C566A", -// base04 = "#D8DEE9", -// base05 = "#E5E9F0", -// base06 = "#ECEFF4", -// base07 = "#8FBCBB", -// base_red = "#BF616A", -// base_deeporange = "#D08770", -// base_pink = "#B48EAD", -// base_yellow = "#EBCB8B", -// base_orange = "#D08770", -// base_cyan = "#88C0D0", -// base_indigo = "#5E81AC", -// base_purple = "#B48EAD", -// base_green = "#A3BE8C", -// base_lightgreen = "#A3BE8C"; - const invalid = base_red, darkBackground = "#fdf6e3", - highlightBackground = "#545b61", + highlightBackground = "#454545", background = base00, tooltipBackground = base01, cursor = base04; @@ -54,7 +34,7 @@ export const toposDarkTheme = EditorView.theme( "&": { color: base05, backgroundColor: background, - fontSize: "48px", + fontSize: "24px", fontFamily: "'Victor Mono', monospace", }, ".cm-content": { @@ -63,27 +43,25 @@ export const toposDarkTheme = EditorView.theme( }, ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor }, "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": - { backgroundColor: base_deeporange, border: `0.5px solid ${base_red}` }, + { backgroundColor: base00, border: `0.5px solid ${base00}` }, ".cm-panels": { backgroundColor: darkBackground, color: base05 }, ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" }, ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" }, ".cm-searchMatch": { outline: `1px solid ${base_yellow}`, - backgroundColor: "transparent", }, ".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: highlightBackground, }, - ".cm-activeLine": { backgroundColor: highlightBackground }, ".cm-selectionMatch": { - backgroundColor: darkBackground, + backgroundColor: base04, outline: `1px solid ${base_red}`, }, "&.cm-focused .cm-matchingBracket": { - color: base06, - outline: `1px solid ${base_red}`, + color: base02, + outline: `1px solid ${base02}`, }, "&.cm-focused .cm-nonmatchingBracket": { @@ -101,7 +79,6 @@ export const toposDarkTheme = EditorView.theme( }, ".cm-foldPlaceholder": { - backgroundColor: "transparent", border: "none", color: `${base07}`, }, @@ -110,10 +87,7 @@ export const toposDarkTheme = EditorView.theme( border: "none", backgroundColor: tooltipBackground, }, - ".cm-tooltip .cm-tooltip-arrow:before": { - borderTopColor: "transparent", - borderBottomColor: "transparent", - }, + ".cm-tooltip .cm-tooltip-arrow:before": {}, ".cm-tooltip .cm-tooltip-arrow:after": { borderTopColor: tooltipBackground, borderBottomColor: tooltipBackground,