Skip to content

Commit a2fe1d8

Browse files
jaywcjlovejaywcjlove
committedDec 5, 2022
feat(theme): add material theme.
·
v4.23.10v4.17.0
1 parent 0eb8053 commit a2fe1d8

File tree

12 files changed

+263
-0
lines changed

12 files changed

+263
-0
lines changed
 

‎.github/workflows/ci.yml

+18
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,12 @@ jobs:
165165
token: ${{ secrets.NPM_TOKEN }}
166166
package: ./themes/gruvbox/package.json
167167

168+
- name: 📦 @uiw/codemirror-theme-material publish to NPM
169+
uses: JS-DevTools/npm-publish@v1
170+
with:
171+
token: ${{ secrets.NPM_TOKEN }}
172+
package: ./themes/material/package.json
173+
168174
- name: 📦 @uiw/codemirror-theme-nord publish to NPM
169175
uses: JS-DevTools/npm-publish@v1
170176
with:
@@ -429,6 +435,18 @@ jobs:
429435
env:
430436
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
431437

438+
- name: Modify @uiw/codemirror-theme-material => @uiwjs/codemirror-theme-material
439+
uses: jaywcjlove/github-action-package@main
440+
with:
441+
path: themes/material/package.json
442+
rename: '@uiwjs/codemirror-theme-material'
443+
444+
- run: npm publish
445+
working-directory: themes/material
446+
continue-on-error: true
447+
env:
448+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
449+
432450
- name: Modify @uiw/codemirror-theme-nord => @uiwjs/codemirror-theme-nord
433451
uses: jaywcjlove/github-action-package@main
434452
with:

