Skip to content

Commit 8665605

Browse files
bajrangCoderbajrangCoder
committed
feat(editor-theme): add Tomorrow Night and Tomorrow Night Bright themes
1 parent e2712ea commit 8665605

File tree

3 files changed

+331
-0
lines changed

3 files changed

+331
-0
lines changed

‎src/cm/themes/index.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ import solarizedLight, {
1212
} from "./solarizedLight";
1313
import tokyoNight, { config as tokyoNightConfig } from "./tokyoNight";
1414
import tokyoNightDay, { config as tokyoNightDayConfig } from "./tokyoNightDay";
15+
import tomorrowNight, { config as tomorrowNightConfig } from "./tomorrowNight";
16+
import tomorrowNightBright, {
17+
config as tomorrowNightBrightConfig,
18+
} from "./tomorrowNightBright";
1519
import vscodeDark, { config as vscodeDarkConfig } from "./vscodeDark";
1620

1721
const oneDarkConfig = {
@@ -207,6 +211,20 @@ addTheme(
207211
() => tokyoNight(),
208212
tokyoNightConfig,
209213
);
214+
addTheme(
215+
tomorrowNightConfig.name,
216+
"Tomorrow Night",
217+
!!tomorrowNightConfig.dark,
218+
() => tomorrowNight(),
219+
tomorrowNightConfig,
220+
);
221+
addTheme(
222+
tomorrowNightBrightConfig.name,
223+
"Tomorrow Night Bright",
224+
!!tomorrowNightBrightConfig.dark,
225+
() => tomorrowNightBright(),
226+
tomorrowNightBrightConfig,
227+
);
210228
addTheme(
211229
monokaiConfig.name,
212230
"Monokai",

‎src/cm/themes/tomorrowNight.js‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
2+
import { EditorView } from "@codemirror/view";
3+
import { tags as t } from "@lezer/highlight";
4+
5+
// Palette adapted from Tomorrow Night (Chris Kempson)
6+
export const config = {
7+
name: "tomorrowNight",
8+
dark: true,
9+
background: "#1D1F21",
10+
foreground: "#C5C8C6",
11+
selection: "#373B41",
12+
cursor: "#AEAFAD",
13+
dropdownBackground: "#1D1F21",
14+
dropdownBorder: "#4B4E55",
15+
activeLine: "#282A2E",
16+
lineNumber: "#4B4E55",
17+
lineNumberActive: "#C5C8C6",
18+
matchingBracket: "#282A2E",
19+
keyword: "#B294BB",
20+
storage: "#B294BB",
21+
variable: "#CC6666",
22+
parameter: "#DE935F",
23+
function: "#81A2BE",
24+
string: "#B5BD68",
25+
constant: "#DE935F",
26+
type: "#F0C674",
27+
class: "#F0C674",
28+
number: "#DE935F",
29+
comment: "#969896",
30+
heading: "#81A2BE",
31+
invalid: "#DF5F5F",
32+
regexp: "#CC6666",
33+
operator: "#8ABEB7",
34+
tag: "#CC6666",
35+
};
36+
37+
export const tomorrowNightTheme = EditorView.theme(
38+
{
39+
"&": {
40+
color: config.foreground,
41+
backgroundColor: config.background,
42+
},
43+
44+
".cm-content": { caretColor: config.cursor },
45+
46+
".cm-cursor, .cm-dropCursor": { borderLeftColor: config.cursor },
47+
"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
48+
{ backgroundColor: config.selection },
49+
50+
".cm-panels": {
51+
backgroundColor: config.dropdownBackground,
52+
color: config.foreground,
53+
},
54+
".cm-panels.cm-panels-top": {
55+
borderBottom: `1px solid ${config.dropdownBorder}`,
56+
},
57+
".cm-panels.cm-panels-bottom": {
58+
borderTop: `1px solid ${config.dropdownBorder}`,
59+
},
60+
61+
".cm-searchMatch": {
62+
backgroundColor: config.dropdownBackground,
63+
outline: `1px solid ${config.dropdownBorder}`,
64+
},
65+
".cm-searchMatch.cm-searchMatch-selected": {
66+
backgroundColor: config.selection,
67+
},
68+
69+
".cm-activeLine": { backgroundColor: config.activeLine },
70+
".cm-selectionMatch": { backgroundColor: config.selection },
71+
72+
"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
73+
backgroundColor: config.matchingBracket,
74+
outline: "none",
75+
},
76+
77+
".cm-gutters": {
78+
backgroundColor: config.background,
79+
color: config.foreground,
80+
border: "none",
81+
},
82+
".cm-activeLineGutter": { backgroundColor: config.background },
83+
84+
".cm-lineNumbers .cm-gutterElement": { color: config.lineNumber },
85+
".cm-lineNumbers .cm-activeLineGutter": { color: config.lineNumberActive },
86+
87+
".cm-foldPlaceholder": {
88+
backgroundColor: "transparent",
89+
border: "none",
90+
color: config.foreground,
91+
},
92+
".cm-tooltip": {
93+
border: `1px solid ${config.dropdownBorder}`,
94+
backgroundColor: config.dropdownBackground,
95+
color: config.foreground,
96+
},
97+
".cm-tooltip .cm-tooltip-arrow:before": {
98+
borderTopColor: "transparent",
99+
borderBottomColor: "transparent",
100+
},
101+
".cm-tooltip .cm-tooltip-arrow:after": {
102+
borderTopColor: config.foreground,
103+
borderBottomColor: config.foreground,
104+
},
105+
".cm-tooltip-autocomplete": {
106+
"& > ul > li[aria-selected]": {
107+
background: config.selection,
108+
color: config.foreground,
109+
},
110+
},
111+
},
112+
{ dark: config.dark },
113+
);
114+
115+
export const tomorrowNightHighlightStyle = HighlightStyle.define([
116+
{ tag: t.keyword, color: config.keyword },
117+
{
118+
tag: [t.name, t.deleted, t.character, t.macroName],
119+
color: config.variable,
120+
},
121+
{ tag: [t.propertyName], color: config.function },
122+
{
123+
tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)],
124+
color: config.string,
125+
},
126+
{ tag: [t.function(t.variableName), t.labelName], color: config.function },
127+
{
128+
tag: [t.color, t.constant(t.name), t.standard(t.name)],
129+
color: config.constant,
130+
},
131+
{ tag: [t.definition(t.name), t.separator], color: config.variable },
132+
{ tag: [t.className], color: config.class },
133+
{
134+
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
135+
color: config.number,
136+
},
137+
{ tag: [t.typeName], color: config.type },
138+
{ tag: [t.operator, t.operatorKeyword], color: config.operator },
139+
{ tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
140+
{ tag: [t.meta, t.comment], color: config.comment },
141+
{ tag: t.tagName, color: config.tag },
142+
{ tag: t.strong, fontWeight: "bold" },
143+
{ tag: t.emphasis, fontStyle: "italic" },
144+
{ tag: t.link, textDecoration: "underline" },
145+
{ tag: t.heading, fontWeight: "bold", color: config.heading },
146+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable },
147+
{ tag: t.invalid, color: config.invalid },
148+
{ tag: t.strikethrough, textDecoration: "line-through" },
149+
]);
150+
151+
export function tomorrowNight() {
152+
return [tomorrowNightTheme, syntaxHighlighting(tomorrowNightHighlightStyle)];
153+
}
154+
155+
export default tomorrowNight;

