Skip to content

Commit 6016e86

Browse files
bajrangCoderbajrangCoder
authored
fix(editor): correct CodeMirror theme colors and add Catppuccin (#2568)
1 parent 0dd1076 commit 6016e86

11 files changed

Lines changed: 466 additions & 103 deletions

File tree

‎src/cm/themes/catppuccin.js‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
2+
import { EditorView } from "@codemirror/view";
3+
import { tags as t } from "@lezer/highlight";
4+
5+
const palettes = {
6+
latte: {
7+
dark: false,
8+
rosewater: "#dc8a78",
9+
pink: "#ea76cb",
10+
mauve: "#8839ef",
11+
red: "#d20f39",
12+
peach: "#fe640b",
13+
yellow: "#df8e1d",
14+
green: "#40a02b",
15+
teal: "#179299",
16+
sky: "#04a5e5",
17+
blue: "#1e66f5",
18+
lavender: "#7287fd",
19+
text: "#4c4f69",
20+
subtext0: "#6c6f85",
21+
overlay2: "#7c7f93",
22+
overlay1: "#8c8fa1",
23+
overlay0: "#9ca0b0",
24+
surface2: "#acb0be",
25+
surface1: "#bcc0cc",
26+
surface0: "#ccd0da",
27+
base: "#eff1f5",
28+
mantle: "#e6e9ef",
29+
},
30+
frappe: {
31+
dark: true,
32+
rosewater: "#f2d5cf",
33+
pink: "#f4b8e4",
34+
mauve: "#ca9ee6",
35+
red: "#e78284",
36+
peach: "#ef9f76",
37+
yellow: "#e5c890",
38+
green: "#a6d189",
39+
teal: "#81c8be",
40+
sky: "#99d1db",
41+
blue: "#8caaee",
42+
lavender: "#babbf1",
43+
text: "#c6d0f5",
44+
subtext0: "#a5adce",
45+
overlay2: "#949cbb",
46+
overlay1: "#838ba7",
47+
overlay0: "#737994",
48+
surface2: "#626880",
49+
surface1: "#51576d",
50+
surface0: "#414559",
51+
base: "#303446",
52+
mantle: "#292c3c",
53+
},
54+
macchiato: {
55+
dark: true,
56+
rosewater: "#f4dbd6",
57+
pink: "#f5bde6",
58+
mauve: "#c6a0f6",
59+
red: "#ed8796",
60+
peach: "#f5a97f",
61+
yellow: "#eed49f",
62+
green: "#a6da95",
63+
teal: "#8bd5ca",
64+
sky: "#91d7e3",
65+
blue: "#8aadf4",
66+
lavender: "#b7bdf8",
67+
text: "#cad3f5",
68+
subtext0: "#a5adcb",
69+
overlay2: "#939ab7",
70+
overlay1: "#8087a2",
71+
overlay0: "#6e738d",
72+
surface2: "#5b6078",
73+
surface1: "#494d64",
74+
surface0: "#363a4f",
75+
base: "#24273a",
76+
mantle: "#1e2030",
77+
},
78+
mocha: {
79+
dark: true,
80+
rosewater: "#f5e0dc",
81+
pink: "#f5c2e7",
82+
mauve: "#cba6f7",
83+
red: "#f38ba8",
84+
peach: "#fab387",
85+
yellow: "#f9e2af",
86+
green: "#a6e3a1",
87+
teal: "#94e2d5",
88+
sky: "#89dceb",
89+
blue: "#89b4fa",
90+
lavender: "#b4befe",
91+
text: "#cdd6f4",
92+
subtext0: "#a6adc8",
93+
overlay2: "#9399b2",
94+
overlay1: "#7f849c",
95+
overlay0: "#6c7086",
96+
surface2: "#585b70",
97+
surface1: "#45475a",
98+
surface0: "#313244",
99+
base: "#1e1e2e",
100+
mantle: "#181825",
101+
},
102+
};
103+
104+
function createConfig(name, caption, palette) {
105+
return {
106+
name,
107+
caption,
108+
dark: palette.dark,
109+
background: palette.base,
110+
foreground: palette.text,
111+
selection: `${palette.overlay2}40`,
112+
selectionMatch: `${palette.surface2}4d`,
113+
cursor: palette.rosewater,
114+
dropdownBackground: palette.mantle,
115+
dropdownBorder: palette.overlay0,
116+
activeLine: palette.surface0,
117+
lineNumber: palette.subtext0,
118+
lineNumberActive: palette.mauve,
119+
matchingBracket: `${palette.surface2}47`,
120+
keyword: palette.mauve,
121+
variable: palette.text,
122+
parameter: palette.text,
123+
function: palette.blue,
124+
string: palette.green,
125+
constant: palette.peach,
126+
type: palette.yellow,
127+
class: palette.yellow,
128+
number: palette.peach,
129+
comment: palette.overlay2,
130+
heading: palette.blue,
131+
invalid: palette.red,
132+
regexp: palette.pink,
133+
tag: palette.blue,
134+
operator: palette.sky,
135+
palette,
136+
};
137+
}
138+
139+
export const configs = [
140+
createConfig("catppuccinLatte", "Catppuccin Latte", palettes.latte),
141+
createConfig("catppuccinFrappe", "Catppuccin Frappé", palettes.frappe),
142+
createConfig(
143+
"catppuccinMacchiato",
144+
"Catppuccin Macchiato",
145+
palettes.macchiato,
146+
),
147+
createConfig("catppuccinMocha", "Catppuccin Mocha", palettes.mocha),
148+
];
149+
150+
function createCatppuccinTheme(config) {
151+
const colors = config.palette;
152+
const theme = EditorView.theme(
153+
{
154+
"&": {
155+
color: config.foreground,
156+
backgroundColor: config.background,
157+
},
158+
".cm-content": { caretColor: config.cursor },
159+
".cm-cursor, .cm-dropCursor": {
160+
borderLeftColor: config.cursor,
161+
},
162+
"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
163+
{ backgroundColor: config.selection },
164+
".cm-panels": {
165+
backgroundColor: config.dropdownBackground,
166+
color: config.foreground,
167+
},
168+
".cm-panels.cm-panels-top": {
169+
borderBottom: `1px solid ${config.dropdownBorder}`,
170+
},
171+
".cm-panels.cm-panels-bottom": {
172+
borderTop: `1px solid ${config.dropdownBorder}`,
173+
},
174+
".cm-searchMatch": {
175+
backgroundColor: `${colors.blue}59`,
176+
outline: `1px solid ${colors.blue}`,
177+
},
178+
".cm-searchMatch.cm-searchMatch-selected": {
179+
backgroundColor: `${colors.blue}2f`,
180+
},
181+
".cm-activeLine": { backgroundColor: config.activeLine },
182+
".cm-selectionMatch": { backgroundColor: config.selectionMatch },
183+
"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
184+
backgroundColor: config.matchingBracket,
185+
color: config.foreground,
186+
},
187+
".cm-gutters": {
188+
backgroundColor: config.background,
189+
color: config.lineNumber,
190+
border: "none",
191+
},
192+
".cm-activeLineGutter": { backgroundColor: config.activeLine },
193+
".cm-lineNumbers .cm-gutterElement": { color: config.lineNumber },
194+
".cm-lineNumbers .cm-activeLineGutter": {
195+
color: config.lineNumberActive,
196+
},
197+
".cm-foldPlaceholder": {
198+
backgroundColor: "transparent",
199+
border: "none",
200+
color: colors.overlay0,
201+
},
202+
".cm-placeholder": { color: colors.overlay1 },
203+
".cm-tooltip": {
204+
border: "none",
205+
backgroundColor: colors.surface0,
206+
color: config.foreground,
207+
},
208+
".cm-tooltip-autocomplete": {
209+
"& > ul > li[aria-selected]": {
210+
backgroundColor: colors.surface1,
211+
color: config.foreground,
212+
},
213+
},
214+
},
215+
{ dark: config.dark },
216+
);
217+
218+
const highlightStyle = HighlightStyle.define([
219+
{ tag: t.keyword, color: config.keyword },
220+
{
221+
tag: [t.name, t.definition(t.name), t.deleted, t.character, t.macroName],
222+
color: config.variable,
223+
},
224+
{
225+
tag: [
226+
t.function(t.variableName),
227+
t.function(t.propertyName),
228+
t.propertyName,
229+
t.labelName,
230+
],
231+
color: config.function,
232+
},
233+
{
234+
tag: [t.color, t.constant(t.name), t.standard(t.name)],
235+
color: config.constant,
236+
},
237+
{ tag: [t.self, t.atom], color: colors.red },
238+
{
239+
tag: [t.typeName, t.className, t.changed, t.annotation, t.namespace],
240+
color: config.type,
241+
},
242+
{ tag: t.operator, color: config.operator },
243+
{ tag: t.url, color: colors.teal },
244+
{ tag: [t.escape, t.regexp], color: config.regexp },
245+
{
246+
tag: [t.meta, t.punctuation, t.separator, t.comment],
247+
color: config.comment,
248+
},
249+
{ tag: t.strong, fontWeight: "bold" },
250+
{ tag: t.emphasis, fontStyle: "italic" },
251+
{ tag: t.strikethrough, textDecoration: "line-through" },
252+
{ tag: t.link, color: config.function, textDecoration: "underline" },
253+
{ tag: t.heading, fontWeight: "bold", color: config.heading },
254+
{ tag: t.special(t.variableName), color: colors.lavender },
255+
{ tag: [t.bool, t.number], color: config.number },
256+
{
257+
tag: [t.processingInstruction, t.string, t.inserted],
258+
color: config.string,
259+
},
260+
{ tag: t.invalid, color: config.invalid },
261+
]);
262+
263+
return [theme, syntaxHighlighting(highlightStyle)];
264+
}
265+
266+
export const themes = new Map(
267+
configs.map((config) => [config.name, createCatppuccinTheme(config)]),
268+
);
269+
270+
export default themes;