‎core/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ npm install @uiw/react-codemirror --save
6464
| `@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) |
6565
| `@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) |
6666
| `@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) |
67+
| `@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) |
6768
| `@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) |
6869
| `@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) |
6970
| `@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) |

‎themes/all/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export * from '@uiw/codemirror-theme-duotone';
7070
export * from '@uiw/codemirror-theme-eclipse';
7171
export * from '@uiw/codemirror-theme-github';
7272
export * from '@uiw/codemirror-theme-gruvbox-dark';
73+
export * from '@uiw/codemirror-theme-material';
7374
export * from '@uiw/codemirror-theme-nord';
7475
export * from '@uiw/codemirror-theme-okaidia';
7576
export * from '@uiw/codemirror-theme-sublime';

‎themes/all/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"@uiw/codemirror-theme-eclipse": "4.16.0",
3333
"@uiw/codemirror-theme-github": "4.16.0",
3434
"@uiw/codemirror-theme-gruvbox-dark": "4.16.0",
35+
"@uiw/codemirror-theme-material": "4.16.0",
3536
"@uiw/codemirror-theme-nord": "4.16.0",
3637
"@uiw/codemirror-theme-okaidia": "4.16.0",
3738
"@uiw/codemirror-theme-sublime": "4.16.0",

‎themes/all/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export * from '@uiw/codemirror-theme-duotone';
99
export * from '@uiw/codemirror-theme-eclipse';
1010
export * from '@uiw/codemirror-theme-github';
1111
export * from '@uiw/codemirror-theme-gruvbox-dark';
12+
export * from '@uiw/codemirror-theme-material';
1213
export * from '@uiw/codemirror-theme-nord';
1314
export * from '@uiw/codemirror-theme-okaidia';
1415
export * from '@uiw/codemirror-theme-sublime';

‎themes/material/README.md

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!--rehype:ignore:start-->
2+
3+
# Material Theme
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-material.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-material)
8+
9+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material">
10+
<img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/205537793-79f9c99c-831a-4ce3-8189-78b42896656f.png">
11+
</a>
12+
13+
## Install
14+
15+
```bash
16+
npm install @uiw/codemirror-theme-material --save
17+
```
18+
19+
## Usage
20+
21+
```jsx
22+
import CodeMirror from '@uiw/react-codemirror';
23+
import { material } from '@uiw/codemirror-theme-material';
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={material}
32+
extensions={[javascript({ jsx: true })]}
33+
/>
34+
);
35+
}
36+
export default App;
37+
```
38+
39+
```js
40+
import { EditorView } from '@codemirror/view';
41+
import { EditorState } from '@codemirror/state';
42+
import { javascript } from '@codemirror/lang-javascript';
43+
import { material } from '@uiw/codemirror-theme-material';
44+
45+
const state = EditorState.create({
46+
doc: 'my source code',
47+
extensions: [material, javascript({ jsx: true })],
48+
});
49+
50+
const view = new EditorView({
51+
parent: document.querySelector('#editor'),
52+
state,
53+
});
54+
```
55+
56+
## Contributors
57+
58+
As always, thanks to our amazing contributors!
59+
60+
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
61+
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
62+
</a>
63+
64+
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
65+
66+
## License
67+
68+
Licensed under the MIT License.

‎themes/material/package.json

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

‎themes/material/src/index.ts

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { tags as t } from '@lezer/highlight';
2+
import { createTheme } from '@uiw/codemirror-themes';
3+
4+
export const material = createTheme({
5+
theme: 'dark',
6+
settings: {
7+
background: '#2e3235',
8+
foreground: '#bdbdbd',
9+
caret: '#a0a4ae',
10+
selection: '#d7d4f0',
11+
selectionMatch: '#d7d4f0',
12+
gutterBackground: '#2e3235',
13+
gutterForeground: '#999',
14+
gutterActiveForeground: '#4f5b66',
15+
lineHighlight: '#545b61',
16+
},
17+
styles: [
18+
{ tag: t.keyword, color: '#cf6edf' },
19+
{
20+
tag: [t.name, t.deleted, t.character, t.macroName],
21+
color: '#56c8d8',
22+
},
23+
{ tag: [t.propertyName], color: '#facf4e' },
24+
{ tag: [t.variableName], color: '#bdbdbd' },
25+
{ tag: [t.function(t.variableName)], color: '#56c8d8' },
26+
{ tag: [t.labelName], color: '#cf6edf' },
27+
{
28+
tag: [t.color, t.constant(t.name), t.standard(t.name)],
29+
color: '#facf4e',
30+
},
31+
{ tag: [t.definition(t.name), t.separator], color: '#fa5788' },
32+
{ tag: [t.brace], color: '#cf6edf' },
33+
{
34+
tag: [t.annotation],
35+
color: '#ff5f52',
36+
},
37+
{
38+
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
39+
color: '#ffad42',
40+
},
41+
{
42+
tag: [t.typeName, t.className],
43+
color: '#ffad42',
44+
},
45+
{
46+
tag: [t.operator, t.operatorKeyword],
47+
color: '#7186f0',
48+
},
49+
{
50+
tag: [t.tagName],
51+
color: '#99d066',
52+
},
53+
{
54+
tag: [t.squareBracket],
55+
color: '#ff5f52',
56+
},
57+
{
58+
tag: [t.angleBracket],
59+
color: '#606f7a',
60+
},
61+
{
62+
tag: [t.attributeName],
63+
color: '#bdbdbd',
64+
},
65+
{
66+
tag: [t.regexp],
67+
color: '#ff5f52',
68+
},
69+
{
70+
tag: [t.quote],
71+
color: '#6abf69',
72+
},
73+
{ tag: [t.string], color: '#99d066' },
74+
{
75+
tag: t.link,
76+
color: '#56c8d8',
77+
textDecoration: 'underline',
78+
textUnderlinePosition: 'under',
79+
},
80+
{
81+
tag: [t.url, t.escape, t.special(t.string)],
82+
color: '#facf4e',
83+
},
84+
{ tag: [t.meta], color: '#707d8b' },
85+
{ tag: [t.comment], color: '#707d8b', fontStyle: 'italic' },
86+
{ tag: t.monospace, color: '#bdbdbd' },
87+
{ tag: t.strong, fontWeight: 'bold', color: '#ff5f52' },
88+
{ tag: t.emphasis, fontStyle: 'italic', color: '#99d066' },
89+
{ tag: t.strikethrough, textDecoration: 'line-through' },
90+
{ tag: t.heading, fontWeight: 'bold', color: '#facf4e' },
91+
{ tag: t.heading1, fontWeight: 'bold', color: '#facf4e' },
92+
{
93+
tag: [t.heading2, t.heading3, t.heading4],
94+
fontWeight: 'bold',
95+
color: '#facf4e',
96+
},
97+
{
98+
tag: [t.heading5, t.heading6],
99+
color: '#facf4e',
100+
},
101+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#56c8d8' },
102+
{
103+
tag: [t.processingInstruction, t.inserted],
104+
color: '#ff5f52',
105+
},
106+
{
107+
tag: [t.contentSeparator],
108+
color: '#56c8d8',
109+
},
110+
{ tag: t.invalid, color: '#606f7a', borderBottom: `1px dotted #ff5f52` },
111+
],
112+
});

