Skip to content

Commit 25fd7e9

Browse files
committedAug 26, 2023
feat(theme): add kimbie theme.
1 parent fa73b0a commit 25fd7e9

File tree

17 files changed

+651
-7
lines changed

17 files changed

+651
-7
lines changed
 

‎.github/workflows/ci.yml

+8-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ jobs:
106106
env:
107107
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
108108

109-
109+
110110
- name: 📦 @uiw/codemirror-theme-abcdef publish to NPM
111111
run: npm publish --access public
112112
working-directory: ./themes/abcdef/
@@ -232,6 +232,13 @@ jobs:
232232
env:
233233
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
234234

235+
- name: 📦 @uiw/codemirror-theme-kimbie publish to NPM
236+
run: npm publish --access public
237+
working-directory: ./themes/kimbie/
238+
continue-on-error: true
239+
env:
240+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
241+
235242
- name: 📦 @uiw/codemirror-theme-material publish to NPM
236243
run: npm publish --access public
237244
working-directory: ./themes/material/

‎core/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ npm install @uiw/react-codemirror --save
5757
| :---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
5858
| `@uiw/codemirror-themes-all` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-themes-all.svg)](https://www.npmjs.com/package/@uiw/codemirror-themes-all) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-themes-all.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-themes-all) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/all) |
5959
| `@uiw/codemirror-theme-abcdef` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-abcdef.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-abcdef) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-abcdef.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-abcdef) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/abcdef) |
60+
| `@uiw/codemirror-theme-abyss` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-abyss.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-abyss) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-abyss.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-abyss) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/abyss) |
6061
| `@uiw/codemirror-theme-androidstudio` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-androidstudio.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-androidstudio) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-androidstudio.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-androidstudio) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/androidstudio) |
6162
| `@uiw/codemirror-theme-atomone` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-atomone.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-atomone) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-atomone.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-atomone) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/atomone) |
6263
| `@uiw/codemirror-theme-aura` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-aura.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-aura) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-aura.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-aura) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/aura) |
@@ -69,6 +70,8 @@ npm install @uiw/react-codemirror --save
6970
| `@uiw/codemirror-theme-eclipse` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-eclipse.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-eclipse) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-eclipse.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-eclipse) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/eclipse) |
7071
| `@uiw/codemirror-theme-github` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-github.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-github) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-github.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-github) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/github) |
7172
| `@uiw/codemirror-theme-gruvbox-dark` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-gruvbox-dark.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-gruvbox-dark) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-gruvbox-dark.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-gruvbox-dark) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox/dark) |
73+
| `@uiw/codemirror-theme-kimbie` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-kimbie.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-kimbie) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-kimbie.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-kimbie) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/kimbie/dark) |
74+
| `@uiw/codemirror-theme-kimbie` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-kimbie.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-kimbie) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-kimbie.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-kimbie) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/kimbie/dark) |
7275
| `@uiw/codemirror-theme-material` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-material.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-material.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/material/dark) |
7376
| `@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) |
7477
| `@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) |

‎themes/_scripts/data/kimbie.json

