From 1716f71c129ec97e7fc1e674eb16a521bf59a48b Mon Sep 17 00:00:00 2001 From: Cory McWilliams Date: Mon, 15 Jan 2024 01:56:43 +0000 Subject: [PATCH] Make the editor theme background a bit darker. git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4772 ed5197a5-7fde-0310-b194-c3ffbd925b24 --- deps/codemirror_src/editor.mjs | 5 +- deps/codemirror_src/theme-tf-dark.js | 134 +++++++++++++++++++++++++++ 2 files changed, 137 insertions(+), 2 deletions(-) create mode 100644 deps/codemirror_src/theme-tf-dark.js diff --git a/deps/codemirror_src/editor.mjs b/deps/codemirror_src/editor.mjs index b763994a..b6c14aa8 100644 --- a/deps/codemirror_src/editor.mjs +++ b/deps/codemirror_src/editor.mjs @@ -4,8 +4,8 @@ import {javascript} from "@codemirror/lang-javascript" import {html} from "@codemirror/lang-html" import {css} from "@codemirror/lang-css" import {search} from "@codemirror/search" -import {oneDark} from "@codemirror/theme-one-dark" -import {lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap, highlightWhitespace} from '@codemirror/view'; +import {oneDark} from "./theme-tf-dark.js" +import {lineNumbers, highlightActiveLineGutter, highlightSpecialChars, highlightTrailingWhitespace, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap, highlightWhitespace} from '@codemirror/view'; import {foldGutter, indentUnit, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldKeymap} from '@codemirror/language'; import {history, defaultKeymap, historyKeymap, indentWithTab} from '@codemirror/commands'; import {highlightSelectionMatches, searchKeymap} from '@codemirror/search'; @@ -37,6 +37,7 @@ const extensions = [ crosshairCursor(), highlightActiveLine(), highlightSelectionMatches(), + highlightTrailingWhitespace(), keymap.of([ ...defaultKeymap, ...searchKeymap, diff --git a/deps/codemirror_src/theme-tf-dark.js b/deps/codemirror_src/theme-tf-dark.js new file mode 100644 index 00000000..e4c61760 --- /dev/null +++ b/deps/codemirror_src/theme-tf-dark.js @@ -0,0 +1,134 @@ +import { EditorView } from '@codemirror/view'; +import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'; +import { tags } from '@lezer/highlight'; + +// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors +const chalky = "#e5c07b", coral = "#e06c75", cyan = "#56b6c2", invalid = "#ffffff", ivory = "#abb2bf", stone = "#7d8799", // Brightened compared to original to increase contrast +malibu = "#61afef", sage = "#98c379", whiskey = "#d19a66", violet = "#c678dd", darkBackground = "#21252b", highlightBackground = "#2c313a", background = "#14161a", tooltipBackground = "#353a42", selection = "#3E4451", cursor = "#528bff"; +/** +The colors used in the theme, as CSS color strings. +*/ +const color = { + chalky, + coral, + cyan, + invalid, + ivory, + stone, + malibu, + sage, + whiskey, + violet, + darkBackground, + highlightBackground, + background, + tooltipBackground, + selection, + cursor +}; +/** +The editor theme styles for One Dark. +*/ +const oneDarkTheme = /*@__PURE__*/EditorView.theme({ + "&": { + color: ivory, + backgroundColor: background + }, + ".cm-content": { + caretColor: cursor + }, + ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor }, + "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": { backgroundColor: selection }, + ".cm-panels": { backgroundColor: darkBackground, color: ivory }, + ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" }, + ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" }, + ".cm-searchMatch": { + backgroundColor: "#72a1ff59", + outline: "1px solid #457dff" + }, + ".cm-searchMatch.cm-searchMatch-selected": { + backgroundColor: "#6199ff2f" + }, + ".cm-activeLine": { backgroundColor: "#6699ff0b" }, + ".cm-selectionMatch": { backgroundColor: "#aafe661a" }, + "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": { + backgroundColor: "#bad0f847" + }, + ".cm-gutters": { + backgroundColor: background, + color: stone, + border: "none" + }, + ".cm-activeLineGutter": { + backgroundColor: highlightBackground + }, + ".cm-foldPlaceholder": { + backgroundColor: "transparent", + border: "none", + color: "#ddd" + }, + ".cm-tooltip": { + border: "none", + backgroundColor: tooltipBackground + }, + ".cm-tooltip .cm-tooltip-arrow:before": { + borderTopColor: "transparent", + borderBottomColor: "transparent" + }, + ".cm-tooltip .cm-tooltip-arrow:after": { + borderTopColor: tooltipBackground, + borderBottomColor: tooltipBackground + }, + ".cm-tooltip-autocomplete": { + "& > ul > li[aria-selected]": { + backgroundColor: highlightBackground, + color: ivory + } + } +}, { dark: true }); +/** +The highlighting style for code in the One Dark theme. +*/ +const oneDarkHighlightStyle = /*@__PURE__*/HighlightStyle.define([ + { tag: tags.keyword, + color: violet }, + { tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName], + color: coral }, + { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], + color: malibu }, + { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], + color: whiskey }, + { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], + color: ivory }, + { tag: [tags.typeName, tags.className, tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], + color: chalky }, + { tag: [tags.operator, tags.operatorKeyword, tags.url, tags.escape, tags.regexp, tags.link, /*@__PURE__*/tags.special(tags.string)], + color: cyan }, + { tag: [tags.meta, tags.comment], + color: stone }, + { tag: tags.strong, + fontWeight: "bold" }, + { tag: tags.emphasis, + fontStyle: "italic" }, + { tag: tags.strikethrough, + textDecoration: "line-through" }, + { tag: tags.link, + color: stone, + textDecoration: "underline" }, + { tag: tags.heading, + fontWeight: "bold", + color: coral }, + { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], + color: whiskey }, + { tag: [tags.processingInstruction, tags.string, tags.inserted], + color: sage }, + { tag: tags.invalid, + color: invalid }, +]); +/** +Extension to enable the One Dark theme (both the editor theme and +the highlight style). +*/ +const oneDark = [oneDarkTheme, /*@__PURE__*/syntaxHighlighting(oneDarkHighlightStyle)]; + +export { color, oneDark, oneDarkHighlightStyle, oneDarkTheme };