‎themes/material/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+
}

‎themes/theme/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,12 @@ export default App;
192192
<img width="436" alt="codemirror-theme-eclipse" src="https://user-images.githubusercontent.com/1680273/205499803-e1e2e214-dc3e-488a-9037-ba979e5ce199.png">
193193
</a>
194194

195+
**material**
196+
197+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material">
198+
<img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/205537793-79f9c99c-831a-4ce3-8189-78b42896656f.png">
199+
</a>
200+
195201
**nord**
196202

197203
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/nord">

‎www/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"@uiw/codemirror-theme-eclipse": "4.16.0",
5555
"@uiw/codemirror-theme-github": "4.16.0",
5656
"@uiw/codemirror-theme-gruvbox-dark": "4.16.0",
57+
"@uiw/codemirror-theme-material": "4.16.0",
5758
"@uiw/codemirror-theme-nord": "4.16.0",
5859
"@uiw/codemirror-theme-okaidia": "4.16.0",
5960
"@uiw/codemirror-theme-sublime": "4.16.0",

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

+4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import darculaMd from '@uiw/codemirror-theme-darcula/README.md';
88
import duotoneMd from '@uiw/codemirror-theme-duotone/README.md';
99
import githubMd from '@uiw/codemirror-theme-github/README.md';
1010
import gruvboxDarkMd from '@uiw/codemirror-theme-gruvbox-dark/README.md';
11+
import materialMd from '@uiw/codemirror-theme-material/README.md';
1112
import nordMd from '@uiw/codemirror-theme-nord/README.md';
1213
import eclipseMd from '@uiw/codemirror-theme-eclipse/README.md';
1314
import bespinMd from '@uiw/codemirror-theme-bespin/README.md';
@@ -24,6 +25,7 @@ import { dracula } from '@uiw/codemirror-theme-dracula';
2425
import { darcula } from '@uiw/codemirror-theme-darcula';
2526
import { eclipse } from '@uiw/codemirror-theme-eclipse';
2627
import { bespin } from '@uiw/codemirror-theme-bespin';
28+
import { material } from '@uiw/codemirror-theme-material';
2729
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
2830
import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
2931
import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
@@ -47,6 +49,7 @@ export const mdSource = {
4749
githubDark: githubMd.source,
4850
gruvboxDark: gruvboxDarkMd.source,
4951
gruvboxLight: gruvboxDarkMd.source,
52+
material: materialMd.source,
5053
nord: nordMd.source,
5154
okaidia: okaidiaMd.source,
5255
sublime: sublimeMd.source,
@@ -70,6 +73,7 @@ export const themeData = {
7073
githubDark,
7174
gruvboxDark,
7275
gruvboxLight,
76+
material,
7377
nord,
7478
okaidia,
7579
sublime,

0 commit comments

Comments
 (0)
Please sign in to comment.