+384
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,384 @@
1+
{
2+
"name": "Kimbie Dark",
3+
"type": "dark",
4+
"colors": {
5+
"input.background": "#51412c",
6+
"dropdown.background": "#51412c",
7+
"editor.background": "#221a0f",
8+
"editor.foreground": "#d3af86",
9+
"focusBorder": "#a57a4c",
10+
"list.highlightForeground": "#e3b583",
11+
"list.activeSelectionBackground": "#7c5021",
12+
"list.hoverBackground": "#7c502166",
13+
"quickInputList.focusBackground": "#7c5021AA",
14+
"list.inactiveSelectionBackground": "#645342",
15+
"pickerGroup.foreground": "#e3b583",
16+
"pickerGroup.border": "#e3b583",
17+
"inputOption.activeBorder": "#a57a4c",
18+
"selection.background": "#84613daa",
19+
"editor.selectionBackground": "#84613daa",
20+
"minimap.selectionHighlight": "#84613daa",
21+
"editorWidget.background": "#131510",
22+
"editorHoverWidget.background": "#221a14",
23+
"editorGroupHeader.tabsBackground": "#131510",
24+
"editorLineNumber.activeForeground": "#adadad",
25+
"tab.inactiveBackground": "#131510",
26+
"tab.lastPinnedBorder": "#51412c",
27+
"titleBar.activeBackground": "#423523",
28+
"statusBar.background": "#423523",
29+
"statusBar.debuggingBackground": "#423523",
30+
"statusBar.noFolderBackground": "#423523",
31+
"statusBarItem.remoteBackground": "#6e583b",
32+
"ports.iconRunningProcessForeground": "#369432",
33+
"activityBar.background": "#221a0f",
34+
"activityBar.foreground": "#d3af86",
35+
"activityBarItem.profilesBackground": "#47351d",
36+
"sideBar.background": "#362712",
37+
"menu.background": "#362712",
38+
"menu.foreground": "#CCCCCC",
39+
"editor.lineHighlightBackground": "#5e452b",
40+
"editorCursor.foreground": "#d3af86",
41+
"editorWhitespace.foreground": "#a57a4c",
42+
"peekViewTitle.background": "#362712",
43+
"peekView.border": "#5e452b",
44+
"peekViewResult.background": "#362712",
45+
"peekViewEditor.background": "#221a14",
46+
"peekViewEditor.matchHighlightBackground": "#84613daa",
47+
"button.background": "#6e583b",
48+
"inputValidation.infoBorder": "#1b60a5",
49+
"inputValidation.infoBackground": "#2b2a42",
50+
"inputValidation.warningBackground": "#51412c",
51+
"inputValidation.errorBackground": "#5f0d0d",
52+
"inputValidation.errorBorder": "#9d2f23",
53+
"badge.background": "#7f5d38",
54+
"progressBar.background": "#7f5d38"
55+
},
56+
"tokenColors": [
57+
{
58+
"settings": {
59+
"foreground": "#d3af86"
60+
}
61+
},
62+
{
63+
"scope": [
64+
"meta.embedded",
65+
"source.groovy.embedded",
66+
"string meta.image.inline.markdown",
67+
"variable.legacy.builtin.python"
68+
],
69+
"settings": {
70+
"foreground": "#d3af86"
71+
}
72+
},
73+
{
74+
"name": "Text",
75+
"scope": "variable.parameter.function",
76+
"settings": {
77+
"foreground": "#d3af86"
78+
}
79+
},
80+
{
81+
"name": "Comments",
82+
"scope": ["comment", "punctuation.definition.comment"],
83+
"settings": {
84+
"foreground": "#a57a4c"
85+
}
86+
},
87+
{
88+
"name": "Punctuation",
89+
"scope": [
90+
"punctuation.definition.string",
91+
"punctuation.definition.variable",
92+
"punctuation.definition.string",
93+
"punctuation.definition.parameters",
94+
"punctuation.definition.string",
95+
"punctuation.definition.array"
96+
],
97+
"settings": {
98+
"foreground": "#d3af86"
99+
}
100+
},
101+
{
102+
"name": "Delimiters",
103+
"scope": "none",
104+
"settings": {
105+
"foreground": "#d3af86"
106+
}
107+
},
108+
{
109+
"name": "Operators",
110+
"scope": "keyword.operator",
111+
"settings": {
112+
"foreground": "#d3af86"
113+
}
114+
},
115+
{
116+
"name": "Keywords",
117+
"scope": [
118+
"keyword",
119+
"keyword.control",
120+
"keyword.operator.new.cpp",
121+
"keyword.operator.delete.cpp",
122+
"keyword.other.using",
123+
"keyword.other.operator"
124+
],
125+
"settings": {
126+
"foreground": "#98676a"
127+
}
128+
},
129+
{
130+
"name": "Variables",
131+
"scope": "variable",
132+
"settings": {
133+
"foreground": "#dc3958"
134+
}
135+
},
136+
{
137+
"name": "Functions",
138+
"scope": ["entity.name.function", "meta.require", "support.function.any-method"],
139+
"settings": {
140+
"foreground": "#8ab1b0"
141+
}
142+
},
143+
{
144+
"name": "Classes",
145+
"scope": [
146+
"support.class",
147+
"entity.name.class",
148+
"entity.name.type",
149+
"entity.name.namespace",
150+
"entity.name.scope-resolution"
151+
],
152+
"settings": {
153+
"foreground": "#f06431"
154+
}
155+
},
156+
{
157+
"name": "Methods",
158+
"scope": "keyword.other.special-method",
159+
"settings": {
160+
"foreground": "#8ab1b0"
161+
}
162+
},
163+
{
164+
"name": "Storage",
165+
"scope": "storage",
166+
"settings": {
167+
"foreground": "#98676a"
168+
}
169+
},
170+
{
171+
"name": "Support",
172+
"scope": "support.function",
173+
"settings": {
174+
"foreground": "#7e602c"
175+
}
176+
},
177+
{
178+
"name": "Strings, Inherited Class",
179+
"scope": ["string", "constant.other.symbol", "entity.other.inherited-class"],
180+
"settings": {
181+
"foreground": "#889b4a"
182+
}
183+
},
184+
{
185+
"name": "Integers",
186+
"scope": "constant.numeric",
187+
"settings": {
188+
"foreground": "#f79a32"
189+
}
190+
},
191+
{
192+
"name": "Floats",
193+
"scope": "none",
194+
"settings": {
195+
"foreground": "#f79a32"
196+
}
197+
},
198+
{
199+
"name": "Boolean",
200+
"scope": "none",
201+
"settings": {
202+
"foreground": "#f79a32"
203+
}
204+
},
205+
{
206+
"name": "Constants",
207+
"scope": "constant",
208+
"settings": {
209+
"foreground": "#f79a32"
210+
}
211+
},
212+
{
213+
"name": "Tags",
214+
"scope": "entity.name.tag",
215+
"settings": {
216+
"foreground": "#dc3958"
217+
}
218+
},
219+
{
220+
"name": "Attributes",
221+
"scope": "entity.other.attribute-name",
222+
"settings": {
223+
"foreground": "#f79a32"
224+
}
225+
},
226+
{
227+
"name": "Attribute IDs",
228+
"scope": ["entity.other.attribute-name.id", "punctuation.definition.entity"],
229+
"settings": {
230+
"foreground": "#8ab1b0"
231+
}
232+
},
233+
{
234+
"name": "Selector",
235+
"scope": "meta.selector",
236+
"settings": {
237+
"foreground": "#98676a"
238+
}
239+
},
240+
{
241+
"name": "Values",
242+
"scope": "none",
243+
"settings": {
244+
"foreground": "#f79a32"
245+
}
246+
},
247+
{
248+
"name": "Headings",
249+
"scope": ["markup.heading", "markup.heading.setext", "punctuation.definition.heading", "entity.name.section"],
250+
"settings": {
251+
"fontStyle": "bold",
252+
"foreground": "#8ab1b0"
253+
}
254+
},
255+
{
256+
"name": "Units",
257+
"scope": "keyword.other.unit",
258+
"settings": {
259+
"foreground": "#f79a32"
260+
}
261+
},
262+
{
263+
"name": "Bold",
264+
"scope": ["markup.bold", "punctuation.definition.bold"],
265+
"settings": {
266+
"fontStyle": "bold",
267+
"foreground": "#f06431"
268+
}
269+
},
270+
{
271+
"name": "Italic",
272+
"scope": ["markup.italic", "punctuation.definition.italic"],
273+
"settings": {
274+
"fontStyle": "italic",
275+
"foreground": "#98676a"
276+
}
277+
},
278+
{
279+
"scope": "markup.strikethrough",
280+
"settings": {
281+
"fontStyle": "strikethrough"
282+
}
283+
},
284+
{
285+
"name": "Code",
286+
"scope": "markup.inline.raw",
287+
"settings": {
288+
"foreground": "#889b4a"
289+
}
290+
},
291+
{
292+
"name": "Link Text",
293+
"scope": "string.other.link",
294+
"settings": {
295+
"foreground": "#dc3958"
296+
}
297+
},
298+
{
299+
"name": "Link Url",
300+
"scope": "meta.link",
301+
"settings": {
302+
"foreground": "#f79a32"
303+
}
304+
},
305+
{
306+
"name": "Lists",
307+
"scope": "markup.list",
308+
"settings": {
309+
"foreground": "#dc3958"
310+
}
311+
},
312+
{
313+
"name": "Quotes",
314+
"scope": "markup.quote",
315+
"settings": {
316+
"foreground": "#f79a32"
317+
}
318+
},
319+
{
320+
"name": "Separator",
321+
"scope": "meta.separator",
322+
"settings": {
323+
"foreground": "#d3af86"
324+
}
325+
},
326+
{
327+
"name": "Inserted",
328+
"scope": "markup.inserted",
329+
"settings": {
330+
"foreground": "#889b4a"
331+
}
332+
},
333+
{
334+
"name": "Deleted",
335+
"scope": "markup.deleted",
336+
"settings": {
337+
"foreground": "#dc3958"
338+
}
339+
},
340+
{
341+
"name": "Changed",
342+
"scope": "markup.changed",
343+
"settings": {
344+
"foreground": "#98676a"
345+
}
346+
},
347+
{
348+
"name": "Colors",
349+
"scope": "constant.other.color",
350+
"settings": {
351+
"foreground": "#7e602c"
352+
}
353+
},
354+
{
355+
"name": "Regular Expressions",
356+
"scope": "string.regexp",
357+
"settings": {
358+
"foreground": "#7e602c"
359+
}
360+
},
361+
{
362+
"name": "Escape Characters",
363+
"scope": "constant.character.escape",
364+
"settings": {
365+
"foreground": "#7e602c"
366+
}
367+
},
368+
{
369+
"name": "Embedded",
370+
"scope": ["punctuation.section.embedded", "variable.interpolation"],
371+
"settings": {
372+
"foreground": "#088649"
373+
}
374+
},
375+
{
376+
"name": "Invalid",
377+
"scope": "invalid",
378+
"settings": {
379+
"foreground": "#dc3958"
380+
}
381+
}
382+
],
383+
"semanticHighlighting": true
384+
}

