Skip to content

Commit 2aacb6f

Browse files
jaywcjlovejaywcjlove
committedDec 6, 2022
feat(github): add githubDarkInit/githubLightInit method to github theme.
·
v4.23.10v4.18.0
1 parent c5c0afe commit 2aacb6f

File tree

2 files changed

+92
-54
lines changed

2 files changed

+92
-54
lines changed
 

‎themes/github/README.md

+24
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,30 @@
2020
npm install @uiw/codemirror-theme-github --save
2121
```
2222

23+
```jsx
24+
import { githubLight, githubLightInit, githubDark, githubDarkInit } from '@uiw/codemirror-theme-github';
25+
26+
<CodeMirror theme={githubLight} />
27+
<CodeMirror
28+
theme={githubLightInit({
29+
settings: {
30+
caret: '#c6c6c6',
31+
fontFamily: 'monospace',
32+
}
33+
})}
34+
/>
35+
```
36+
37+
## API
38+
39+
```tsx
40+
import { CreateThemeOptions } from '@uiw/codemirror-themes';
41+
export declare const githubLightInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
42+
export declare const githubLight: import('@codemirror/state').Extension;
43+
export declare const githubDarkInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
44+
export declare const githubDark: import('@codemirror/state').Extension;
45+
```
46+
2347
## Usage
2448

2549
```jsx

‎themes/github/src/index.ts

+68-54
Original file line numberDiff line numberDiff line change
@@ -2,59 +2,73 @@
22
* @name github
33
*/
44
import { tags as t } from '@lezer/highlight';
5-
import { createTheme } from '@uiw/codemirror-themes';
5+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
66

7-
export const githubLight = createTheme({
8-
theme: 'light',
9-
settings: {
10-
background: '#fff',
11-
foreground: '#24292e',
12-
selection: '#BBDFFF',
13-
selectionMatch: '#BBDFFF',
14-
gutterBackground: '#fff',
15-
gutterForeground: '#6e7781',
16-
},
17-
styles: [
18-
{ tag: [t.comment, t.bracket], color: '#6a737d' },
19-
{ tag: [t.className, t.propertyName], color: '#6f42c1' },
20-
{ tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#005cc5' },
21-
{ tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#d73a49' },
22-
{ tag: [t.string, t.meta, t.regexp], color: '#032f62' },
23-
{ tag: [t.name, t.quote], color: '#22863a' },
24-
{ tag: [t.heading], color: '#24292e', fontWeight: 'bold' },
25-
{ tag: [t.emphasis], color: '#24292e', fontStyle: 'italic' },
26-
{ tag: [t.deleted], color: '#b31d28', backgroundColor: 'ffeef0' },
27-
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#e36209' },
28-
{ tag: [t.url, t.escape, t.regexp, t.link], color: '#032f62' },
29-
{ tag: t.link, textDecoration: 'underline' },
30-
{ tag: t.strikethrough, textDecoration: 'line-through' },
31-
{ tag: t.invalid, color: '#cb2431' },
32-
],
33-
});
7+
export const githubLightInit = (options?: CreateThemeOptions) => {
8+
const { theme = 'light', settings = {}, styles = [] } = options || {};
9+
return createTheme({
10+
theme: theme,
11+
settings: {
12+
background: '#fff',
13+
foreground: '#24292e',
14+
selection: '#BBDFFF',
15+
selectionMatch: '#BBDFFF',
16+
gutterBackground: '#fff',
17+
gutterForeground: '#6e7781',
18+
...settings,
19+
},
20+
styles: [
21+
{ tag: [t.comment, t.bracket], color: '#6a737d' },
22+
{ tag: [t.className, t.propertyName], color: '#6f42c1' },
23+
{ tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#005cc5' },
24+
{ tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#d73a49' },
25+
{ tag: [t.string, t.meta, t.regexp], color: '#032f62' },
26+
{ tag: [t.name, t.quote], color: '#22863a' },
27+
{ tag: [t.heading], color: '#24292e', fontWeight: 'bold' },
28+
{ tag: [t.emphasis], color: '#24292e', fontStyle: 'italic' },
29+
{ tag: [t.deleted], color: '#b31d28', backgroundColor: 'ffeef0' },
30+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#e36209' },
31+
{ tag: [t.url, t.escape, t.regexp, t.link], color: '#032f62' },
32+
{ tag: t.link, textDecoration: 'underline' },
33+
{ tag: t.strikethrough, textDecoration: 'line-through' },
34+
{ tag: t.invalid, color: '#cb2431' },
35+
...styles,
36+
],
37+
});
38+
};
3439

35-
export const githubDark = createTheme({
36-
theme: 'dark',
37-
settings: {
38-
background: '#0d1117',
39-
foreground: '#c9d1d9',
40-
caret: '#c9d1d9',
41-
selection: '#003d73',
42-
selectionMatch: '#003d73',
43-
lineHighlight: '#36334280',
44-
},
45-
styles: [
46-
{ tag: [t.comment, t.bracket], color: '#8b949e' },
47-
{ tag: [t.className, t.propertyName], color: '#d2a8ff' },
48-
{ tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#79c0ff' },
49-
{ tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#ff7b72' },
50-
{ tag: [t.string, t.meta, t.regexp], color: '#a5d6ff' },
51-
{ tag: [t.name, t.quote], color: '#7ee787' },
52-
{ tag: [t.heading], color: '#d2a8ff', fontWeight: 'bold' },
53-
{ tag: [t.emphasis], color: '#d2a8ff', fontStyle: 'italic' },
54-
{ tag: [t.deleted], color: '#ffdcd7', backgroundColor: 'ffeef0' },
55-
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#ffab70' },
56-
{ tag: t.link, textDecoration: 'underline' },
57-
{ tag: t.strikethrough, textDecoration: 'line-through' },
58-
{ tag: t.invalid, color: '#f97583' },
59-
],
60-
});
40+
export const githubLight = githubLightInit();
41+
42+
export const githubDarkInit = (options?: CreateThemeOptions) => {
43+
const { theme = 'dark', settings = {}, styles = [] } = options || {};
44+
return createTheme({
45+
theme: theme,
46+
settings: {
47+
background: '#0d1117',
48+
foreground: '#c9d1d9',
49+
caret: '#c9d1d9',
50+
selection: '#003d73',
51+
selectionMatch: '#003d73',
52+
lineHighlight: '#36334280',
53+
...settings,
54+
},
55+
styles: [
56+
{ tag: [t.comment, t.bracket], color: '#8b949e' },
57+
{ tag: [t.className, t.propertyName], color: '#d2a8ff' },
58+
{ tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#79c0ff' },
59+
{ tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#ff7b72' },
60+
{ tag: [t.string, t.meta, t.regexp], color: '#a5d6ff' },
61+
{ tag: [t.name, t.quote], color: '#7ee787' },
62+
{ tag: [t.heading], color: '#d2a8ff', fontWeight: 'bold' },
63+
{ tag: [t.emphasis], color: '#d2a8ff', fontStyle: 'italic' },
64+
{ tag: [t.deleted], color: '#ffdcd7', backgroundColor: 'ffeef0' },
65+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#ffab70' },
66+
{ tag: t.link, textDecoration: 'underline' },
67+
{ tag: t.strikethrough, textDecoration: 'line-through' },
68+
{ tag: t.invalid, color: '#f97583' },
69+
...styles,
70+
],
71+
});
72+
};
73+
74+
export const githubDark = githubDarkInit();

0 commit comments

Comments
 (0)
Please sign in to comment.