Skip to content

Commit 129d8e3

Browse files
jaywcjlovejaywcjlove
committedDec 6, 2022
feat(material): add materialInit method to material theme.
·
v4.23.10v4.18.0
1 parent 14811ae commit 129d8e3

File tree

2 files changed

+139
-110
lines changed

2 files changed

+139
-110
lines changed
 

‎themes/material/README.md

+22
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,28 @@ This package implements the [Material](https://material.io/tools/color/) Dark th
1818
npm install @uiw/codemirror-theme-material --save
1919
```
2020

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

2345
```jsx

‎themes/material/src/index.ts

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

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

0 commit comments

Comments
 (0)
Please sign in to comment.