1 files changed, 75 insertions, 0 deletions
diff --git a/source/library/themes/light.ts b/source/library/themes/light.ts
new file mode 100644
index 0000000..daaede2
--- /dev/null
+++ b/source/library/themes/light.ts
@@ -0,0 +1,75 @@
+
+
+
+/*** IMPORT ------------------------------------------- ***/
+
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
+import { tags as t } from "@lezer/highlight";
+
+/*** EXPORT ------------------------------------------- ***/
+
+const BG = "#fafafa";
+const BORDER = "#e0e0e0";
+const FG = "#24292e";
+const GUTTER_BG = "#f3f3f3";
+const GUTTER_FG = "#9ca3af";
+const SELECTION = "#b3d4fc";
+
+const base = EditorView.theme({
+  "&": {
+    backgroundColor: BG,
+    color: FG
+  },
+  "&.cm-focused": {
+    outline: "none"
+  },
+  ".cm-activeLine": {
+    backgroundColor: "#f0f0f0"
+  },
+  ".cm-activeLineGutter": {
+    backgroundColor: "transparent",
+    color: FG
+  },
+  ".cm-content": {
+    caretColor: "#1f6feb"
+  },
+  ".cm-cursor, .cm-dropCursor": {
+    borderLeftColor: "#1f6feb"
+  },
+  ".cm-gutters": {
+    backgroundColor: GUTTER_BG,
+    border: "none",
+    borderRight: `1px solid ${BORDER}`,
+    color: GUTTER_FG
+  },
+  ".cm-matchingBracket": {
+    backgroundColor: "#dbeafe",
+    outline: "1px solid #93c5fd"
+  },
+  ".cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    backgroundColor: SELECTION
+  }
+}, { dark: false });
+
+const highlight = HighlightStyle.define([
+  { color: "#d73a49", tag: t.keyword },
+  { color: "#6f42c1", tag: [t.name, t.deleted, t.character, t.macroName] },
+  { color: "#6f42c1", tag: [t.propertyName] },
+  { color: "#032f62", tag: [t.string, t.special(t.string)] },
+  { color: "#005cc5", tag: [t.number, t.bool, t.null, t.atom] },
+  { color: "#6a737d", fontStyle: "italic", tag: t.comment },
+  { color: "#22863a", tag: [t.typeName, t.className] },
+  { color: "#e36209", tag: [t.variableName, t.labelName] },
+  { color: "#d73a49", tag: [t.operator, t.operatorKeyword] },
+  { color: "#6a737d", tag: [t.meta, t.documentMeta] },
+  { color: "#22863a", tag: [t.tagName] },
+  { color: "#6f42c1", tag: [t.attributeName] },
+  { color: "#e36209", tag: [t.heading] },
+  { color: "#032f62", tag: [t.link] },
+  { fontWeight: "bold", tag: [t.strong] },
+  { fontStyle: "italic", tag: [t.emphasis] },
+  { tag: t.strikethrough, textDecoration: "line-through" }
+]);
+
+export const lightTheme = [base, syntaxHighlighting(highlight)];