Skip to content

Commit 6cd63b5

Browse files
committedAug 25, 2023
feat(theme): add quietlight theme.
1 parent 21e75e2 commit 6cd63b5

18 files changed

+2042
-0
lines changed
 

‎.github/workflows/ci.yml

+8
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,14 @@ jobs:
123123
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
124124

125125

126+
- name: 📦 @uiw/codemirror-theme-quietlight publish to NPM
127+
run: npm publish --access public
128+
working-directory: ./themes/quietlight/
129+
continue-on-error: true
130+
env:
131+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
132+
133+
126134
- name: 📦 @uiw/codemirror-theme-solarized publish to NPM
127135
run: npm publish --access public
128136
working-directory: ./themes/solarized/

‎core/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ npm install @uiw/react-codemirror --save
7373
| `@uiw/codemirror-theme-noctis-lilac` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-noctis-lilac.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-noctis-lilac) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-noctis-lilac.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-noctis-lilac) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac) |
7474
| `@uiw/codemirror-theme-nord` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-nord.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-nord.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/nord) |
7575
| `@uiw/codemirror-theme-okaidia` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-okaidia.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-okaidia.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia) |
76+
| `@uiw/codemirror-theme-quietlight` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-quietlight.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-quietlight) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-quietlight.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-quietlight) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/quietlight) |
7677
| `@uiw/codemirror-theme-solarized` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-solarized.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-solarized) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-solarized.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-solarized) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/dark) |
7778
| `@uiw/codemirror-theme-sublime` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-sublime.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-sublime) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-sublime.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-sublime) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/sublime) |
7879
| `@uiw/codemirror-theme-tokyo-night` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-tokyo-night.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-tokyo-night.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night) |

