editor theme
mellbacon committed
Aug 17, 2022 at 11:14 UTC
173c0d06a80aeda94368bfacbd1109277b996229
1 file changed
+207
src/components/Content/Editor/DefaultTheme.ts
new
+207
@@ -0,0 +1,207 @@
1
+import { EditorView } from "@codemirror/view";
2
+import type { Extension } from "@codemirror/state";
3
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
4
+import { tags as t } from "@lezer/highlight";
5
+
6
+const bg = "#1c1c1c",
7
+ cl = "#282a2e",
8
+ sel = "#373b41",
9
+ fg = "#c5c8c6",
10
+ com = "#969896",
11
+ red = "#cc6666",
12
+ orange = "#fff9f5",
13
+ green = "#b5bd68",
14
+ aqua = "#8abeb7",
15
+ blue = "#81a2be",
16
+ purple = "#b294bb";
17
+
18
+const defaultTheme = EditorView.theme(
19
+ {
20
+ "*": {
21
+ fontFamily: '"Ubuntu Mono", monospace'
22
+ },
23
+
24
+ "&": {
25
+ color: fg,
26
+ backgroundColor: bg
27
+ },
28
+
29
+ ".cm-content": {
30
+ caretColor: orange
31
+ },
32
+
33
+ "&.cm-focused .cm-cursor": {
34
+ borderLeftColor: orange
35
+ },
36
+
37
+ "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection": {
38
+ backgroundColor: sel
39
+ },
40
+
41
+ ".cm-panels": {
42
+ backgroundColor: bg,
43
+ color: fg
44
+ },
45
+
46
+ ".cm-panels.cm-panels-top": {
47
+ borderBottom: "2px solid black"
48
+ },
49
+
50
+ ".cm-panels.cm-panels-bottom": {
51
+ borderTop: "2px solid black"
52
+ },
53
+
54
+ ".cm-searchMatch": {
55
+ backgroundColor: "#72a1ff59",
56
+ outline: "1px solid #457dff"
57
+ },
58
+
59
+ ".cm-searchMatch.cm-searchMatch-selected": {
60
+ backgroundColor: "#6199ff2f"
61
+ },
62
+
63
+ ".cm-activeLine": {
64
+ backgroundColor: cl
65
+ },
66
+
67
+ ".cm-selectionMatch": {
68
+ backgroundColor: "#aafe661a"
69
+ },
70
+
71
+ ".cm-matchingBracket, .cm-nonmatchingBracket": {
72
+ backgroundColor: "#bad0f847",
73
+ outline: "1px solid #515a6b"
74
+ },
75
+
76
+ ".cm-gutters": {
77
+ backgroundColor: bg,
78
+ color: com,
79
+ border: "none"
80
+ },
81
+
82
+ ".cm-activeLineGutter": {
83
+ backgroundColor: bg
84
+ },
85
+
86
+ ".cm-foldPlaceholder": {
87
+ backgroundColor: "transparent",
88
+ border: "none",
89
+ color: "#ddd"
90
+ },
91
+
92
+ ".cm-tooltip": {
93
+ border: "1px solid #181a1f",
94
+ backgroundColor: bg
95
+ },
96
+ ".cm-tooltip-autocomplete": {
97
+ "& > ul > li[aria-selected]": {
98
+ backgroundColor: bg,
99
+ color: fg
100
+ }
101
+ }
102
+ },
103
+ { dark: true }
104
+);
105
+
106
+const defaultHighlightStyle = HighlightStyle.define([
107
+ {
108
+ tag: t.keyword,
109
+ color: purple
110
+ },
111
+
112
+ {
113
+ tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
114
+ color: red
115
+ },
116
+
117
+ {
118
+ tag: [t.function(t.variableName), t.labelName],
119
+ color: blue
120
+ },
121
+
122
+ {
123
+ tag: [t.color, t.constant(t.name), t.standard(t.name)],
124
+ color: orange
125
+ },
126
+
127
+ {
128
+ tag: [t.definition(t.name), t.separator],
129
+ color: fg
130
+ },
131
+
132
+ {
133
+ tag: [
134
+ t.typeName,
135
+ t.className,
136
+ t.number,
137
+ t.changed,
138
+ t.annotation,
139
+ t.modifier,
140
+ t.self,
141
+ t.namespace
142
+ ],
143
+ color: orange
144
+ },
145
+
146
+ {
147
+ tag: [
148
+ t.operator,
149
+ t.operatorKeyword,
150
+ t.url,
151
+ t.escape,
152
+ t.regexp,
153
+ t.link,
154
+ t.special(t.string)
155
+ ],
156
+ color: aqua
157
+ },
158
+
159
+ {
160
+ tag: [t.meta, t.comment],
161
+ color: com
162
+ },
163
+
164
+ {
165
+ tag: t.strong,
166
+ fontWeight: "bold"
167
+ },
168
+
169
+ {
170
+ tag: t.emphasis,
171
+ fontStyle: "italic"
172
+ },
173
+
174
+ {
175
+ tag: t.strikethrough,
176
+ textDecoration: "line-through"
177
+ },
178
+
179
+ {
180
+ tag: t.link,
181
+ color: com,
182
+ textDecoration: "underline"
183
+ },
184
+
185
+ {
186
+ tag: t.heading,
187
+ fontWeight: "bold",
188
+ color: red
189
+ },
190
+
191
+ {
192
+ tag: [t.atom, t.bool, t.special(t.variableName)],
193
+ color: orange
194
+ },
195
+
196
+ {
197
+ tag: [t.processingInstruction, t.string, t.inserted],
198
+ color: green
199
+ },
200
+
201
+ {
202
+ tag: t.invalid,
203
+ color: "#ffffff"
204
+ }
205
+]);
206
+
207
+export const default_theme: Extension = [defaultTheme, syntaxHighlighting(defaultHighlightStyle)];
\ No newline at end of file