Skip to content

Commit 14811ae

Browse files
jaywcjlovejaywcjlove
committedDec 6, 2022
feat(nord): add nordInit method to nord theme.
·
v4.23.10v4.18.0
1 parent adf94e5 commit 14811ae

File tree

2 files changed

+139
-110
lines changed

2 files changed

+139
-110
lines changed
 

‎themes/nord/README.md

+22
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,28 @@ This package implements the [nord theme](https://www.nordtheme.com/) for the Cod
1818
npm install @uiw/codemirror-theme-nord --save
1919
```
2020

21+
```jsx
22+
import { nord, nordInit } from '@uiw/codemirror-theme-nord';
23+
24+
<CodeMirror theme={nord} />
25+
<CodeMirror
26+
theme={nordInit({
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 nordInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
40+
export declare const nord: import('@codemirror/state').Extension;
41+
```
42+
2143
## Usage
2244

2345
```jsx

‎themes/nord/src/index.ts

+117-110
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,120 @@
11
import { tags as t } from '@lezer/highlight';
2-
import { createTheme } from '@uiw/codemirror-themes';
2+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
33

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

0 commit comments

Comments
 (0)
Please sign in to comment.