‎src/cm/themes/tomorrowNightBright.js‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
2+
import { EditorView } from "@codemirror/view";
3+
import { tags as t } from "@lezer/highlight";
4+
5+
// Palette adapted from Tomorrow Night Bright (Chris Kempson)
6+
export const config = {
7+
name: "tomorrowNightBright",
8+
dark: true,
9+
background: "#000000",
10+
foreground: "#DEDEDE",
11+
selection: "#424242",
12+
cursor: "#9F9F9F",
13+
dropdownBackground: "#000000",
14+
dropdownBorder: "#343434",
15+
activeLine: "#2A2A2A",
16+
lineNumber: "#343434",
17+
lineNumberActive: "#DEDEDE",
18+
matchingBracket: "#2A2A2A",
19+
keyword: "#C397D8",
20+
storage: "#C397D8",
21+
variable: "#D54E53",
22+
parameter: "#E78C45",
23+
function: "#7AA6DA",
24+
string: "#B9CA4A",
25+
constant: "#E78C45",
26+
type: "#E7C547",
27+
class: "#E7C547",
28+
number: "#E78C45",
29+
comment: "#969896",
30+
heading: "#7AA6DA",
31+
invalid: "#DF5F5F",
32+
regexp: "#D54E53",
33+
operator: "#70C0B1",
34+
tag: "#D54E53",
35+
};
36+
37+
export const tomorrowNightBrightTheme = EditorView.theme(
38+
{
39+
"&": {
40+
color: config.foreground,
41+
backgroundColor: config.background,
42+
},
43+
44+
".cm-content": { caretColor: config.cursor },
45+
46+
".cm-cursor, .cm-dropCursor": { borderLeftColor: config.cursor },
47+
"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
48+
{ backgroundColor: config.selection },
49+
50+
".cm-panels": {
51+
backgroundColor: config.dropdownBackground,
52+
color: config.foreground,
53+
},
54+
".cm-panels.cm-panels-top": {
55+
borderBottom: `1px solid ${config.dropdownBorder}`,
56+
},
57+
".cm-panels.cm-panels-bottom": {
58+
borderTop: `1px solid ${config.dropdownBorder}`,
59+
},
60+
61+
".cm-searchMatch": {
62+
backgroundColor: config.dropdownBackground,
63+
outline: `1px solid ${config.dropdownBorder}`,
64+
},
65+
".cm-searchMatch.cm-searchMatch-selected": {
66+
backgroundColor: config.selection,
67+
},
68+
69+
".cm-activeLine": { backgroundColor: config.activeLine },
70+
".cm-selectionMatch": { backgroundColor: config.selection },
71+
72+
"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
73+
backgroundColor: config.matchingBracket,
74+
outline: "none",
75+
},
76+
77+
".cm-gutters": {
78+
backgroundColor: config.background,
79+
color: config.foreground,
80+
border: "none",
81+
},
82+
".cm-activeLineGutter": { backgroundColor: config.background },
83+
84+
".cm-lineNumbers .cm-gutterElement": { color: config.lineNumber },
85+
".cm-lineNumbers .cm-activeLineGutter": { color: config.lineNumberActive },
86+
87+
".cm-foldPlaceholder": {
88+
backgroundColor: "transparent",
89+
border: "none",
90+
color: config.foreground,
91+
},
92+
".cm-tooltip": {
93+
border: `1px solid ${config.dropdownBorder}`,
94+
backgroundColor: config.dropdownBackground,
95+
color: config.foreground,
96+
},
97+
".cm-tooltip .cm-tooltip-arrow:before": {
98+
borderTopColor: "transparent",
99+
borderBottomColor: "transparent",
100+
},
101+
".cm-tooltip .cm-tooltip-arrow:after": {
102+
borderTopColor: config.foreground,
103+
borderBottomColor: config.foreground,
104+
},
105+
".cm-tooltip-autocomplete": {
106+
"& > ul > li[aria-selected]": {
107+
background: config.selection,
108+
color: config.foreground,
109+
},
110+
},
111+
},
112+
{ dark: config.dark },
113+
);
114+
115+
export const tomorrowNightBrightHighlightStyle = HighlightStyle.define([
116+
{ tag: t.keyword, color: config.keyword },
117+
{
118+
tag: [t.name, t.deleted, t.character, t.macroName],
119+
color: config.variable,
120+
},
121+
{ tag: [t.propertyName], color: config.function },
122+
{
123+
tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)],
124+
color: config.string,
125+
},
126+
{ tag: [t.function(t.variableName), t.labelName], color: config.function },
127+
{
128+
tag: [t.color, t.constant(t.name), t.standard(t.name)],
129+
color: config.constant,
130+
},
131+
{ tag: [t.definition(t.name), t.separator], color: config.variable },
132+
{ tag: [t.className], color: config.class },
133+
{
134+
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
135+
color: config.number,
136+
},
137+
{ tag: [t.typeName], color: config.type },
138+
{ tag: [t.operator, t.operatorKeyword], color: config.operator },
139+
{ tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
140+
{ tag: [t.meta, t.comment], color: config.comment },
141+
{ tag: t.tagName, color: config.tag },
142+
{ tag: t.strong, fontWeight: "bold" },
143+
{ tag: t.emphasis, fontStyle: "italic" },
144+
{ tag: t.link, textDecoration: "underline" },
145+
{ tag: t.heading, fontWeight: "bold", color: config.heading },
146+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable },
147+
{ tag: t.invalid, color: config.invalid },
148+
{ tag: t.strikethrough, textDecoration: "line-through" },
149+
]);
150+
151+
export function tomorrowNightBright() {
152+
return [
153+
tomorrowNightBrightTheme,
154+
syntaxHighlighting(tomorrowNightBrightHighlightStyle),
155+
];
156+
}
157+
158+
export default tomorrowNightBright;

0 commit comments

Comments
 (0)