‎themes/_scripts/main.mjs

+8-4
Original file line numberDiff line numberDiff line change
@@ -108,9 +108,13 @@ const getString = (obj) => `export const config = ${JSON.stringify(obj, null, 2)
108108
await FS.writeFile(themePath, getString(themeAbyss));
109109
console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
110110

111+
const themeKimbie = format(require('./data/kimbie.json'));
112+
themePath = '../kimbie/src/color.ts';
113+
await FS.writeFile(themePath, getString(themeKimbie));
114+
console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
111115

112-
const themeSolarizedDark = format(require('./data/solarized.dark.json'), true)
113-
console.log('~~~::', themeSolarizedDark);
114-
const themeSolarizedLight = format(require('./data/solarized.light.json'))
115-
console.log('~~~::', themeSolarizedLight);
116+
// const themeSolarizedDark = format(require('./data/solarized.dark.json'), true)
117+
// console.log('~~~::', themeSolarizedDark);
118+
// const themeSolarizedLight = format(require('./data/solarized.light.json'))
119+
// console.log('~~~::', themeSolarizedLight);
116120
})()

‎themes/abyss/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66

77
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-abyss.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-abyss)
88

9-
Abyss theme for cm6, generated from [vscode themes](https://github.com/microsoft/vscode/blob/main/extensions/theme-red/themes/abyss-color-theme.json).
9+
Abyss theme for cm6, generated from [vscode themes](https://github.com/microsoft/vscode/blob/main/extensions/theme-abyss/themes/abyss-color-theme.json).
1010

1111
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/abyss">
12-
<img width="436" alt="codemirror-theme-abyss" src="https://github.com/uiwjs/react-codemirror/assets/1680273/aef0a618-8c74-4466-9a04-35e368f582a7">
12+
<img width="436" alt="codemirror-theme-abyss" src="https://github.com/uiwjs/react-codemirror/assets/1680273/b1b59053-d370-485e-9dcc-2987b39197a1">
1313
</a>
1414

1515
## Install

‎themes/all/README.md

+12
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,12 @@ export * from '@uiw/codemirror-theme-xcode';
9595
<img width="436" alt="codemirror-theme-abcdef" src="https://user-images.githubusercontent.com/1680273/176573508-705562ad-16ec-4b16-994e-f235a9331a3f.png">
9696
</a>
9797

98+
**abyss**
99+
100+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/abyss">
101+
<img width="436" alt="codemirror-theme-abyss" src="https://github.com/uiwjs/react-codemirror/assets/1680273/b1b59053-d370-485e-9dcc-2987b39197a1">
102+
</a>
103+
98104
**android studio**
99105

100106
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/xcode/light">
@@ -183,6 +189,12 @@ export * from '@uiw/codemirror-theme-xcode';
183189
<img width="436" alt="codemirror-theme-eclipse" src="https://user-images.githubusercontent.com/1680273/206087911-49db6624-ab8c-434e-9b8a-84132fe206f9.png">
184190
</a>
185191

192+
**kimbie**
193+
194+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/kimbie">
195+
<img width="436" alt="codemirror-theme-kimbie" src="https://github.com/uiwjs/react-codemirror/assets/1680273/859e75f6-cc7c-4182-ac92-dbf3168784b0">
196+
</a>
197+
186198
**material**
187199

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

‎themes/all/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"@uiw/codemirror-theme-eclipse": "4.21.10",
3636
"@uiw/codemirror-theme-github": "4.21.10",
3737
"@uiw/codemirror-theme-gruvbox-dark": "4.21.10",
38+
"@uiw/codemirror-theme-kimbie": "4.21.10",
3839
"@uiw/codemirror-theme-material": "4.21.10",
3940
"@uiw/codemirror-theme-noctis-lilac": "4.21.10",
4041
"@uiw/codemirror-theme-nord": "4.21.10",

‎themes/all/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export * from '@uiw/codemirror-theme-duotone';
1111
export * from '@uiw/codemirror-theme-eclipse';
1212
export * from '@uiw/codemirror-theme-github';
1313
export * from '@uiw/codemirror-theme-gruvbox-dark';
14+
export * from '@uiw/codemirror-theme-kimbie';
1415
export * from '@uiw/codemirror-theme-material';
1516
export * from '@uiw/codemirror-theme-noctis-lilac';
1617
export * from '@uiw/codemirror-theme-nord';

‎themes/kimbie/README.md

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!--rehype:ignore:start-->
2+
3+
# Kimbie Theme
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-kimbie.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-kimbie)
8+
9+
Kimbie theme for cm6, generated from [vscode themes](https://github.com/microsoft/vscode/blob/main/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json).
10+
11+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/kimbie">
12+
<img width="436" alt="codemirror-theme-kimbie" src="https://github.com/uiwjs/react-codemirror/assets/1680273/859e75f6-cc7c-4182-ac92-dbf3168784b0">
13+
</a>
14+
15+
## Install
16+
17+
```bash
18+
npm install @uiw/codemirror-theme-kimbie --save
19+
```
20+
21+
```jsx
22+
import { kimbie, kimbieInit } from '@uiw/codemirror-theme-kimbie';
23+
24+
<CodeMirror theme={kimbie} />
25+
<CodeMirror
26+
theme={kimbieInit({
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 kimbieInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
41+
export declare const kimbie: import('@codemirror/state').Extension;
42+
```
43+
44+
## Usage
45+
46+
```jsx
47+
import CodeMirror from '@uiw/react-codemirror';
48+
import { kimbie } from '@uiw/codemirror-theme-kimbie';
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={kimbie}
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 { kimbie } from '@uiw/codemirror-theme-kimbie';
72+
73+
const state = EditorState.create({
74+
doc: 'my source code',
75+
extensions: [kimbie, 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/kimbie/package.json

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

‎themes/kimbie/src/color.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export const config = {
2+
background: '#221a0f',
3+
foreground: '#d3af86',
4+
selection: '#84613daa',
5+
cursor: '#d3af86',
6+
dropdownBackground: '#51412c',
7+
activeLine: '#5e452b',
8+
matchingBracket: '#5e452b',
9+
keyword: '#98676a',
10+
storage: '#98676a',
11+
variable: '#dc3958',
12+
parameter: '#dc3958',
13+
function: '#7e602c',
14+
string: '#889b4a',
15+
constant: '#f79a32',
16+
type: '#f06431',
17+
class: '#f06431',
18+
number: '#f79a32',
19+
comment: '#a57a4c',
20+
heading: '#8ab1b0',
21+
invalid: '#dc3958',
22+
regexp: '#7e602c',
23+
};

‎themes/kimbie/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 defaultSettingsKimbie: 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 kimbieInit = (options?: Partial<CreateThemeOptions>) => {
17+
const { theme = 'dark', settings = {}, styles = [] } = options || {};
18+
return createTheme({
19+
theme: theme,
20+
settings: {
21+
...defaultSettingsKimbie,
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 kimbie = kimbieInit();

‎themes/kimbie/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
@@ -58,6 +58,7 @@
5858
"@uiw/codemirror-theme-eclipse": "4.21.10",
5959
"@uiw/codemirror-theme-github": "4.21.10",
6060
"@uiw/codemirror-theme-gruvbox-dark": "4.21.10",
61+
"@uiw/codemirror-theme-kimbie": "4.21.10",
6162
"@uiw/codemirror-theme-material": "4.21.10",
6263
"@uiw/codemirror-theme-noctis-lilac": "4.21.10",
6364
"@uiw/codemirror-theme-nord": "4.21.10",

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

+1
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ 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);
6465
return (
6566
<Warpper>
6667
<Content>

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

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { vscodeDark } from '@uiw/codemirror-theme-vscode';
1515
import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
1616
import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
1717
import { gruvboxDark, gruvboxLight } from '@uiw/codemirror-theme-gruvbox-dark';
18+
import { kimbie } from '@uiw/codemirror-theme-kimbie';
1819
import { nord } from '@uiw/codemirror-theme-nord';
1920
import { okaidia } from '@uiw/codemirror-theme-okaidia';
2021
import { red } from '@uiw/codemirror-theme-red';
@@ -45,6 +46,7 @@ export const themeData = {
4546
githubDark,
4647
gruvboxDark,
4748
gruvboxLight,
49+
kimbie,
4850
materialLight,
4951
materialDark,
5052
noctisLilac,

‎www/src/router.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -409,6 +409,20 @@ export const routes: MenuRouteObject[] = [
409409
/>
410410
),
411411
},
412+
{
413+
path: 'data/kimbie',
414+
element: <Navigate to="dark" replace />,
415+
},
416+
{
417+
path: 'data/kimbie/dark',
418+
label: 'Kimbie Dark',
419+
element: (
420+
<Preview
421+
themePkg="@uiw/codemirror-theme-kimbie"
422+
path={() => import('@uiw/codemirror-theme-kimbie/README.md')}
423+
/>
424+
),
425+
},
412426
{
413427
path: 'data/noctis-lilac',
414428
label: 'noctis lilac',

0 commit comments

Comments
 (0)
Please sign in to comment.