‎src/cm/themes/dracula.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export const draculaHighlightStyle = HighlightStyle.define([
127127
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
128128
color: config.number,
129129
},
130-
{ tag: [t.typeName], color: config.type, fontStyle: config.type },
130+
{ tag: [t.typeName], color: config.type },
131131
{ tag: [t.operator, t.operatorKeyword], color: config.keyword },
132132
{ tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
133133
{ tag: [t.meta, t.comment], color: config.comment },

‎src/cm/themes/githubDark.js‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
11
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
2-
import { EditorView, lineNumbers } from "@codemirror/view";
2+
import { EditorView } from "@codemirror/view";
33
import { tags as t } from "@lezer/highlight";
44

55
export const config = {
66
name: "githubDark",
77
dark: true,
8-
background: "#24292e",
9-
foreground: "#d1d5da",
8+
background: "#0d1117",
9+
foreground: "#e6edf3",
1010
selection: "#3392FF44",
11-
cursor: "#c8e1ff",
12-
dropdownBackground: "#24292e",
13-
dropdownBorder: "#1b1f23",
14-
activeLine: "#4d566022",
15-
lineNumber: "#444d56",
16-
lineNumberActive: "#e1e4e8",
17-
matchingBracket: "#17E5E650",
18-
keyword: "#f97583",
19-
storage: "#f97583",
20-
variable: "#ffab70",
21-
parameter: "#e1e4e8",
22-
function: "#79b8ff",
23-
string: "#9ecbff",
24-
constant: "#79b8ff",
25-
type: "#79b8ff",
26-
class: "#b392f0",
27-
number: "#79b8ff",
28-
comment: "#6a737d",
29-
heading: "#79b8ff",
30-
invalid: "#f97583",
31-
regexp: "#9ecbff",
11+
cursor: "#e6edf3",
12+
dropdownBackground: "#161b22",
13+
dropdownBorder: "#30363d",
14+
activeLine: "#6e76811a",
15+
lineNumber: "#6e7681",
16+
lineNumberActive: "#e6edf3",
17+
matchingBracket: "#6e76811a",
18+
keyword: "#ff7b72",
19+
storage: "#ff7b72",
20+
variable: "#e6edf3",
21+
parameter: "#e6edf3",
22+
function: "#d2a8ff",
23+
string: "#a5d6ff",
24+
constant: "#79c0ff",
25+
type: "#79c0ff",
26+
class: "#7ee787",
27+
number: "#79c0ff",
28+
comment: "#8b949e",
29+
heading: "#ffa657",
30+
invalid: "#f85149",
31+
regexp: "#a5d6ff",
32+
tag: "#7ee787",
33+
property: "#79c0ff",
34+
operator: "#79c0ff",
3235
};
3336

3437
export const githubDarkTheme = EditorView.theme(
@@ -111,7 +114,7 @@ export const githubDarkHighlightStyle = HighlightStyle.define([
111114
tag: [t.name, t.deleted, t.character, t.macroName],
112115
color: config.variable,
113116
},
114-
{ tag: [t.propertyName], color: config.function },
117+
{ tag: [t.propertyName], color: config.property },
115118
{
116119
tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)],
117120
color: config.string,
@@ -127,15 +130,16 @@ export const githubDarkHighlightStyle = HighlightStyle.define([
127130
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
128131
color: config.number,
129132
},
130-
{ tag: [t.typeName], color: config.type, fontStyle: config.type },
131-
{ tag: [t.operator, t.operatorKeyword], color: config.keyword },
133+
{ tag: [t.typeName], color: config.type },
134+
{ tag: [t.operator, t.operatorKeyword], color: config.operator },
132135
{ tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
133136
{ tag: [t.meta, t.comment], color: config.comment },
137+
{ tag: t.tagName, color: config.tag },
134138
{ tag: t.strong, fontWeight: "bold" },
135139
{ tag: t.emphasis, fontStyle: "italic" },
136140
{ tag: t.link, textDecoration: "underline" },
137141
{ tag: t.heading, fontWeight: "bold", color: config.heading },
138-
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable },
142+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: config.constant },
139143
{ tag: t.invalid, color: config.invalid },
140144
{ tag: t.strikethrough, textDecoration: "line-through" },
141145
]);

0 commit comments

Comments
 (0)