Skip to content

Commit 6a2bf01

Browse files
committedAug 26, 2023
feat(theme): add tomorrow-night-blue theme.
1 parent 934cb75 commit 6a2bf01

File tree

28 files changed

+719
-242
lines changed

28 files changed

+719
-242
lines changed
 

‎.github/workflows/ci.yml

+7
Original file line numberDiff line numberDiff line change
@@ -316,6 +316,13 @@ jobs:
316316
env:
317317
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
318318

319+
- name: 📦 @uiw/codemirror-theme-tomorrow-night-blue publish to NPM
320+
run: npm publish --access public
321+
working-directory: ./themes/tomorrow-night-blue/
322+
continue-on-error: true
323+
env:
324+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
325+
319326
- name: 📦 @uiw/codemirror-theme-vscode publish to NPM
320327
run: npm publish --access public
321328
working-directory: ./themes/vscode/

‎core/README.md

+34-33
Large diffs are not rendered by default.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
{
2+
"type": "dark",
3+
"colors": {
4+
"focusBorder": "#bbdaff",
5+
"errorForeground": "#a92049",
6+
"input.background": "#001733",
7+
"dropdown.background": "#001733",
8+
"quickInputList.focusBackground": "#ffffff60",
9+
"list.activeSelectionBackground": "#ffffff60",
10+
"list.inactiveSelectionBackground": "#ffffff40",
11+
"list.hoverBackground": "#ffffff30",
12+
"list.highlightForeground": "#bbdaff",
13+
"pickerGroup.foreground": "#bbdaff",
14+
"editor.background": "#002451",
15+
"editor.foreground": "#ffffff",
16+
"editor.selectionBackground": "#003f8e",
17+
"minimap.selectionHighlight": "#003f8e",
18+
"editor.lineHighlightBackground": "#00346e",
19+
"editorLineNumber.activeForeground": "#949494",
20+
"editorCursor.foreground": "#ffffff",
21+
"editorWhitespace.foreground": "#404f7d",
22+
"editorWidget.background": "#001c40",
23+
"editorHoverWidget.background": "#001c40",
24+
"editorHoverWidget.border": "#ffffff44",
25+
"editorGroup.border": "#404f7d",
26+
"editorGroupHeader.tabsBackground": "#001733",
27+
"editorGroup.dropBackground": "#25375daa",
28+
"peekViewResult.background": "#001c40",
29+
"tab.inactiveBackground": "#001c40",
30+
"tab.lastPinnedBorder": "#007acc80",
31+
"debugToolBar.background": "#001c40",
32+
"titleBar.activeBackground": "#001126",
33+
"statusBar.background": "#001126",
34+
"statusBarItem.remoteBackground": "#0e639c",
35+
"ports.iconRunningProcessForeground": "#bbdaff",
36+
"statusBar.noFolderBackground": "#001126",
37+
"statusBar.debuggingBackground": "#001126",
38+
"activityBar.background": "#001733",
39+
"activityBarItem.profilesBackground": "#003271",
40+
"progressBar.background": "#bbdaffcc",
41+
"badge.background": "#bbdaffcc",
42+
"badge.foreground": "#001733",
43+
"sideBar.background": "#001c40",
44+
"terminal.ansiBlack": "#111111",
45+
"terminal.ansiRed": "#ff9da4",
46+
"terminal.ansiGreen": "#d1f1a9",
47+
"terminal.ansiYellow": "#ffeead",
48+
"terminal.ansiBlue": "#bbdaff",
49+
"terminal.ansiMagenta": "#ebbbff",
50+
"terminal.ansiCyan": "#99ffff",
51+
"terminal.ansiWhite": "#cccccc",
52+
"terminal.ansiBrightBlack": "#333333",
53+
"terminal.ansiBrightRed": "#ff7882",
54+
"terminal.ansiBrightGreen": "#b8f171",
55+
"terminal.ansiBrightYellow": "#ffe580",
56+
"terminal.ansiBrightBlue": "#80baff",
57+
"terminal.ansiBrightMagenta": "#d778ff",
58+
"terminal.ansiBrightCyan": "#78ffff",
59+
"terminal.ansiBrightWhite": "#ffffff"
60+
},
61+
"tokenColors": [
62+
{
63+
"settings": {
64+
"background": "#002451",
65+
"foreground": "#FFFFFF"
66+
}
67+
},
68+
{
69+
"scope": [
70+
"meta.embedded",
71+
"source.groovy.embedded",
72+
"meta.jsx.children",
73+
"string meta.image.inline.markdown",
74+
"variable.legacy.builtin.python"
75+
],
76+
"settings": {
77+
"foreground": "#FFFFFF"
78+
}
79+
},
80+
{
81+
"name": "Comment",
82+
"scope": "comment",
83+
"settings": {
84+
"foreground": "#7285B7"
85+
}
86+
},
87+
{
88+
"name": "Foreground, Operator",
89+
"scope": "keyword.operator.class, keyword.operator, constant.other, source.php.embedded.line",
90+
"settings": {
91+
"fontStyle": "",
92+
"foreground": "#FFFFFF"
93+
}
94+
},
95+
{
96+
"name": "Variable, String Link, Regular Expression, Tag Name, GitGutter deleted",
97+
"scope": "variable, support.other.variable, string.other.link, string.regexp, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag, markup.deleted.git_gutter",
98+
"settings": {
99+
"foreground": "#FF9DA4"
100+
}
101+
},
102+
{
103+
"name": "Number, Constant, Function Argument, Tag Attribute, Embedded",
104+
"scope": "constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit",
105+
"settings": {
106+
"fontStyle": "",
107+
"foreground": "#FFC58F"
108+
}
109+
},
110+
{
111+
"name": "Class, Support",
112+
"scope": "entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution, support.type, support.class",
113+
"settings": {
114+
"fontStyle": "",
115+
"foreground": "#FFEEAD"
116+
}
117+
},
118+
{
119+
"name": "String, Symbols, Inherited Class, Markup Heading, GitGutter inserted",
120+
"scope": "string, constant.other.symbol, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter",
121+
"settings": {
122+
"fontStyle": "",
123+
"foreground": "#D1F1A9"
124+
}
125+
},
126+
{
127+
"name": "Operator, Misc",
128+
"scope": "keyword.operator, constant.other.color",
129+
"settings": {
130+
"foreground": "#99FFFF"
131+
}
132+
},
133+
{
134+
"name": "Function, Special Method, Block Level, GitGutter changed",
135+
"scope": "entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level, markup.changed.git_gutter",
136+
"settings": {
137+
"fontStyle": "",
138+
"foreground": "#BBDAFF"
139+
}
140+
},
141+
{
142+
"name": "Keyword, Storage",
143+
"scope": "keyword, storage, storage.type, entity.name.tag.css",
144+
"settings": {
145+
"fontStyle": "",
146+
"foreground": "#EBBBFF"
147+
}
148+
},
149+
{
150+
"name": "Invalid",
151+
"scope": "invalid",
152+
"settings": {
153+
"fontStyle": "",
154+
"foreground": "#a92049"
155+
}
156+
},
157+
{
158+
"name": "Separator",
159+
"scope": "meta.separator",
160+
"settings": {
161+
"foreground": "#FFFFFF"
162+
}
163+
},
164+
{
165+
"name": "Deprecated",
166+
"scope": "invalid.deprecated",
167+
"settings": {
168+
"fontStyle": "",
169+
"foreground": "#cd9731"
170+
}
171+
},
172+
{
173+
"name": "Diff foreground",
174+
"scope": "markup.inserted.diff, markup.deleted.diff, meta.diff.header.to-file, meta.diff.header.from-file",
175+
"settings": {
176+
"foreground": "#FFFFFF"
177+
}
178+
},
179+
{
180+
"name": "Diff insertion",
181+
"scope": "markup.inserted.diff, meta.diff.header.to-file",
182+
"settings": {
183+
"foreground": "#718c00"
184+
}
185+
},
186+
{
187+
"name": "Diff deletion",
188+
"scope": "markup.deleted.diff, meta.diff.header.from-file",
189+
"settings": {
190+
"foreground": "#c82829"
191+
}
192+
},
193+
{
194+
"name": "Diff header",
195+
"scope": "meta.diff.header.from-file, meta.diff.header.to-file",
196+
"settings": {
197+
"foreground": "#4271ae"
198+
}
199+
},
200+
{
201+
"name": "Diff range",
202+
"scope": "meta.diff.range",
203+
"settings": {
204+
"fontStyle": "italic",
205+
"foreground": "#3e999f"
206+
}
207+
},
208+
{
209+
"name": "Markup Quote",
210+
"scope": "markup.quote",
211+
"settings": {
212+
"foreground": "#FFC58F"
213+
}
214+
},
215+
{
216+
"name": "Markup Lists",
217+
"scope": "markup.list",
218+
"settings": {
219+
"foreground": "#BBDAFF"
220+
}
221+
},
222+
{
223+
"name": "Markup Styling",
224+
"scope": "markup.bold, markup.italic",
225+
"settings": {
226+
"foreground": "#FFC58F"
227+
}
228+
},
229+
{
230+
"name": "Markup: Strong",
231+
"scope": "markup.bold",
232+
"settings": {
233+
"fontStyle": "bold"
234+
}
235+
},
236+
{
237+
"name": "Markup: Emphasis",
238+
"scope": "markup.italic",
239+
"settings": {
240+
"fontStyle": "italic"
241+
}
242+
},
243+
{
244+
"scope": "markup.strikethrough",
245+
"settings": {
246+
"fontStyle": "strikethrough"
247+
}
248+
},
249+
{
250+
"name": "Markup Inline",
251+
"scope": "markup.inline.raw",
252+
"settings": {
253+
"fontStyle": "",
254+
"foreground": "#FF9DA4"
255+
}
256+
},
257+
{
258+
"name": "Markup Headings",
259+
"scope": "markup.heading",
260+
"settings": {
261+
"fontStyle": "bold"
262+
}
263+
},
264+
{
265+
"scope": "token.info-token",
266+
"settings": {
267+
"foreground": "#6796e6"
268+
}
269+
},
270+
{
271+
"scope": "token.warn-token",
272+
"settings": {
273+
"foreground": "#cd9731"
274+
}
275+
},
276+
{
277+
"scope": "token.error-token",
278+
"settings": {
279+
"foreground": "#f44747"
280+
}
281+
},
282+
{
283+
"scope": "token.debug-token",
284+
"settings": {
285+
"foreground": "#b267e6"
286+
}
287+
}
288+
],
289+
"semanticHighlighting": true
290+
}