‎themes/_scripts/README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Codemirror 6 Themes
2+
3+
Not perfect themes for [cm6](https://github.com/codemirror/dev/), generated from [vscode themes](https://github.com/microsoft/vscode/tree/main/extensions/theme-quietlight).
4+
5+
- [theme-abyss](https://github.com/microsoft/vscode/tree/main/extensions/theme-abyss)
6+
- [~~theme-defaults~~](https://github.com/microsoft/vscode/tree/main/extensions/theme-defaults)
7+
- [theme-kimbie-dark](https://github.com/microsoft/vscode/tree/main/extensions/theme-kimbie-dark)
8+
- [theme-monokai-dimmed](https://github.com/microsoft/vscode/tree/main/extensions/theme-monokai-dimmed)
9+
- [theme-monokai](https://github.com/microsoft/vscode/tree/main/extensions/theme-monokai)
10+
- [theme-quietlight](https://github.com/microsoft/vscode/tree/main/extensions/theme-quietlight)
11+
- [theme-red](https://github.com/microsoft/vscode/tree/main/extensions/theme-red)
12+
- [theme-seti](https://github.com/microsoft/vscode/tree/main/extensions/theme-seti)
13+
- [theme-solarized-dark](https://github.com/microsoft/vscode/tree/main/extensions/theme-solarized-dark)
14+
- [theme-solarized-light](https://github.com/microsoft/vscode/tree/main/extensions/theme-solarized-light)
15+
- [theme-tomorrow-night-blue](https://github.com/microsoft/vscode/tree/main/extensions/theme-tomorrow-night-blue)

‎themes/_scripts/data/quietlight.json

+487
Large diffs are not rendered by default.

‎themes/_scripts/data/red.json

+387
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,387 @@
1+
{
2+
"name": "Red",
3+
"colors": {
4+
"activityBar.background": "#580000",
5+
"tab.inactiveBackground": "#300a0a",
6+
"tab.activeBackground": "#490000",
7+
"tab.lastPinnedBorder": "#ff000044",
8+
"sideBar.background": "#330000",
9+
"statusBar.background": "#700000",
10+
"statusBar.noFolderBackground": "#700000",
11+
"statusBarItem.remoteBackground": "#c33",
12+
"ports.iconRunningProcessForeground": "#DB7E58",
13+
"editorGroupHeader.tabsBackground": "#330000",
14+
"titleBar.activeBackground": "#770000",
15+
"titleBar.inactiveBackground": "#772222",
16+
"selection.background": "#ff777788",
17+
"editor.background": "#390000",
18+
"editorGroup.border": "#ff666633",
19+
"editorCursor.foreground": "#970000",
20+
"editor.foreground": "#F8F8F8",
21+
"editorWhitespace.foreground": "#c10000",
22+
"editor.selectionBackground": "#750000",
23+
"minimap.selectionHighlight": "#750000",
24+
"editorLineNumber.foreground": "#ff777788",
25+
"editorLineNumber.activeForeground": "#ffbbbb88",
26+
"editorWidget.background": "#300000",
27+
"editorHoverWidget.background": "#300000",
28+
"editorSuggestWidget.background": "#300000",
29+
"editorSuggestWidget.border": "#220000",
30+
"editor.lineHighlightBackground": "#ff000033",
31+
"editor.hoverHighlightBackground": "#ff000044",
32+
"editor.selectionHighlightBackground": "#f5500039",
33+
"editorLink.activeForeground": "#FFD0AA",
34+
"peekViewTitle.background": "#550000",
35+
"peekView.border": "#ff000044",
36+
"peekViewResult.background": "#400000",
37+
"peekViewEditor.background": "#300000",
38+
"debugToolBar.background": "#660000",
39+
"focusBorder": "#ff6666aa",
40+
"button.background": "#833",
41+
"dropdown.background": "#580000",
42+
"input.background": "#580000",
43+
"inputOption.activeBorder": "#cc0000",
44+
"inputValidation.infoBackground": "#550000",
45+
"inputValidation.infoBorder": "#DB7E58",
46+
"list.hoverBackground": "#800000",
47+
"list.activeSelectionBackground": "#880000",
48+
"list.inactiveSelectionBackground": "#770000",
49+
"list.dropBackground": "#662222",
50+
"quickInputList.focusBackground": "#660000",
51+
"list.highlightForeground": "#ff4444",
52+
"pickerGroup.foreground": "#cc9999",
53+
"pickerGroup.border": "#ff000033",
54+
"badge.background": "#cc3333",
55+
"progressBar.background": "#cc3333",
56+
"errorForeground": "#ffeaea",
57+
"extensionButton.prominentBackground": "#cc3333",
58+
"extensionButton.prominentHoverBackground": "#cc333388"
59+
},
60+
"tokenColors": [
61+
{
62+
"settings": {
63+
"foreground": "#F8F8F8"
64+
}
65+
},
66+
{
67+
"scope": [
68+
"meta.embedded",
69+
"source.groovy.embedded",
70+
"string meta.image.inline.markdown",
71+
"variable.legacy.builtin.python"
72+
],
73+
"settings": {
74+
"foreground": "#F8F8F8"
75+
}
76+
},
77+
{
78+
"name": "Comment",
79+
"scope": "comment",
80+
"settings": {
81+
"fontStyle": "italic",
82+
"foreground": "#e7c0c0ff"
83+
}
84+
},
85+
{
86+
"name": "Constant",
87+
"scope": "constant",
88+
"settings": {
89+
"fontStyle": "",
90+
"foreground": "#994646ff"
91+
}
92+
},
93+
{
94+
"name": "Keyword",
95+
"scope": "keyword",
96+
"settings": {
97+
"fontStyle": "",
98+
"foreground": "#f12727ff"
99+
}
100+
},
101+
{
102+
"name": "Entity",
103+
"scope": "entity",
104+
"settings": {
105+
"fontStyle": "",
106+
"foreground": "#fec758ff"
107+
}
108+
},
109+
{
110+
"name": "Storage",
111+
"scope": "storage",
112+
"settings": {
113+
"fontStyle": "bold",
114+
"foreground": "#ff6262ff"
115+
}
116+
},
117+
{
118+
"name": "String",
119+
"scope": "string",
120+
"settings": {
121+
"fontStyle": "",
122+
"foreground": "#cd8d8dff"
123+
}
124+
},
125+
{
126+
"name": "Support",
127+
"scope": "support",
128+
"settings": {
129+
"fontStyle": "",
130+
"foreground": "#9df39fff"
131+
}
132+
},
133+
{
134+
"name": "Variable",
135+
"scope": "variable",
136+
"settings": {
137+
"fontStyle": "italic",
138+
"foreground": "#fb9a4bff"
139+
}
140+
},
141+
{
142+
"name": "Invalid",
143+
"scope": "invalid",
144+
"settings": {
145+
"foreground": "#ffffffff"
146+
}
147+
},
148+
{
149+
"name": "Entity inherited-class",
150+
"scope": "entity.other.inherited-class",
151+
"settings": {
152+
"fontStyle": "underline",
153+
"foreground": "#aa5507ff"
154+
}
155+
},
156+
{
157+
"scope": "constant.character",
158+
"settings": {
159+
"foreground": "#ec0d1e"
160+
}
161+
},
162+
{
163+
"scope": ["string constant", "constant.character.escape"],
164+
"settings": {
165+
"fontStyle": "",
166+
"foreground": "#ffe862ff"
167+
}
168+
},
169+
{
170+
"name": "String.regexp",
171+
"scope": "string.regexp",
172+
"settings": {
173+
"foreground": "#ffb454ff"
174+
}
175+
},
176+
{
177+
"name": "String variable",
178+
"scope": "string variable",
179+
"settings": {
180+
"foreground": "#edef7dff"
181+
}
182+
},
183+
{
184+
"name": "Support.function",
185+
"scope": "support.function",
186+
"settings": {
187+
"fontStyle": "",
188+
"foreground": "#ffb454ff"
189+
}
190+
},
191+
{
192+
"name": "Support.constant",
193+
"scope": ["support.constant", "support.variable"],
194+
"settings": {
195+
"fontStyle": "",
196+
"foreground": "#eb939aff"
197+
}
198+
},
199+
{
200+
"name": "Doctype/XML Processing",
201+
"scope": [
202+
"declaration.sgml.html declaration.doctype",
203+
"declaration.sgml.html declaration.doctype entity",
204+
"declaration.sgml.html declaration.doctype string",
205+
"declaration.xml-processing",
206+
"declaration.xml-processing entity",
207+
"declaration.xml-processing string"
208+
],
209+
"settings": {
210+
"fontStyle": "",
211+
"foreground": "#73817dff"
212+
}
213+
},
214+
{
215+
"name": "Meta.tag.A",
216+
"scope": ["declaration.tag", "declaration.tag entity", "meta.tag", "meta.tag entity"],
217+
"settings": {
218+
"fontStyle": "",
219+
"foreground": "#ec0d1eff"
220+
}
221+
},
222+
{
223+
"name": "css tag-name",
224+
"scope": "meta.selector.css entity.name.tag",
225+
"settings": {
226+
"fontStyle": "",
227+
"foreground": "#aa5507ff"
228+
}
229+
},
230+
{
231+
"name": "css#id",
232+
"scope": "meta.selector.css entity.other.attribute-name.id",
233+
"settings": {
234+
"foreground": "#fec758ff"
235+
}
236+
},
237+
{
238+
"name": "css.class",
239+
"scope": "meta.selector.css entity.other.attribute-name.class",
240+
"settings": {
241+
"fontStyle": "",
242+
"foreground": "#41a83eff"
243+
}
244+
},
245+
{
246+
"name": "css property-name:",
247+
"scope": "support.type.property-name.css",
248+
"settings": {
249+
"fontStyle": "",
250+
"foreground": "#96dd3bff"
251+
}
252+
},
253+
{
254+
"name": "css property-value;",
255+
"scope": [
256+
"meta.property-group support.constant.property-value.css",
257+
"meta.property-value support.constant.property-value.css"
258+
],
259+
"settings": {
260+
"fontStyle": "italic",
261+
"foreground": "#ffe862ff"
262+
}
263+
},
264+
{
265+
"name": "css additional-constants",
266+
"scope": ["meta.property-value support.constant.named-color.css", "meta.property-value constant"],
267+
"settings": {
268+
"fontStyle": "",
269+
"foreground": "#ffe862ff"
270+
}
271+
},
272+
{
273+
"name": "css @at-rule",
274+
"scope": "meta.preprocessor.at-rule keyword.control.at-rule",
275+
"settings": {
276+
"foreground": "#fd6209ff"
277+
}
278+
},
279+
{
280+
"name": "css constructor.argument",
281+
"scope": "meta.constructor.argument.css",
282+
"settings": {
283+
"fontStyle": "",
284+
"foreground": "#ec9799ff"
285+
}
286+
},
287+
{
288+
"name": "diff.header",
289+
"scope": ["meta.diff", "meta.diff.header"],
290+
"settings": {
291+
"fontStyle": "italic",
292+
"foreground": "#f8f8f8ff"
293+
}
294+
},
295+
{
296+
"name": "diff.deleted",
297+
"scope": "markup.deleted",
298+
"settings": {
299+
"foreground": "#ec9799ff"
300+
}
301+
},
302+
{
303+
"name": "diff.changed",
304+
"scope": "markup.changed",
305+
"settings": {
306+
"foreground": "#f8f8f8ff"
307+
}
308+
},
309+
{
310+
"name": "diff.inserted",
311+
"scope": "markup.inserted",
312+
"settings": {
313+
"foreground": "#41a83eff"
314+
}
315+
},
316+
{
317+
"name": "Markup Quote",
318+
"scope": "markup.quote",
319+
"settings": {
320+
"foreground": "#f12727ff"
321+
}
322+
},
323+
{
324+
"name": "Markup Lists",
325+
"scope": "markup.list",
326+
"settings": {
327+
"foreground": "#ff6262ff"
328+
}
329+
},
330+
{
331+
"name": "Markup Styling",
332+
"scope": ["markup.bold", "markup.italic"],
333+
"settings": {
334+
"foreground": "#fb9a4bff"
335+
}
336+
},
337+
{
338+
"name": "Markup: Strong",
339+
"scope": "markup.bold",
340+
"settings": {
341+
"fontStyle": "bold"
342+
}
343+
},
344+
{
345+
"name": "Markup: Emphasis",
346+
"scope": "markup.italic",
347+
"settings": {
348+
"fontStyle": "italic"
349+
}
350+
},
351+
{
352+
"scope": "markup.strikethrough",
353+
"settings": {
354+
"fontStyle": "strikethrough"
355+
}
356+
},
357+
{
358+
"name": "Markup Inline",
359+
"scope": "markup.inline.raw",
360+
"settings": {
361+
"fontStyle": "",
362+
"foreground": "#cd8d8dff"
363+
}
364+
},
365+
{
366+
"name": "Headings",
367+
"scope": ["markup.heading", "markup.heading.setext", "punctuation.definition.heading", "entity.name.section"],
368+
"settings": {
369+
"fontStyle": "bold",
370+
"foreground": "#fec758ff"
371+
}
372+
},
373+
{
374+
"name": "String interpolation",
375+
"scope": [
376+
"punctuation.definition.template-expression.begin",
377+
"punctuation.definition.template-expression.end",
378+
"punctuation.section.embedded",
379+
".format.placeholder"
380+
],
381+
"settings": {
382+
"foreground": "#ec0d1e"
383+
}
384+
}
385+
],
386+
"semanticHighlighting": true
387+
}

‎themes/_scripts/data/solarized.dark.json

+412
Large diffs are not rendered by default.
+383
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,383 @@
1+
{
2+
"name": "Solarized (light)",
3+
"tokenColors": [
4+
{
5+
"settings": {
6+
"foreground": "#657B83"
7+
}
8+
},
9+
{
10+
"scope": [
11+
"meta.embedded",
12+
"source.groovy.embedded",
13+
"string meta.image.inline.markdown",
14+
"variable.legacy.builtin.python"
15+
],
16+
"settings": {
17+
"foreground": "#657B83"
18+
}
19+
},
20+
{
21+
"name": "Comment",
22+
"scope": "comment",
23+
"settings": {
24+
"fontStyle": "italic",
25+
"foreground": "#93A1A1"
26+
}
27+
},
28+
{
29+
"name": "String",
30+
"scope": "string",
31+
"settings": {
32+
"foreground": "#2AA198"
33+
}
34+
},
35+
{
36+
"name": "Regexp",
37+
"scope": "string.regexp",
38+
"settings": {
39+
"foreground": "#DC322F"
40+
}
41+
},
42+
{
43+
"name": "Number",
44+
"scope": "constant.numeric",
45+
"settings": {
46+
"foreground": "#D33682"
47+
}
48+
},
49+
{
50+
"name": "Variable",
51+
"scope": ["variable.language", "variable.other"],
52+
"settings": {
53+
"foreground": "#268BD2"
54+
}
55+
},
56+
{
57+
"name": "Keyword",
58+
"scope": "keyword",
59+
"settings": {
60+
"foreground": "#859900"
61+
}
62+
},
63+
{
64+
"name": "Storage",
65+
"scope": "storage",
66+
"settings": {
67+
"fontStyle": "bold",
68+
"foreground": "#586E75"
69+
}
70+
},
71+
{
72+
"name": "Class name",
73+
"scope": ["entity.name.class", "entity.name.type", "entity.name.namespace", "entity.name.scope-resolution"],
74+
"settings": {
75+
"fontStyle": "",
76+
"foreground": "#CB4B16"
77+
}
78+
},
79+
{
80+
"name": "Function name",
81+
"scope": "entity.name.function",
82+
"settings": {
83+
"foreground": "#268BD2"
84+
}
85+
},
86+
{
87+
"name": "Variable start",
88+
"scope": "punctuation.definition.variable",
89+
"settings": {
90+
"foreground": "#859900"
91+
}
92+
},
93+
{
94+
"name": "Embedded code markers",
95+
"scope": ["punctuation.section.embedded.begin", "punctuation.section.embedded.end"],
96+
"settings": {
97+
"foreground": "#DC322F"
98+
}
99+
},
100+
{
101+
"name": "Built-in constant",
102+
"scope": ["constant.language", "meta.preprocessor"],
103+
"settings": {
104+
"foreground": "#B58900"
105+
}
106+
},
107+
{
108+
"name": "Support.construct",
109+
"scope": ["support.function.construct", "keyword.other.new"],
110+
"settings": {
111+
"foreground": "#CB4B16"
112+
}
113+
},
114+
{
115+
"name": "User-defined constant",
116+
"scope": ["constant.character", "constant.other"],
117+
"settings": {
118+
"foreground": "#CB4B16"
119+
}
120+
},
121+
{
122+
"name": "Inherited class",
123+
"scope": "entity.other.inherited-class",
124+
"settings": {
125+
"foreground": "#6C71C4"
126+
}
127+
},
128+
{
129+
"name": "Function argument",
130+
"scope": "variable.parameter",
131+
"settings": {}
132+
},
133+
{
134+
"name": "Tag name",
135+
"scope": "entity.name.tag",
136+
"settings": {
137+
"foreground": "#268BD2"
138+
}
139+
},
140+
{
141+
"name": "Tag start/end",
142+
"scope": "punctuation.definition.tag",
143+
"settings": {
144+
"foreground": "#93A1A1"
145+
}
146+
},
147+
{
148+
"name": "Tag attribute",
149+
"scope": "entity.other.attribute-name",
150+
"settings": {
151+
"foreground": "#93A1A1"
152+
}
153+
},
154+
{
155+
"name": "Library function",
156+
"scope": "support.function",
157+
"settings": {
158+
"foreground": "#268BD2"
159+
}
160+
},
161+
{
162+
"name": "Continuation",
163+
"scope": "punctuation.separator.continuation",
164+
"settings": {
165+
"foreground": "#DC322F"
166+
}
167+
},
168+
{
169+
"name": "Library constant",
170+
"scope": ["support.constant", "support.variable"],
171+
"settings": {}
172+
},
173+
{
174+
"name": "Library class/type",
175+
"scope": ["support.type", "support.class"],
176+
"settings": {
177+
"foreground": "#859900"
178+
}
179+
},
180+
{
181+
"name": "Library Exception",
182+
"scope": "support.type.exception",
183+
"settings": {
184+
"foreground": "#CB4B16"
185+
}
186+
},
187+
{
188+
"name": "Library variable",
189+
"scope": "support.other.variable",
190+
"settings": {}
191+
},
192+
{
193+
"name": "Invalid",
194+
"scope": "invalid",
195+
"settings": {
196+
"foreground": "#DC322F"
197+
}
198+
},
199+
{
200+
"name": "diff: header",
201+
"scope": ["meta.diff", "meta.diff.header"],
202+
"settings": {
203+
"fontStyle": "italic",
204+
"foreground": "#268BD2"
205+
}
206+
},
207+
{
208+
"name": "diff: deleted",
209+
"scope": "markup.deleted",
210+
"settings": {
211+
"fontStyle": "",
212+
"foreground": "#DC322F"
213+
}
214+
},
215+
{
216+
"name": "diff: changed",
217+
"scope": "markup.changed",
218+
"settings": {
219+
"fontStyle": "",
220+
"foreground": "#CB4B16"
221+
}
222+
},
223+
{
224+
"name": "diff: inserted",
225+
"scope": "markup.inserted",
226+
"settings": {
227+
"foreground": "#859900"
228+
}
229+
},
230+
{
231+
"name": "Markup Quote",
232+
"scope": "markup.quote",
233+
"settings": {
234+
"foreground": "#859900"
235+
}
236+
},
237+
{
238+
"name": "Markup Lists",
239+
"scope": "markup.list",
240+
"settings": {
241+
"foreground": "#B58900"
242+
}
243+
},
244+
{
245+
"name": "Markup Styling",
246+
"scope": ["markup.bold", "markup.italic"],
247+
"settings": {
248+
"foreground": "#D33682"
249+
}
250+
},
251+
{
252+
"name": "Markup: Strong",
253+
"scope": "markup.bold",
254+
"settings": {
255+
"fontStyle": "bold"
256+
}
257+
},
258+
{
259+
"name": "Markup: Emphasis",
260+
"scope": "markup.italic",
261+
"settings": {
262+
"fontStyle": "italic"
263+
}
264+
},
265+
{
266+
"scope": "markup.strikethrough",
267+
"settings": {
268+
"fontStyle": "strikethrough"
269+
}
270+
},
271+
{
272+
"name": "Markup Inline",
273+
"scope": "markup.inline.raw",
274+
"settings": {
275+
"fontStyle": "",
276+
"foreground": "#2AA198"
277+
}
278+
},
279+
{
280+
"name": "Markup Headings",
281+
"scope": "markup.heading",
282+
"settings": {
283+
"fontStyle": "bold",
284+
"foreground": "#268BD2"
285+
}
286+
},
287+
{
288+
"name": "Markup Setext Header",
289+
"scope": "markup.heading.setext",
290+
"settings": {
291+
"fontStyle": "",
292+
"foreground": "#268BD2"
293+
}
294+
}
295+
],
296+
"colors": {
297+
"focusBorder": "#b49471",
298+
"input.background": "#DDD6C1",
299+
"input.foreground": "#586E75",
300+
"input.placeholderForeground": "#586E75AA",
301+
"inputOption.activeBorder": "#D3AF86",
302+
"badge.background": "#B58900AA",
303+
"progressBar.background": "#B58900",
304+
"dropdown.background": "#EEE8D5",
305+
"dropdown.border": "#D3AF86",
306+
"button.background": "#AC9D57",
307+
"selection.background": "#878b9180",
308+
"list.activeSelectionBackground": "#DFCA88",
309+
"list.activeSelectionForeground": "#6C6C6C",
310+
"quickInputList.focusBackground": "#DFCA8866",
311+
"list.hoverBackground": "#DFCA8844",
312+
"list.inactiveSelectionBackground": "#D1CBB8",
313+
"list.highlightForeground": "#B58900",
314+
"editor.background": "#FDF6E3",
315+
"editor.foreground": "#657B83",
316+
"notebook.cellEditorBackground": "#F7F0E0",
317+
"editorWidget.background": "#EEE8D5",
318+
"editorCursor.foreground": "#657B83",
319+
"editorWhitespace.foreground": "#586E7580",
320+
"editor.lineHighlightBackground": "#EEE8D5",
321+
"editor.selectionBackground": "#EEE8D5",
322+
"minimap.selectionHighlight": "#EEE8D5",
323+
"editorIndentGuide.background": "#586E7580",
324+
"editorIndentGuide.activeBackground": "#081E2580",
325+
"editorHoverWidget.background": "#CCC4B0",
326+
"editorLineNumber.activeForeground": "#567983",
327+
"peekViewResult.background": "#EEE8D5",
328+
"peekViewEditor.background": "#FFFBF2",
329+
"peekViewTitle.background": "#EEE8D5",
330+
"peekView.border": "#B58900",
331+
"peekViewEditor.matchHighlightBackground": "#7744AA40",
332+
"titleBar.activeBackground": "#EEE8D5",
333+
"editorGroup.border": "#DDD6C1",
334+
"editorGroup.dropBackground": "#DDD6C1AA",
335+
"editorGroupHeader.tabsBackground": "#D9D2C2",
336+
"tab.border": "#DDD6C1",
337+
"tab.activeBackground": "#FDF6E3",
338+
"tab.inactiveForeground": "#586E75",
339+
"tab.inactiveBackground": "#D3CBB7",
340+
"tab.activeModifiedBorder": "#cb4b16",
341+
"tab.lastPinnedBorder": "#FDF6E3",
342+
"activityBar.background": "#DDD6C1",
343+
"activityBar.foreground": "#584c27",
344+
"activityBarBadge.background": "#B58900",
345+
"panel.border": "#DDD6C1",
346+
"sideBar.background": "#EEE8D5",
347+
"sideBarTitle.foreground": "#586E75",
348+
"statusBar.foreground": "#586E75",
349+
"statusBar.background": "#EEE8D5",
350+
"statusBar.debuggingBackground": "#EEE8D5",
351+
"statusBar.noFolderBackground": "#EEE8D5",
352+
"statusBarItem.remoteBackground": "#AC9D57",
353+
"ports.iconRunningProcessForeground": "#2AA19899",
354+
"statusBarItem.prominentBackground": "#DDD6C1",
355+
"statusBarItem.prominentHoverBackground": "#DDD6C199",
356+
"debugToolBar.background": "#DDD6C1",
357+
"debugExceptionWidget.background": "#DDD6C1",
358+
"debugExceptionWidget.border": "#AB395B",
359+
"pickerGroup.border": "#2AA19899",
360+
"pickerGroup.foreground": "#2AA19899",
361+
"extensionButton.prominentBackground": "#b58900",
362+
"extensionButton.prominentHoverBackground": "#584c27aa",
363+
"terminal.ansiBlack": "#073642",
364+
"terminal.ansiRed": "#dc322f",
365+
"terminal.ansiGreen": "#859900",
366+
"terminal.ansiYellow": "#b58900",
367+
"terminal.ansiBlue": "#268bd2",
368+
"terminal.ansiMagenta": "#d33682",
369+
"terminal.ansiCyan": "#2aa198",
370+
"terminal.ansiWhite": "#eee8d5",
371+
"terminal.ansiBrightBlack": "#002b36",
372+
"terminal.ansiBrightRed": "#cb4b16",
373+
"terminal.ansiBrightGreen": "#586e75",
374+
"terminal.ansiBrightYellow": "#657b83",
375+
"terminal.ansiBrightBlue": "#839496",
376+
"terminal.ansiBrightMagenta": "#6c71c4",
377+
"terminal.ansiBrightCyan": "#93a1a1",
378+
"terminal.ansiBrightWhite": "#fdf6e3",
379+
"terminal.background": "#FDF6E3",
380+
"walkThrough.embeddedEditorBackground": "#00000014"
381+
},
382+
"semanticHighlighting": true
383+
}

‎themes/_scripts/main.mjs

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { createRequire } from 'node:module';
2+
import FS from 'node:fs/promises';
3+
4+
const require = createRequire(import.meta.url);
5+
6+
const includes = (data, ...arg) => {
7+
const isInclude = !![data.scope||[]].flat().find(elm => arg.includes(elm));
8+
return isInclude ? getForeground(data.settings.foreground) : undefined;
9+
}
10+
const getForeground = (str) => typeof str === 'string' ? str : null;
11+
12+
function format(data = {}, dark = false) {
13+
const { colors = {}, tokenColors = [] } = data || {};
14+
const conf = {
15+
// name: data.name,
16+
// Layout
17+
background: colors['editor.background'],
18+
foreground: colors['editor.foreground'] || colors['input.foreground'],
19+
selection: colors['editor.selectionBackground'],
20+
cursor: colors['editorCursor.foreground'] || colors['foreground'],
21+
dropdownBackground: colors['dropdown.background'],
22+
dropdownBorder: colors['dropdown.border'] || colors['foreground'],
23+
activeLine: colors['editor.lineHighlightBackground'] || colors['editor.background'],
24+
matchingBracket: colors['editorBracketMatch.background'] || colors['editor.lineHighlightBackground'] || colors['editor.selectionBackground'],
25+
// Syntax
26+
keyword: null,
27+
storage: null,
28+
variable: null,
29+
parameter: null,
30+
function: null,
31+
string: null,
32+
constant: null,
33+
type: null,
34+
class: null,
35+
number: null,
36+
comment: null,
37+
heading: null,
38+
invalid: null,
39+
regexp: null,
40+
};
41+
tokenColors.forEach((item) => {
42+
const keys = Object.keys(item).length;
43+
if (keys === 1 && !conf.foreground && item.settings.foreground) {
44+
conf.foreground = getForeground(item.settings.foreground);
45+
}
46+
47+
if (includes(item, "keyword")) {
48+
conf.keyword = getForeground(item.settings.foreground);
49+
}
50+
if (includes(item, "storage", "keyword")) {
51+
conf.storage = getForeground(item.settings.foreground);
52+
}
53+
if (includes(item, "variable", "variable.parameter", "variable.other", "variable.language", "foreground")) {
54+
conf.variable = getForeground(item.settings.foreground);
55+
}
56+
if (includes(item, "variable.parameter", "variable.other", "variable")) {
57+
conf.parameter = getForeground(item.settings.foreground);
58+
}
59+
if (includes(item, "entity.name.function", "support.function", "entity.name", "support")) {
60+
conf.function = getForeground(item.settings.foreground);
61+
}
62+
if (includes(item, "string")) {
63+
conf.string = getForeground(item.settings.foreground);
64+
}
65+
if (includes(item, "constant", "constant.character", "constant.keyword")) {
66+
conf.constant = getForeground(item.settings.foreground);
67+
}
68+
if (includes(item, "entity.name.type", "entity.name.class", "support.type", "support")) {
69+
conf.type = getForeground(item.settings.foreground);
70+
}
71+
if (includes(item, "entity.name.class", "entity.name", 'entity', "entity.name.function")) {
72+
conf.class = getForeground(item.settings.foreground);
73+
}
74+
if (includes(item, "constant.numeric", "constant")) {
75+
conf.number = getForeground(item.settings.foreground);
76+
}
77+
if (includes(item, "comment")) {
78+
conf.comment = getForeground(item.settings.foreground);
79+
}
80+
if (includes(item, "markup.heading", "markup.heading.setext", "heading.1.markdown entity.name")) {
81+
conf.heading = getForeground(item.settings.foreground);
82+
}
83+
if (includes(item, "invalid", "editorError.foreground", "errorForeground", "foreground", "input.foreground")) {
84+
conf.invalid = getForeground(item.settings.foreground);
85+
}
86+
if (includes(item, "string.regexp", "string")) {
87+
conf.regexp = getForeground(item.settings.foreground);
88+
}
89+
});
90+
return conf;
91+
}
92+
93+
const getString = (obj) => `export const config = ${JSON.stringify(obj, null, 2)};`;
94+
95+
;(async () => {
96+
const themeQuietlight = format(require('./data/quietlight.json'))
97+
let themePath = '../quietlight/src/color.ts';
98+
await FS.writeFile(themePath, getString(themeQuietlight));
99+
console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
100+
101+
102+
const themeRed = format(require('./data/red.json'), true)
103+
console.log('~~~::', themeRed);
104+
const themeSolarizedDark = format(require('./data/solarized.dark.json'), true)
105+
console.log('~~~::', themeSolarizedDark);
106+
const themeSolarizedLight = format(require('./data/solarized.light.json'))
107+
console.log('~~~::', themeSolarizedLight);
108+
})()

‎themes/_scripts/package.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "scripts",
3+
"private": true,
4+
"version": "4.21.10",
5+
"scripts": {
6+
}
7+
}

‎themes/all/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export * from '@uiw/codemirror-theme-material';
7676
export * from '@uiw/codemirror-theme-noctis-lilac';
7777
export * from '@uiw/codemirror-theme-nord';
7878
export * from '@uiw/codemirror-theme-okaidia';
79+
export * from '@uiw/codemirror-theme-quietlight';
7980
export * from '@uiw/codemirror-theme-solarized';
8081
export * from '@uiw/codemirror-theme-sublime';
8182
export * from '@uiw/codemirror-theme-tokyo-night';
@@ -209,6 +210,12 @@ export * from '@uiw/codemirror-theme-xcode';
209210
<img width="436" alt="codemirror-theme-okaidia" src="https://user-images.githubusercontent.com/1680273/176572694-b9aface9-9646-4e0e-a211-a8aa92dabc31.png">
210211
</a>
211212

213+
**quietlight**
214+
215+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/quietlight">
216+
<img width="436" alt="codemirror-theme-okaidia" src="https://github.com/uiwjs/react-codemirror/assets/1680273/3137facb-8db7-4805-bd5c-9818d5ff49ae">
217+
</a>
218+
212219
**solarized**
213220

214221
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/light">

‎themes/quietlight/README.md

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!--rehype:ignore:start-->
2+
3+
# Quietlight Theme
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-quietlight.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-quietlight)
8+
9+
Quietlight theme for cm6, generated from [vscode themes](https://github.com/microsoft/vscode/blob/main/extensions/theme-quietlight/themes/quietlight-color-theme.json).
10+
11+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/quietlight">
12+
<img width="436" alt="codemirror-theme-quietlight" src="https://github.com/uiwjs/react-codemirror/assets/1680273/3137facb-8db7-4805-bd5c-9818d5ff49ae">
13+
</a>
14+
15+
## Install
16+
17+
```bash
18+
npm install @uiw/codemirror-theme-quietlight --save
19+
```
20+
21+
```jsx
22+
import { quietlight, quietlightInit } from '@uiw/codemirror-theme-quietlight';
23+
24+
<CodeMirror theme={quietlight} />
25+
<CodeMirror
26+
theme={quietlightInit({
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 defaultSettingsQuietlight: CreateThemeOptions['settings'];
40+
export declare const quietlightInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
41+
export declare const quietlight: import('@codemirror/state').Extension;
42+
```
43+
44+
## Usage
45+
46+
```jsx
47+
import CodeMirror from '@uiw/react-codemirror';
48+
import { quietlight } from '@uiw/codemirror-theme-quietlight';
49+
import { javascript } from '@codemirror/lang-javascript';
50+
51+
function App() {
52+
return (
53+
<CodeMirror
54+
value="console.log('hello world!');"
55+
height="200px"
56+
theme={quietlight}
57+
extensions={[javascript({ jsx: true })]}
58+
onChange={(value, viewUpdate) => {
59+
console.log('value:', value);
60+
}}
61+
/>
62+
);
63+
}
64+
export default App;
65+
```
66+
67+
```js
68+
import { EditorView } from '@codemirror/view';
69+
import { EditorState } from '@codemirror/state';
70+
import { javascript } from '@codemirror/lang-javascript';
71+
import { quietlight } from '@uiw/codemirror-theme-quietlight';
72+
73+
const state = EditorState.create({
74+
doc: 'my source code',
75+
extensions: [quietlight, javascript({ jsx: true })],
76+
});
77+
78+
const view = new EditorView({
79+
parent: document.querySelector('#editor'),
80+
state,
81+
});
82+
```
83+
84+
## Contributors
85+
86+
As always, thanks to our amazing contributors!
87+
88+
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
89+
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
90+
</a>
91+
92+
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
93+
94+
## License
95+
96+
Licensed under the MIT License.

‎themes/quietlight/package.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "@uiw/codemirror-theme-quietlight",
3+
"version": "4.21.10",
4+
"description": "Theme quietlight for CodeMirror.",
5+
"homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/quietlight",
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.9"
25+
},
26+
"keywords": [
27+
"codemirror",
28+
"codemirror-theme",
29+
"codemirror6",
30+
"theme",
31+
"quietlight",
32+
"syntax",
33+
"ide",
34+
"code"
35+
]
36+
}

‎themes/quietlight/src/color.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export const config = {
2+
background: '#F5F5F5',
3+
foreground: '#333333',
4+
selection: '#C9D0D9',
5+
cursor: '#54494B',
6+
dropdownBackground: '#F5F5F5',
7+
activeLine: '#E4F6D4',
8+
matchingBracket: '#E4F6D4',
9+
keyword: '#4B69C6',
10+
storage: '#4B69C6',
11+
variable: '#7A3E9D',
12+
parameter: '#7A3E9D',
13+
function: '#AA3731',
14+
string: '#448C27',
15+
constant: '#9C5D27',
16+
type: '#7A3E9D',
17+
class: '#AA3731',
18+
number: '#9C5D27',
19+
comment: '#AAAAAA',
20+
heading: '#AA3731',
21+
invalid: '#cd3131',
22+
regexp: '#4B69C6',
23+
};

‎themes/quietlight/src/index.ts

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { tags as t } from '@lezer/highlight';
2+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
3+
import { config } from './color';
4+
5+
export const defaultSettingsQuietlight: CreateThemeOptions['settings'] = {
6+
background: config.background,
7+
foreground: config.foreground,
8+
caret: config.cursor,
9+
selection: config.selection,
10+
selectionMatch: config.selection,
11+
gutterBackground: config.background,
12+
gutterForeground: config.foreground,
13+
lineHighlight: config.activeLine,
14+
};
15+
16+
export const quietlightInit = (options?: Partial<CreateThemeOptions>) => {
17+
const { theme = 'light', settings = {}, styles = [] } = options || {};
18+
return createTheme({
19+
theme: theme,
20+
settings: {
21+
...defaultSettingsQuietlight,
22+
...settings,
23+
},
24+
styles: [
25+
{ tag: t.keyword, color: config.keyword },
26+
{ tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable },
27+
{ tag: [t.propertyName], color: config.function },
28+
{ tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string },
29+
{ tag: [t.function(t.variableName), t.labelName], color: config.function },
30+
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant },
31+
{ tag: [t.definition(t.name), t.separator], color: config.variable },
32+
{ tag: [t.className], color: config.class },
33+
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number },
34+
{ tag: [t.typeName], color: config.type, fontStyle: config.type },
35+
{ tag: [t.operator, t.operatorKeyword], color: config.keyword },
36+
{ tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
37+
{ tag: [t.meta, t.comment], color: config.comment },
38+
{ tag: t.strong, fontWeight: 'bold' },
39+
{ tag: t.emphasis, fontStyle: 'italic' },
40+
{ tag: t.link, textDecoration: 'underline' },
41+
{ tag: t.heading, fontWeight: 'bold', color: config.heading },
42+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable },
43+
{ tag: t.invalid, color: config.invalid },
44+
{ tag: t.strikethrough, textDecoration: 'line-through' },
45+
...styles,
46+
],
47+
});
48+
};
49+
50+
export const quietlight = quietlightInit();

‎themes/quietlight/tsconfig.json

+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
@@ -61,6 +61,7 @@
6161
"@uiw/codemirror-theme-noctis-lilac": "4.21.10",
6262
"@uiw/codemirror-theme-nord": "4.21.10",
6363
"@uiw/codemirror-theme-okaidia": "4.21.10",
64+
"@uiw/codemirror-theme-quietlight": "4.21.10",
6465
"@uiw/codemirror-theme-solarized": "4.21.10",
6566
"@uiw/codemirror-theme-sublime": "4.21.10",
6667
"@uiw/codemirror-theme-tokyo-night": "4.21.10",

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

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
1616
import { gruvboxDark, gruvboxLight } from '@uiw/codemirror-theme-gruvbox-dark';
1717
import { nord } from '@uiw/codemirror-theme-nord';
1818
import { okaidia } from '@uiw/codemirror-theme-okaidia';
19+
import { quietlight } from '@uiw/codemirror-theme-quietlight';
1920
import { solarizedLight, solarizedDark } from '@uiw/codemirror-theme-solarized';
2021
import { sublime } from '@uiw/codemirror-theme-sublime';
2122
import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
@@ -46,6 +47,7 @@ export const themeData = {
4647
noctisLilac,
4748
nord,
4849
okaidia,
50+
quietlight,
4951
solarizedLight,
5052
solarizedDark,
5153
sublime,

‎www/src/router.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -429,6 +429,16 @@ export const routes: MenuRouteObject[] = [
429429
/>
430430
),
431431
},
432+
{
433+
path: 'data/quietlight',
434+
label: 'quietlight',
435+
element: (
436+
<Preview
437+
themePkg="@uiw/codemirror-theme-quietlight"
438+
path={() => import('@uiw/codemirror-theme-quietlight/README.md')}
439+
/>
440+
),
441+
},
432442
{
433443
path: 'data/solarized/light',
434444
label: 'solarized light',

0 commit comments

Comments
 (0)
Please sign in to comment.