Skip to content

Commit 2717cdd

Browse files
committedDec 4, 2022
feat(theme): add nord theme.
1 parent b9d6ef6 commit 2717cdd

File tree

12 files changed

+275
-2
lines changed

12 files changed

+275
-2
lines changed
 

‎.github/workflows/ci.yml

+20-1
Original file line numberDiff line numberDiff line change
@@ -417,6 +417,12 @@ jobs:
417417
path: themes/github/package.json
418418
rename: "@uiwjs/codemirror-theme-github"
419419

420+
- run: npm publish
421+
working-directory: themes/github
422+
if: success() || failure()
423+
env:
424+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
425+
420426
- name: Modify @uiw/codemirror-theme-gruvbox-dark => @uiwjs/codemirror-theme-gruvbox-dark
421427
uses: jaywcjlove/github-action-package@main
422428
if: success() || failure()
@@ -425,7 +431,20 @@ jobs:
425431
rename: '@uiwjs/codemirror-theme-gruvbox-dark'
426432

427433
- run: npm publish
428-
working-directory: themes/github
434+
working-directory: themes/gruvbox
435+
if: success() || failure()
436+
env:
437+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
438+
439+
- name: Modify @uiw/codemirror-theme-nord => @uiwjs/codemirror-theme-nord
440+
uses: jaywcjlove/github-action-package@main
441+
if: success() || failure()
442+
with:
443+
path: themes/nord/package.json
444+
rename: '@uiwjs/codemirror-theme-nord'
445+
446+
- run: npm publish
447+
working-directory: themes/nord
429448
if: success() || failure()
430449
env:
431450
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

‎core/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ npm install @uiw/react-codemirror --save
5050
| `@uiw/codemirror-extensions-langs` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-langs.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-langs) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-extensions-langs.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-extensions-langs) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/extensions/languages) |
5151
| `@uiw/codemirror-extensions-line-numbers-relative` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-line-numbers-relative.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-line-numbers-relative) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-extensions-line-numbers-relative.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-extensions-line-numbers-relative) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/extensions/line-numbers-relative) |
5252
| `@uiw/codemirror-extensions-mentions` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-mentions.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-mentions) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-extensions-mentions.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-extensions-mentions) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/extensions/mentions) |
53-
| `@uiw/codemirror-extensions-zebra-stripes` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-zebra-stripes.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-zebra-stripes) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-extensions-zebra-stripes.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-extensions-zebra-stripes) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/extensions/mentions) |
53+
| `@uiw/codemirror-extensions-zebra-stripes` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-zebra-stripes.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-zebra-stripes) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-extensions-zebra-stripes.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-extensions-zebra-stripes) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/extensions/zebra-stripes) |
5454
| `@uiw/codemirror-themes` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-themes.svg)](https://www.npmjs.com/package/@uiw/codemirror-themes) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-themes.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-themes) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/doc) |
5555
| `@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) |
5656
| `@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) |

‎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-nord';
7374
export * from '@uiw/codemirror-theme-okaidia';
7475
export * from '@uiw/codemirror-theme-sublime';
7576
export * from '@uiw/codemirror-theme-vscode';

‎themes/all/package.json

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

‎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-nord';
1213
export * from '@uiw/codemirror-theme-okaidia';
1314
export * from '@uiw/codemirror-theme-sublime';
1415
export * from '@uiw/codemirror-theme-vscode';

‎themes/nord/README.md

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!--rehype:ignore:start-->
2+
3+
# Nord Theme
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-nord.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord)
8+
9+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/nord">
10+
<img width="436" alt="codemirror-theme-nord" src="https://user-images.githubusercontent.com/1680273/205498304-956bc719-1472-40f0-9c3f-21ac5b9f97a6.png">
11+
</a>
12+
13+
## Install
14+
15+
```bash
16+
npm install @uiw/codemirror-theme-nord --save
17+
```
18+
19+
## Usage
20+
21+
```jsx
22+
import CodeMirror from '@uiw/react-codemirror';
23+
import { nord } from '@uiw/codemirror-theme-nord';
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={nord}
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 { nord } from '@uiw/codemirror-theme-nord';
47+
48+
const state = EditorState.create({
49+
doc: 'my source code',
50+
extensions: [nord, 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 [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
68+
69+
## License
70+
71+
Licensed under the MIT License.

‎themes/nord/package.json

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

‎themes/nord/src/index.ts

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

‎themes/nord/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

+12
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,18 @@ export default App;
182182
<img width="436" alt="codemirror-theme-github light" src="https://user-images.githubusercontent.com/1680273/177048005-32794f23-8bff-4059-babf-21316d886e65.png">
183183
</a>
184184

185+
**gruvbox**
186+
187+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox/dark">
188+
<img width="436" alt="codemirror-theme-gruvbox-dark" src="https://user-images.githubusercontent.com/1680273/201111051-c38a73ca-a449-4c01-a4ff-4a675886ca9d.png">
189+
</a>
190+
191+
**nord**
192+
193+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/nord">
194+
<img width="436" alt="codemirror-theme-nord" src="https://user-images.githubusercontent.com/1680273/205498304-956bc719-1472-40f0-9c3f-21ac5b9f97a6.png">
195+
</a>
196+
185197
**okaidia**
186198

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

‎www/package.json

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

‎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 nordMd from '@uiw/codemirror-theme-nord/README.md';
1112
import eclipseMd from '@uiw/codemirror-theme-eclipse/README.md';
1213
import bespinMd from '@uiw/codemirror-theme-bespin/README.md';
1314
import sublimeMd from '@uiw/codemirror-theme-sublime/README.md';
@@ -27,6 +28,7 @@ import { vscodeDark } from '@uiw/codemirror-theme-vscode';
2728
import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
2829
import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
2930
import { gruvboxDark } from '@uiw/codemirror-theme-gruvbox-dark';
31+
import { nord } from '@uiw/codemirror-theme-nord';
3032
import { sublime } from '@uiw/codemirror-theme-sublime';
3133
import { xcodeLight, xcodeDark } from '@uiw/codemirror-theme-xcode';
3234

@@ -44,6 +46,7 @@ export const mdSource = {
4446
githubLight: githubMd.source,
4547
githubDark: githubMd.source,
4648
gruvboxDark: gruvboxDarkMd.source,
49+
nord: nordMd.source,
4750
okaidia: okaidiaMd.source,
4851
sublime: sublimeMd.source,
4952
vscodeDark: vscodeMd.source,
@@ -65,6 +68,7 @@ export const themeData = {
6568
githubLight,
6669
githubDark,
6770
gruvboxDark,
71+
nord,
6872
okaidia,
6973
sublime,
7074
vscodeDark,

0 commit comments

Comments
 (0)
Please sign in to comment.