‎themes/_scripts/main.mjs

+20-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import FS from 'node:fs/promises';
44
const require = createRequire(import.meta.url);
55

66
const includes = (data, ...arg) => {
7-
const scope = typeof data.scope === 'string' ? data.scope.split(' ').filter(Boolean) : data.scope || [];
7+
const isComma = typeof data.scope === 'string' && data.scope.includes(',');
8+
const scope = typeof data.scope === 'string' ? data.scope.split(isComma ? ',' : ' ').filter(Boolean).map(t => t.trim()) : data.scope || [];
89
const isInclude = !![scope||[]].flat().find(elm => arg.includes(elm));
910
return isInclude ? getForeground(data.settings.foreground) : undefined;
1011
}
@@ -17,7 +18,8 @@ function format(data = {}, dark = false) {
1718
// Layout
1819
background: colors['editor.background'],
1920
foreground: colors['editor.foreground'] || colors['input.foreground'],
20-
selection: colors['editor.selectionBackground'],
21+
selection: colors['editor.wordHighlightBackground'] || colors['editor.selectionBackground'],
22+
selectionMatch: colors['editor.wordHighlightStrongBackground'] || colors['editor.selectionBackground'],
2123
cursor: colors['editorCursor.foreground'] || colors['foreground'],
2224
dropdownBackground: colors['dropdown.background'],
2325
dropdownBorder: colors['dropdown.border'] || colors['foreground'],
@@ -127,6 +129,22 @@ const getString = (obj) => `export const config = ${JSON.stringify(obj, null, 2)
127129
themePath = '../monokai-dimmed/src/color.ts';
128130
await FS.writeFile(themePath, getString(monokaiDimmed));
129131
console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
132+
133+
const solarizedDark = format(require('./data/solarized.dark.json'));
134+
themePath = '../solarized/src/dark-color.ts';
135+
await FS.writeFile(themePath, getString(solarizedDark));
136+
console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
137+
138+
const solarizedLight = format(require('./data/solarized.light.json'));
139+
themePath = '../solarized/src/light-color.ts';
140+
await FS.writeFile(themePath, getString(solarizedLight));
141+
console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
142+
143+
const tomorrowNightBlue = format(require('./data/tomorrow-night-blue.json'));
144+
themePath = '../tomorrow-night-blue/src/color.ts';
145+
await FS.writeFile(themePath, getString(tomorrowNightBlue));
146+
console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
147+
130148
// const themeSolarizedDark = format(require('./data/solarized.dark.json'), true)
131149
// console.log('~~~::', themeSolarizedDark);
132150
// const themeSolarizedLight = format(require('./data/solarized.light.json'))

‎themes/abyss/src/color.ts

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export const config = {
22
background: '#000c18',
33
foreground: '#6688cc',
44
selection: '#770811',
5+
selectionMatch: '#770811',
56
cursor: '#ddbb88',
67
dropdownBackground: '#181f2f',
78
activeLine: '#082050',

‎themes/abyss/src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const defaultSettingsAbyss: CreateThemeOptions['settings'] = {
77
foreground: config.foreground,
88
caret: config.cursor,
99
selection: config.selection,
10-
selectionMatch: config.selection,
10+
selectionMatch: config.selectionMatch,
1111
gutterBackground: config.background,
1212
gutterForeground: config.foreground,
1313
lineHighlight: config.activeLine,

‎themes/all/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,12 @@ export * from '@uiw/codemirror-theme-xcode';
281281
<img width="436" alt="codemirror-theme-tokyo-night-storm" src="https://user-images.githubusercontent.com/1680273/206097179-8a490b97-87da-4285-a9bc-b0c9f510e7ed.png">
282282
</a>
283283

284+
### tomorrow-night-blue
285+
286+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/tomorrow-night-blue">
287+
<img width="436" alt="codemirror-theme-tomorrow-night-blue" src="https://github.com/uiwjs/react-codemirror/assets/1680273/dcc31c7a-70d7-4c4d-bf9f-a7e8212030d8">
288+
</a>
289+
284290
### vscode
285291

286292
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/vscode/dark">

‎themes/all/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"@uiw/codemirror-theme-tokyo-night": "4.21.10",
5050
"@uiw/codemirror-theme-tokyo-night-day": "4.21.10",
5151
"@uiw/codemirror-theme-tokyo-night-storm": "4.21.10",
52+
"@uiw/codemirror-theme-tomorrow-night-blue": "4.21.10",
5253
"@uiw/codemirror-theme-vscode": "4.21.10",
5354
"@uiw/codemirror-theme-xcode": "4.21.10",
5455
"@uiw/codemirror-themes": "4.21.10"

‎themes/all/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,6 @@ export * from '@uiw/codemirror-theme-sublime';
2525
export * from '@uiw/codemirror-theme-tokyo-night';
2626
export * from '@uiw/codemirror-theme-tokyo-night-storm';
2727
export * from '@uiw/codemirror-theme-tokyo-night-day';
28+
export * from '@uiw/codemirror-theme-tomorrow-night-blue';
2829
export * from '@uiw/codemirror-theme-vscode';
2930
export * from '@uiw/codemirror-theme-xcode';

‎themes/kimbie/src/color.ts

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export const config = {
22
background: '#221a0f',
33
foreground: '#d3af86',
44
selection: '#84613daa',
5+
selectionMatch: '#84613daa',
56
cursor: '#d3af86',
67
dropdownBackground: '#51412c',
78
activeLine: '#5e452b',

‎themes/monokai-dimmed/src/color.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
export const config = {
22
background: '#1e1e1e',
33
foreground: '#c5c8c6',
4-
selection: '#676b7180',
4+
selection: '#4747a180',
5+
selectionMatch: '#6767ce80',
56
cursor: '#c07020',
67
dropdownBackground: '#525252',
78
activeLine: '#303030',
@@ -11,14 +12,14 @@ export const config = {
1112
variable: '#c7444a',
1213
parameter: '#6089B4',
1314
function: '#9872A2',
14-
string: '#D0B344',
15-
constant: null,
16-
type: '#C7444A',
15+
string: '#D08442',
16+
constant: '#8080FF',
17+
type: '#9B0000',
1718
class: '#CE6700',
1819
number: '#6089B4',
1920
comment: '#9A9B99',
2021
heading: '#D0B344',
2122
invalid: '#FF0B00',
22-
regexp: '#D0B344',
23+
regexp: '#D08442',
2324
tag: '#6089B4',
2425
};

‎themes/monokai/src/color.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
export const config = {
22
background: '#272822',
33
foreground: '#f8f8f2',
4-
selection: '#878b9180',
4+
selection: '#4a4a7680',
5+
selectionMatch: '#6a6a9680',
56
cursor: '#f8f8f0',
67
dropdownBackground: '#414339',
78
activeLine: '#3e3d32',
@@ -12,8 +13,8 @@ export const config = {
1213
parameter: '#FD971F',
1314
function: '#66D9EF',
1415
string: '#E6DB74',
15-
constant: null,
16-
type: null,
16+
constant: '#AE81FF',
17+
type: '#66D9EF',
1718
class: '#A6E22E',
1819
number: '#AE81FF',
1920
comment: '#88846f',

‎themes/quietlight/src/color.ts

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export const config = {
22
background: '#F5F5F5',
33
foreground: '#333333',
44
selection: '#C9D0D9',
5+
selectionMatch: '#C9D0D9',
56
cursor: '#54494B',
67
dropdownBackground: '#F5F5F5',
78
activeLine: '#E4F6D4',

‎themes/red/src/color.ts

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export const config = {
22
background: '#390000',
33
foreground: '#F8F8F8',
44
selection: '#750000',
5+
selectionMatch: '#750000',
56
cursor: '#970000',
67
dropdownBackground: '#580000',
78
activeLine: '#ff000033',

‎themes/solarized/src/dark-color.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export const config = {
2+
background: '#002B36',
3+
foreground: '#839496',
4+
selection: '#004454AA',
5+
selectionMatch: '#005A6FAA',
6+
cursor: '#D30102',
7+
dropdownBackground: '#00212B',
8+
dropdownBorder: '#2AA19899',
9+
activeLine: '#073642',
10+
matchingBracket: '#073642',
11+
keyword: '#859900',
12+
storage: '#93A1A1',
13+
variable: '#268BD2',
14+
parameter: '#268BD2',
15+
function: '#268BD2',
16+
string: '#2AA198',
17+
constant: '#CB4B16',
18+
type: '#859900',
19+
class: '#268BD2',
20+
number: '#D33682',
21+
comment: '#586E75',
22+
heading: '#268BD2',
23+
invalid: '#DC322F',
24+
regexp: '#DC322F',
25+
tag: '#268BD2',
26+
};

‎themes/solarized/src/dark.ts

+30-98
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import { tags as t } from '@lezer/highlight';
22
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
3+
import { config as c } from './dark-color';
34

45
export const defaultSettingsSolarizedDark: CreateThemeOptions['settings'] = {
5-
background: '#002b36',
6-
foreground: '#93a1a1',
7-
caret: '#839496',
8-
selection: '#173541',
9-
selectionMatch: '#aafe661a',
10-
gutterBackground: '#00252f',
11-
gutterForeground: '#839496',
12-
lineHighlight: '#173541',
6+
background: c.background,
7+
foreground: c.foreground,
8+
caret: c.cursor,
9+
selection: c.selection,
10+
selectionMatch: c.selection,
11+
gutterBackground: c.background,
12+
gutterForeground: c.foreground,
13+
gutterBorder: 'transparent',
14+
lineHighlight: c.activeLine,
1315
};
1416

1517
export const solarizedDarkInit = (options?: Partial<CreateThemeOptions>) => {
@@ -21,97 +23,27 @@ export const solarizedDarkInit = (options?: Partial<CreateThemeOptions>) => {
2123
...settings,
2224
},
2325
styles: [
24-
{ tag: t.keyword, color: '#859900' },
25-
{
26-
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
27-
color: '#2aa198',
28-
},
29-
{ tag: [t.variableName], color: '#93a1a1' },
30-
{ tag: [t.function(t.variableName)], color: '#268bd2' },
31-
{ tag: [t.labelName], color: '#d33682' },
32-
{
33-
tag: [t.color, t.constant(t.name), t.standard(t.name)],
34-
color: '#b58900',
35-
},
36-
{ tag: [t.definition(t.name), t.separator], color: '#2aa198' },
37-
{ tag: [t.brace], color: '#d33682' },
38-
{
39-
tag: [t.annotation],
40-
color: '#d30102',
41-
},
42-
{
43-
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
44-
color: '#d33682',
45-
},
46-
{
47-
tag: [t.typeName, t.className],
48-
color: '#cb4b16',
49-
},
50-
{
51-
tag: [t.operator, t.operatorKeyword],
52-
color: '#6c71c4',
53-
},
54-
{
55-
tag: [t.tagName],
56-
color: '#268bd2',
57-
},
58-
{
59-
tag: [t.squareBracket],
60-
color: '#dc322f',
61-
},
62-
{
63-
tag: [t.angleBracket],
64-
color: '#586e75',
65-
},
66-
{
67-
tag: [t.attributeName],
68-
color: '#93a1a1',
69-
},
70-
{
71-
tag: [t.regexp],
72-
color: '#d30102',
73-
},
74-
{
75-
tag: [t.quote],
76-
color: '#859900',
77-
},
78-
{ tag: [t.string], color: '#b58900' },
79-
{
80-
tag: t.link,
81-
color: '#2aa198',
82-
textDecoration: 'underline',
83-
textUnderlinePosition: 'under',
84-
},
85-
{
86-
tag: [t.url, t.escape, t.special(t.string)],
87-
color: '#b58900',
88-
},
89-
{ tag: [t.meta], color: '#dc322f' },
90-
{ tag: [t.comment], color: '#586e75', fontStyle: 'italic' },
91-
{ tag: t.strong, fontWeight: 'bold', color: '#eee8d5' },
92-
{ tag: t.emphasis, fontStyle: 'italic', color: '#859900' },
26+
{ tag: t.keyword, color: c.keyword },
27+
{ tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
28+
{ tag: [t.propertyName], color: c.function },
29+
{ tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
30+
{ tag: [t.function(t.variableName), t.labelName], color: c.function },
31+
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
32+
{ tag: [t.definition(t.name), t.separator], color: c.variable },
33+
{ tag: [t.className], color: c.class },
34+
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
35+
{ tag: [t.typeName], color: c.type, fontStyle: c.type },
36+
{ tag: [t.operator, t.operatorKeyword], color: c.keyword },
37+
{ tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
38+
{ tag: [t.meta, t.comment], color: c.comment },
39+
{ tag: t.tagName, color: c.tag },
40+
{ tag: t.strong, fontWeight: 'bold' },
41+
{ tag: t.emphasis, fontStyle: 'italic' },
42+
{ tag: t.link, textDecoration: 'underline' },
43+
{ tag: t.heading, fontWeight: 'bold', color: c.heading },
44+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
45+
{ tag: t.invalid, color: c.invalid },
9346
{ tag: t.strikethrough, textDecoration: 'line-through' },
94-
{ tag: t.heading, fontWeight: 'bold', color: '#b58900' },
95-
{ tag: t.heading1, fontWeight: 'bold', color: '#fdf6e3' },
96-
{
97-
tag: [t.heading2, t.heading3, t.heading4],
98-
fontWeight: 'bold',
99-
color: '#eee8d5',
100-
},
101-
{
102-
tag: [t.heading5, t.heading6],
103-
color: '#eee8d5',
104-
},
105-
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d33682' },
106-
{
107-
tag: [t.processingInstruction, t.inserted, t.contentSeparator],
108-
color: '#dc322f',
109-
},
110-
{
111-
tag: [t.contentSeparator],
112-
color: '#b58900',
113-
},
114-
{ tag: t.invalid, color: '#586e75', borderBottom: `1px dotted #dc322f` },
11547
...styles,
11648
],
11749
});

