Skip to content

Commit c1be57a

Browse files
jaywcjlovejaywcjlove
committed
feat: add vscode theme. #409 
1 parent 4566d71 commit c1be57a

File tree

13 files changed

+242
-1
lines changed

13 files changed

+242
-1
lines changed

‎.github/workflows/ci.yml

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,12 @@ jobs:
183183
token: ${{ secrets.NPM_TOKEN }}
184184
package: ./themes/sublime/package.json
185185

186+
- name: 📦 @uiw/codemirror-theme-vscode publish to NPM
187+
uses: JS-DevTools/npm-publish@v1
188+
with:
189+
token: ${{ secrets.NPM_TOKEN }}
190+
package: ./themes/vscode/package.json
191+
186192
- name: 📦 @uiw/codemirror-theme-xcode publish to NPM
187193
uses: JS-DevTools/npm-publish@v1
188194
with:
@@ -457,6 +463,19 @@ jobs:
457463
env:
458464
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
459465

466+
- name: Modify @uiw/codemirror-theme-vscode => @uiwjs/codemirror-theme-vscode
467+
uses: jaywcjlove/github-action-package@main
468+
if: success() || failure()
469+
with:
470+
path: themes/vscode/package.json
471+
rename: "@uiwjs/codemirror-theme-vscode"
472+
473+
- run: npm publish
474+
working-directory: themes/vscode
475+
if: success() || failure()
476+
env:
477+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
478+
460479
- name: Modify @uiw/codemirror-theme-xcode => @uiwjs/codemirror-theme-xcode
461480
uses: jaywcjlove/github-action-package@main
462481
if: success() || failure()

‎core/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ npm install @uiw/react-codemirror --save
6565
| `@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) |
6666
| `@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) |
6767
| `@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) |
68+
| `@uiw/codemirror-theme-vscode` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-vscode.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-vscode) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-vscode.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-vscode) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/vscode) |
69+
| `@uiw/codemirror-theme-xcode` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-xcode.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-xcode) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-xcode.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-xcode) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/xcode) |
6870

6971
<!--rehype:style=width: 100%; display: inline-table;-->
7072

‎themes/all/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ export * from '@uiw/codemirror-theme-github';
7272
export * from '@uiw/codemirror-theme-gruvbox-dark';
7373
export * from '@uiw/codemirror-theme-okaidia';
7474
export * from '@uiw/codemirror-theme-sublime';
75+
export * from '@uiw/codemirror-theme-vscode';
7576
export * from '@uiw/codemirror-theme-xcode';
7677
```
7778

‎themes/all/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@uiw/codemirror-theme-gruvbox-dark": "4.13.2",
3535
"@uiw/codemirror-theme-okaidia": "4.13.2",
3636
"@uiw/codemirror-theme-sublime": "4.13.2",
37+
"@uiw/codemirror-theme-vscode": "4.13.2",
3738
"@uiw/codemirror-theme-xcode": "4.13.2",
3839
"@uiw/codemirror-themes": "4.13.2"
3940
},

‎themes/all/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@ export * from '@uiw/codemirror-theme-github';
1111
export * from '@uiw/codemirror-theme-gruvbox-dark';
1212
export * from '@uiw/codemirror-theme-okaidia';
1313
export * from '@uiw/codemirror-theme-sublime';
14+
export * from '@uiw/codemirror-theme-vscode';
1415
export * from '@uiw/codemirror-theme-xcode';

‎themes/theme/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,12 @@ export default App;
194194
<img width="436" alt="codemirror-theme-sublime" src="https://user-images.githubusercontent.com/1680273/176572314-cc296f81-0763-485c-8fa2-7d61b24ad09b.png">
195195
</a>
196196

197+
**vscode**
198+
199+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/vscode/dark">
200+
<img width="436" alt="codemirror-theme-vscode dark" src="https://user-images.githubusercontent.com/1680273/202343079-7eca1c90-da69-4ef2-a18c-4c9f5ea4e396.png">
201+
</a>
202+
197203
**xcode**
198204

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

‎themes/vscode/README.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!--rehype:ignore:start-->
2+
3+
# VSCode Theme
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-vscode.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-vscode)
8+
9+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/vscode/dark">
10+
<img width="436" alt="codemirror-theme-vscode dark" src="https://user-images.githubusercontent.com/1680273/202343079-7eca1c90-da69-4ef2-a18c-4c9f5ea4e396.png">
11+
</a>
12+
13+
## Install
14+
15+
```bash
16+
npm install @uiw/codemirror-theme-vscode --save
17+
```
18+
19+
## Usage
20+
21+
```jsx
22+
import CodeMirror from '@uiw/react-codemirror';
23+
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
24+
import { javascript } from '@codemirror/lang-javascript';
25+
26+
function App() {
27+
return (
28+
<CodeMirror
29+
value="console.log('hello world!');"
30+
height="200px"
31+
theme={vscodeDark}
32+
extensions={[javascript({ jsx: true })]}
33+
onChange={(value, viewUpdate) => {
34+
console.log('value:', value);
35+
}}
36+
/>
37+
);
38+
}
39+
export default App;
40+
```
41+
42+
```js
43+
import { EditorView } from '@codemirror/view';
44+
import { EditorState } from '@codemirror/state';
45+
import { javascript } from '@codemirror/lang-javascript';
46+
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
47+
48+
const state = EditorState.create({
49+
doc: 'my source code',
50+
extensions: [vscodeDark, javascript({ jsx: true })],
51+
});
52+
53+
const view = new EditorView({
54+
parent: document.querySelector('#editor'),
55+
state,
56+
});
57+
```
58+
59+
## Contributors
60+
61+
As always, thanks to our amazing contributors!
62+
63+
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
64+
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
65+
</a>
66+
67+
Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
68+
69+
## License
70+
71+
Licensed under the MIT License.