‎themes/solarized/src/light-color.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export const config = {
2+
background: '#FDF6E3',
3+
foreground: '#657B83',
4+
selection: '#EEE8D5',
5+
selectionMatch: '#EEE8D5',
6+
cursor: '#657B83',
7+
dropdownBackground: '#EEE8D5',
8+
dropdownBorder: '#D3AF86',
9+
activeLine: '#EEE8D5',
10+
matchingBracket: '#EEE8D5',
11+
keyword: '#859900',
12+
storage: '#586E75',
13+
variable: '#268BD2',
14+
parameter: '#268BD2',
15+
function: '#268BD2',
16+
string: '#2AA198',
17+
constant: '#CB4B16',
18+
type: '#859900',
19+
class: '#268BD2',
20+
number: '#D33682',
21+
comment: '#93A1A1',
22+
heading: '#268BD2',
23+
invalid: '#DC322F',
24+
regexp: '#DC322F',
25+
tag: '#268BD2',
26+
};

‎themes/solarized/src/light.ts

+30-98
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import { tags as t } from '@lezer/highlight';
22
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
3+
import { config as c } from './light-color';
34

45
export const defaultSettingsSolarizedLight: CreateThemeOptions['settings'] = {
5-
background: '#fdf6e3',
6-
foreground: '#657b83',
7-
caret: '#586e75',
8-
selection: '#dfd9c8',
9-
selectionMatch: '#dfd9c8',
10-
gutterBackground: '#00000010',
11-
gutterForeground: '#657b83',
12-
lineHighlight: '#dfd9c8',
6+
background: c.background,
7+
foreground: c.foreground,
8+
caret: c.cursor,
9+
selection: c.selection,
10+
selectionMatch: c.selectionMatch,
11+
gutterBackground: c.background,
12+
gutterForeground: c.foreground,
13+
gutterBorder: 'transparent',
14+
lineHighlight: c.activeLine,
1315
};
1416

1517
export const solarizedLightInit = (options?: Partial<CreateThemeOptions>) => {
@@ -21,97 +23,27 @@ export const solarizedLightInit = (options?: Partial<CreateThemeOptions>) => {
2123
...settings,
2224
},
2325
styles: [
24-
{ tag: t.keyword, color: '#859900' },
25-
{
26-
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
27-
color: '#2aa198',
28-
},
29-
{ tag: [t.variableName], color: '#268bd2' },
30-
{ tag: [t.function(t.variableName)], color: '#268bd2' },
31-
{ tag: [t.labelName], color: '#d33682' },
32-
{
33-
tag: [t.color, t.constant(t.name), t.standard(t.name)],
34-
color: '#b58900',
35-
},
36-
{ tag: [t.definition(t.name), t.separator], color: '#2aa198' },
37-
{ tag: [t.brace], color: '#d33682' },
38-
{
39-
tag: [t.annotation],
40-
color: '#d30102',
41-
},
42-
{
43-
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
44-
color: '#d33682',
45-
},
46-
{
47-
tag: [t.typeName, t.className],
48-
color: '#cb4b16',
49-
},
50-
{
51-
tag: [t.operator, t.operatorKeyword],
52-
color: '#6c71c4',
53-
},
54-
{
55-
tag: [t.tagName],
56-
color: '#268bd2',
57-
},
58-
{
59-
tag: [t.squareBracket],
60-
color: '#dc322f',
61-
},
62-
{
63-
tag: [t.angleBracket],
64-
color: '#073642',
65-
},
66-
{
67-
tag: [t.attributeName],
68-
color: '#93a1a1',
69-
},
70-
{
71-
tag: [t.regexp],
72-
color: '#d30102',
73-
},
74-
{
75-
tag: [t.quote],
76-
color: '#859900',
77-
},
78-
{ tag: [t.string], color: '#b58900' },
79-
{
80-
tag: t.link,
81-
color: '#2aa198',
82-
textDecoration: 'underline',
83-
textUnderlinePosition: 'under',
84-
},
85-
{
86-
tag: [t.url, t.escape, t.special(t.string)],
87-
color: '#b58900',
88-
},
89-
{ tag: [t.meta], color: '#dc322f' },
90-
{ tag: [t.comment], color: '#586e75', fontStyle: 'italic' },
91-
{ tag: t.strong, fontWeight: 'bold', color: '#586e75' },
92-
{ tag: t.emphasis, fontStyle: 'italic', color: '#859900' },
26+
{ tag: t.keyword, color: c.keyword },
27+
{ tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
28+
{ tag: [t.propertyName], color: c.function },
29+
{ tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
30+
{ tag: [t.function(t.variableName), t.labelName], color: c.function },
31+
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
32+
{ tag: [t.definition(t.name), t.separator], color: c.variable },
33+
{ tag: [t.className], color: c.class },
34+
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
35+
{ tag: [t.typeName], color: c.type, fontStyle: c.type },
36+
{ tag: [t.operator, t.operatorKeyword], color: c.keyword },
37+
{ tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
38+
{ tag: [t.meta, t.comment], color: c.comment },
39+
{ tag: t.tagName, color: c.tag },
40+
{ tag: t.strong, fontWeight: 'bold' },
41+
{ tag: t.emphasis, fontStyle: 'italic' },
42+
{ tag: t.link, textDecoration: 'underline' },
43+
{ tag: t.heading, fontWeight: 'bold', color: c.heading },
44+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
45+
{ tag: t.invalid, color: c.invalid },
9346
{ tag: t.strikethrough, textDecoration: 'line-through' },
94-
{ tag: t.heading, fontWeight: 'bold', color: '#b58900' },
95-
{ tag: t.heading1, fontWeight: 'bold', color: '#002b36' },
96-
{
97-
tag: [t.heading2, t.heading3, t.heading4],
98-
fontWeight: 'bold',
99-
color: '#002b36',
100-
},
101-
{
102-
tag: [t.heading5, t.heading6],
103-
color: '#002b36',
104-
},
105-
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d33682' },
106-
{
107-
tag: [t.processingInstruction, t.inserted, t.contentSeparator],
108-
color: '#dc322f',
109-
},
110-
{
111-
tag: [t.contentSeparator],
112-
color: '#b58900',
113-
},
114-
{ tag: t.invalid, color: '#073642', borderBottom: `1px dotted #dc322f` },
11547
...styles,
11648
],
11749
});

‎themes/theme/src/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export const createTheme = ({ theme, settings = {}, styles = [] }: CreateThemeOp
9797
themeOptions[
9898
'&.cm-focused .cm-selectionBackground, &.cm-focused .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection'
9999
] = {
100-
backgroundColor: settings.selection + ' !important',
100+
background: settings.selection + ' !important',
101101
};
102102
}
103103
if (settings.selectionMatch) {

‎themes/tomorrow-night-blue/README.md

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!--rehype:ignore:start-->
2+
3+
# TomorrowNightBlue Theme
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-tomorrow-night-blue.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-tomorrow-night-blue)
8+
9+
TomorrowNightBlue theme for cm6, generated from [vscode themes](https://github.com/microsoft/vscode/blob/main/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-color-theme.json).
10+
11+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/tomorrow-night-blue">
12+
<img width="436" alt="codemirror-theme-tomorrow-night-blue" src="https://github.com/uiwjs/react-codemirror/assets/1680273/dcc31c7a-70d7-4c4d-bf9f-a7e8212030d8">
13+
</a>
14+
15+
## Install
16+
17+
```bash
18+
npm install @uiw/codemirror-theme-tomorrow-night-blue --save
19+
```
20+
21+
```jsx
22+
import { tomorrowNightBlue, tomorrowNightBlueInit } from '@uiw/codemirror-theme-tomorrow-night-blue';
23+
24+
<CodeMirror theme={tomorrowNightBlue} />
25+
<CodeMirror
26+
theme={tomorrowNightBlueInit({
27+
settings: {
28+
caret: '#c6c6c6',
29+
fontFamily: 'monospace',
30+
}
31+
})}
32+
/>
33+
```
34+
35+
## API
36+
37+
```tsx
38+
import { CreateThemeOptions } from '@uiw/codemirror-themes';
39+
export declare const defaultSettingsTomorrowNightBlue: CreateThemeOptions['settings'];
40+
export declare const tomorrowNightBlueInit: (
41+
options?: Partial<CreateThemeOptions>,
42+
) => import('@codemirror/state').Extension;
43+
export declare const tomorrowNightBlue: import('@codemirror/state').Extension;
44+
```
45+
46+
## Usage
47+
48+
```jsx
49+
import CodeMirror from '@uiw/react-codemirror';
50+
import { tomorrowNightBlue } from '@uiw/codemirror-theme-tomorrow-night-blue';
51+
import { javascript } from '@codemirror/lang-javascript';
52+
53+
function App() {
54+
return (
55+
<CodeMirror
56+
value="console.log('hello world!');"
57+
height="200px"
58+
theme={tomorrowNightBlue}
59+
extensions={[javascript({ jsx: true })]}
60+
onChange={(value, viewUpdate) => {
61+
console.log('value:', value);
62+
}}
63+
/>
64+
);
65+
}
66+
export default App;
67+
```
68+
69+
```js
70+
import { EditorView } from '@codemirror/view';
71+
import { EditorState } from '@codemirror/state';
72+
import { javascript } from '@codemirror/lang-javascript';
73+
import { tomorrowNightBlue } from '@uiw/codemirror-theme-tomorrow-night-blue';
74+
75+
const state = EditorState.create({
76+
doc: 'my source code',
77+
extensions: [tomorrowNightBlue, javascript({ jsx: true })],
78+
});
79+
80+
const view = new EditorView({
81+
parent: document.querySelector('#editor'),
82+
state,
83+
});
84+
```
85+
86+
## Contributors
87+
88+
As always, thanks to our amazing contributors!
89+
90+
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
91+
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
92+
</a>
93+
94+
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
95+
96+
## License
97+
98+
Licensed under the MIT License.
+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "@uiw/codemirror-theme-tomorrow-night-blue",
3+
"version": "4.21.10",
4+
"description": "Theme tomorrow-night-blue for CodeMirror.",
5+
"homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/tomorrow-night-blue",
6+
"author": "kenny wong <wowohoo@qq.com>",
7+
"license": "MIT",
8+
"main": "./cjs/index.js",
9+
"module": "./esm/index.js",
10+
"scripts": {
11+
"watch": "tsbb watch src/*.ts --use-babel",
12+
"build": "tsbb build src/*.ts --use-babel"
13+
},
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/uiwjs/react-codemirror.git"
17+
},
18+
"files": [
19+
"src",
20+
"esm",
21+
"cjs"
22+
],
23+
"dependencies": {
24+
"@uiw/codemirror-themes": "4.21.10"
25+
},
26+
"keywords": [
27+
"codemirror",
28+
"codemirror-theme",
29+
"codemirror6",
30+
"theme",
31+
"tomorrow-night-blue",
32+
"syntax",
33+
"ide",
34+
"code"
35+
]
36+
}
+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
export const config = {
2+
background: '#002451',
3+
foreground: '#ffffff',
4+
selection: '#003f8e',
5+
selectionMatch: '#003f8e',
6+
cursor: '#ffffff',
7+
dropdownBackground: '#001733',
8+
activeLine: '#00346e',
9+
matchingBracket: '#00346e',
10+
keyword: '#EBBBFF',
11+
storage: '#EBBBFF',
12+
variable: '#FFC58F',
13+
parameter: '#FFC58F',
14+
function: '#BBDAFF',
15+
string: '#D1F1A9',
16+
constant: '#FFC58F',
17+
type: '#FFEEAD',
18+
class: '#BBDAFF',
19+
number: '#FFC58F',
20+
comment: '#7285B7',
21+
heading: '#D1F1A9',
22+
invalid: '#a92049',
23+
regexp: '#D1F1A9',
24+
tag: '#FF9DA4',
25+
};
+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { tags as t } from '@lezer/highlight';
2+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
3+
import { config as c } from './color';
4+
5+
export const defaultSettingsTomorrowNightBlue: CreateThemeOptions['settings'] = {
6+
background: c.background,
7+
foreground: c.foreground,
8+
caret: c.cursor,
9+
selection: c.selection,
10+
selectionMatch: c.selection,
11+
gutterBackground: c.background,
12+
gutterForeground: c.foreground,
13+
lineHighlight: c.activeLine,
14+
};
15+
16+
export const tomorrowNightBlueInit = (options?: Partial<CreateThemeOptions>) => {
17+
const { theme = 'dark', settings = {}, styles = [] } = options || {};
18+
return createTheme({
19+
theme: theme,
20+
settings: {
21+
...defaultSettingsTomorrowNightBlue,
22+
...settings,
23+
},
24+
styles: [
25+
{ tag: t.keyword, color: c.keyword },
26+
{ tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
27+
{ tag: [t.propertyName], color: c.function },
28+
{ tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
29+
{ tag: [t.function(t.variableName), t.labelName], color: c.function },
30+
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
31+
{ tag: [t.definition(t.name), t.separator], color: c.variable },
32+
{ tag: [t.className], color: c.class },
33+
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
34+
{ tag: [t.typeName], color: c.type, fontStyle: c.type },
35+
{ tag: [t.operator, t.operatorKeyword], color: c.keyword },
36+
{ tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
37+
{ tag: [t.meta, t.comment], color: c.comment },
38+
{ tag: t.tagName, color: c.tag },
39+
{ tag: t.strong, fontWeight: 'bold' },
40+
{ tag: t.emphasis, fontStyle: 'italic' },
41+
{ tag: t.link, textDecoration: 'underline' },
42+
{ tag: t.heading, fontWeight: 'bold', color: c.heading },
43+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
44+
{ tag: t.invalid, color: c.invalid },
45+
{ tag: t.strikethrough, textDecoration: 'line-through' },
46+
...styles,
47+
],
48+
});
49+
};
50+
51+
export const tomorrowNightBlue = tomorrowNightBlueInit();
+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "../../tsconfig",
3+
"include": ["src"],
4+
"compilerOptions": {
5+
"outDir": "./cjs",
6+
"baseUrl": ".",
7+
"noEmit": false
8+
}
9+
}

‎www/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
"@uiw/codemirror-theme-tokyo-night": "4.21.10",
7373
"@uiw/codemirror-theme-tokyo-night-day": "4.21.10",
7474
"@uiw/codemirror-theme-tokyo-night-storm": "4.21.10",
75+
"@uiw/codemirror-theme-tomorrow-night-blue": "4.21.10",
7576
"@uiw/codemirror-theme-vscode": "4.21.10",
7677
"@uiw/codemirror-theme-xcode": "4.21.10",
7778
"@uiw/codemirror-themes": "4.21.10",

‎www/src/pages/theme/Preview.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@ export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
6161
const themeName = themePkgNmae?.replace('@uiw/codemirror-theme-', '').replace('-', ' ');
6262
const themeExtensionName = themePkgNmae?.replace('@uiw/codemirror-theme-', '') + (!!mode ? `-${mode}` : '');
6363
const extension = themeData[toCamelCase(themeExtensionName) as keyof typeof themeData];
64-
console.log('extension', themeExtensionName);
6564
return (
6665
<Warpper>
6766
<Content>

‎www/src/pages/theme/themes/Datas.ts

+2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { sublime } from '@uiw/codemirror-theme-sublime';
2727
import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
2828
import { tokyoNightStorm } from '@uiw/codemirror-theme-tokyo-night-storm';
2929
import { tokyoNightDay } from '@uiw/codemirror-theme-tokyo-night-day';
30+
import { tomorrowNightBlue } from '@uiw/codemirror-theme-tomorrow-night-blue';
3031
import { xcodeLight, xcodeDark } from '@uiw/codemirror-theme-xcode';
3132

3233
export const themeData = {
@@ -64,6 +65,7 @@ export const themeData = {
6465
tokyoNight,
6566
tokyoNightStorm,
6667
tokyoNightDay,
68+
tomorrowNightBlue,
6769
vscodeDark,
6870
xcodeLight,
6971
xcodeDark,

‎www/src/router.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -555,6 +555,16 @@ export const routes: MenuRouteObject[] = [
555555
/>
556556
),
557557
},
558+
{
559+
path: 'data/tomorrow-night-blue',
560+
label: 'tomorrow night blue',
561+
element: (
562+
<Preview
563+
themePkg="@uiw/codemirror-theme-tomorrow-night-blue"
564+
path={() => import('@uiw/codemirror-theme-tomorrow-night-blue/README.md')}
565+
/>
566+
),
567+
},
558568
{
559569
path: 'data/vscode',
560570
element: <Navigate to="dark" replace />,

0 commit comments

Comments
 (0)
Please sign in to comment.