‎themes/vscode/package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "@uiw/codemirror-theme-vscode",
3+
"version": "4.13.2",
4+
"description": "Theme vscode for CodeMirror.",
5+
"homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/vscode",
6+
"author": "kenny wong <[email protected]>",
7+
"license": "MIT",
8+
"main": "./cjs/index.js",
9+
"module": "./esm/index.js",
10+
"scripts": {
11+
"watch": "tsbb watch",
12+
"build": "tsbb build"
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.13.2"
25+
},
26+
"keywords": [
27+
"codemirror",
28+
"codemirror6",
29+
"theme",
30+
"vscode",
31+
"syntax",
32+
"ide",
33+
"code"
34+
]
35+
}

‎themes/vscode/src/index.ts

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/**
2+
* @name github
3+
*/
4+
import { tags as t } from '@lezer/highlight';
5+
import { createTheme } from '@uiw/codemirror-themes';
6+
7+
export const vscodeDark = createTheme({
8+
theme: 'dark',
9+
settings: {
10+
background: '#000000',
11+
foreground: '#CECFD0',
12+
caret: '#c6c6c6',
13+
selection: '#6199ff2f',
14+
selectionMatch: '#72a1ff59',
15+
lineHighlight: '#ffffff0f',
16+
gutterBackground: '#000000',
17+
gutterForeground: '#838383',
18+
gutterActiveForeground: '#fff',
19+
},
20+
styles: [
21+
{ tag: [t.comment, t.quote], color: '#707F8D' },
22+
{ tag: [t.typeName, t.typeOperator], color: '#aa0d91' },
23+
{ tag: [t.keyword], color: '#569cd6', fontWeight: 'bold' },
24+
{ tag: [t.string, t.meta], color: '#D23423' },
25+
{ tag: [t.name], color: '#032f62' },
26+
{ tag: [t.typeName], color: '#522BB2' },
27+
{ tag: [t.variableName], color: '#23575C' },
28+
{ tag: [t.definition(t.variableName)], color: '#327A9E' },
29+
{ tag: [t.regexp, t.link], color: '#0e0eff' },
30+
31+
{ tag: t.keyword, color: '#569cd6' },
32+
{
33+
tag: [t.controlKeyword, t.moduleKeyword],
34+
color: '#c586c0',
35+
},
36+
{
37+
tag: [t.name, t.deleted, t.character, t.macroName],
38+
color: '#9cdcfe',
39+
},
40+
{
41+
tag: [t.propertyName],
42+
color: '#9cdcfe',
43+
},
44+
45+
{ tag: [t.variableName, t.labelName], color: '#9cdcfe' },
46+
{
47+
tag: [t.color, t.constant(t.name), t.standard(t.name)],
48+
color: '#569cd6',
49+
},
50+
{ tag: [t.definition(t.name)], color: '#9cdcfe' },
51+
{
52+
tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
53+
color: '#4ec9b0',
54+
},
55+
{ tag: [t.tagName], color: '#569cd6' },
56+
{
57+
tag: [t.function(t.variableName), t.function(t.propertyName)],
58+
color: '#dcdcaa',
59+
},
60+
{ tag: [t.number], color: '#b5cea8' },
61+
{
62+
tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
63+
color: '#d4d4d4',
64+
},
65+
{
66+
tag: [t.regexp],
67+
color: '#d16969',
68+
},
69+
{
70+
tag: [t.special(t.string)],
71+
color: '#ce9178',
72+
},
73+
{ tag: [t.meta, t.comment], color: '#6a9955' },
74+
{ tag: [t.punctuation, t.separator], color: '#d4d4d4' },
75+
{ tag: [t.angleBracket], color: '#808080' },
76+
{ tag: t.special(t.brace), color: '#569cd6' },
77+
{ tag: t.strong, fontWeight: 'bold' },
78+
{ tag: t.emphasis, fontStyle: 'italic' },
79+
{ tag: t.strikethrough, textDecoration: 'line-through' },
80+
{ tag: t.link, color: '#6a9955', textDecoration: 'underline' },
81+
{ tag: t.heading, fontWeight: 'bold', color: '#9cdcfe' },
82+
{
83+
tag: [t.atom, t.bool, t.special(t.variableName)],
84+
color: '#569cd6',
85+
},
86+
{
87+
tag: [t.processingInstruction, t.string, t.inserted],
88+
color: '#ce9178',
89+
},
90+
{ tag: t.invalid, color: '#ff0000' },
91+
],
92+
});

‎themes/vscode/tsconfig.json

Lines changed: 9 additions & 0 deletions
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+
}

0 commit comments

Comments
 (0)