Skip to content

Commit 1c1c49f

Browse files
x1unixx1unix
authoredJun 7, 2024··
feat(themes): add vscode light theme (#660)
* feat(themes): add vscode light theme * feat(themes): update demo
·
v4.23.10v4.22.2
1 parent 2c7080a commit 1c1c49f

File tree

4 files changed

+197
-97
lines changed

4 files changed

+197
-97
lines changed
 

‎themes/vscode/src/dark.ts

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
2+
/**
3+
* https://github.com/uiwjs/react-codemirror/issues/409
4+
*/
5+
import { tags as t } from '@lezer/highlight';
6+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
7+
8+
export const defaultSettingsVscodeDark: CreateThemeOptions['settings'] = {
9+
background: '#1e1e1e',
10+
foreground: '#9cdcfe',
11+
caret: '#c6c6c6',
12+
selection: '#6199ff2f',
13+
selectionMatch: '#72a1ff59',
14+
lineHighlight: '#ffffff0f',
15+
gutterBackground: '#1e1e1e',
16+
gutterForeground: '#838383',
17+
gutterActiveForeground: '#fff',
18+
fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
19+
};
20+
21+
export function vscodeDarkInit(options?: Partial<CreateThemeOptions>) {
22+
const { theme = 'dark', settings = {}, styles = [] } = options || {};
23+
return createTheme({
24+
theme: theme,
25+
settings: {
26+
...defaultSettingsVscodeDark,
27+
...settings,
28+
},
29+
styles: [
30+
{
31+
tag: [
32+
t.keyword,
33+
t.operatorKeyword,
34+
t.modifier,
35+
t.color,
36+
t.constant(t.name),
37+
t.standard(t.name),
38+
t.standard(t.tagName),
39+
t.special(t.brace),
40+
t.atom,
41+
t.bool,
42+
t.special(t.variableName),
43+
],
44+
color: '#569cd6',
45+
},
46+
{
47+
tag: [t.controlKeyword, t.moduleKeyword],
48+
color: '#c586c0',
49+
},
50+
{
51+
tag: [
52+
t.name,
53+
t.deleted,
54+
t.character,
55+
t.macroName,
56+
t.propertyName,
57+
t.variableName,
58+
t.labelName,
59+
t.definition(t.name),
60+
],
61+
color: '#9cdcfe',
62+
},
63+
{ tag: t.heading, fontWeight: 'bold', color: '#9cdcfe' },
64+
{
65+
tag: [t.typeName, t.className, t.tagName, t.number, t.changed, t.annotation, t.self, t.namespace],
66+
color: '#4ec9b0',
67+
},
68+
{
69+
tag: [t.function(t.variableName), t.function(t.propertyName)],
70+
color: '#dcdcaa',
71+
},
72+
{ tag: [t.number], color: '#b5cea8' },
73+
{
74+
tag: [t.operator, t.punctuation, t.separator, t.url, t.escape, t.regexp],
75+
color: '#d4d4d4',
76+
},
77+
{
78+
tag: [t.regexp],
79+
color: '#d16969',
80+
},
81+
{
82+
tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted],
83+
color: '#ce9178',
84+
},
85+
{ tag: [t.angleBracket], color: '#808080' },
86+
{ tag: t.strong, fontWeight: 'bold' },
87+
{ tag: t.emphasis, fontStyle: 'italic' },
88+
{ tag: t.strikethrough, textDecoration: 'line-through' },
89+
{ tag: [t.meta, t.comment], color: '#6a9955' },
90+
{ tag: t.link, color: '#6a9955', textDecoration: 'underline' },
91+
{ tag: t.invalid, color: '#ff0000' },
92+
...styles,
93+
],
94+
});
95+
}
96+
97+
export const vscodeDark = vscodeDarkInit();

‎themes/vscode/src/index.ts

+2-96
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,2 @@
1-
/**
2-
* https://github.com/uiwjs/react-codemirror/issues/409
3-
*/
4-
import { tags as t } from '@lezer/highlight';
5-
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
6-
7-
export const defaultSettingsVscodeDark: CreateThemeOptions['settings'] = {
8-
background: '#1e1e1e',
9-
foreground: '#9cdcfe',
10-
caret: '#c6c6c6',
11-
selection: '#6199ff2f',
12-
selectionMatch: '#72a1ff59',
13-
lineHighlight: '#ffffff0f',
14-
gutterBackground: '#1e1e1e',
15-
gutterForeground: '#838383',
16-
gutterActiveForeground: '#fff',
17-
fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
18-
};
19-
20-
export function vscodeDarkInit(options?: Partial<CreateThemeOptions>) {
21-
const { theme = 'dark', settings = {}, styles = [] } = options || {};
22-
return createTheme({
23-
theme: theme,
24-
settings: {
25-
...defaultSettingsVscodeDark,
26-
...settings,
27-
},
28-
styles: [
29-
{
30-
tag: [
31-
t.keyword,
32-
t.operatorKeyword,
33-
t.modifier,
34-
t.color,
35-
t.constant(t.name),
36-
t.standard(t.name),
37-
t.standard(t.tagName),
38-
t.special(t.brace),
39-
t.atom,
40-
t.bool,
41-
t.special(t.variableName),
42-
],
43-
color: '#569cd6',
44-
},
45-
{
46-
tag: [t.controlKeyword, t.moduleKeyword],
47-
color: '#c586c0',
48-
},
49-
{
50-
tag: [
51-
t.name,
52-
t.deleted,
53-
t.character,
54-
t.macroName,
55-
t.propertyName,
56-
t.variableName,
57-
t.labelName,
58-
t.definition(t.name),
59-
],
60-
color: '#9cdcfe',
61-
},
62-
{ tag: t.heading, fontWeight: 'bold', color: '#9cdcfe' },
63-
{
64-
tag: [t.typeName, t.className, t.tagName, t.number, t.changed, t.annotation, t.self, t.namespace],
65-
color: '#4ec9b0',
66-
},
67-
{
68-
tag: [t.function(t.variableName), t.function(t.propertyName)],
69-
color: '#dcdcaa',
70-
},
71-
{ tag: [t.number], color: '#b5cea8' },
72-
{
73-
tag: [t.operator, t.punctuation, t.separator, t.url, t.escape, t.regexp],
74-
color: '#d4d4d4',
75-
},
76-
{
77-
tag: [t.regexp],
78-
color: '#d16969',
79-
},
80-
{
81-
tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted],
82-
color: '#ce9178',
83-
},
84-
{ tag: [t.angleBracket], color: '#808080' },
85-
{ tag: t.strong, fontWeight: 'bold' },
86-
{ tag: t.emphasis, fontStyle: 'italic' },
87-
{ tag: t.strikethrough, textDecoration: 'line-through' },
88-
{ tag: [t.meta, t.comment], color: '#6a9955' },
89-
{ tag: t.link, color: '#6a9955', textDecoration: 'underline' },
90-
{ tag: t.invalid, color: '#ff0000' },
91-
...styles,
92-
],
93-
});
94-
}
95-
96-
export const vscodeDark = vscodeDarkInit();
1+
export * from './light'
2+
export * from './dark'

‎themes/vscode/src/light.ts

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/**
2+
* https://github.com/uiwjs/react-codemirror/issues/409
3+
*/
4+
import { tags as t } from '@lezer/highlight';
5+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
6+
7+
export const defaultSettingsVscodeLight: CreateThemeOptions['settings'] = {
8+
background: '#ffffff',
9+
foreground: '#383a42',
10+
caret: '#000',
11+
selection: '#add6ff',
12+
selectionMatch: '#a8ac94',
13+
lineHighlight: '#f0f0f0',
14+
gutterBackground: '#fff',
15+
gutterForeground: '#237893',
16+
gutterActiveForeground: '#0b216f',
17+
fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
18+
};
19+
20+
export function vscodeLightInit(options?: Partial<CreateThemeOptions>) {
21+
const { theme = 'dark', settings = {}, styles = [] } = options || {};
22+
return createTheme({
23+
theme: theme,
24+
settings: {
25+
...defaultSettingsVscodeDark,
26+
...settings,
27+
},
28+
styles: [
29+
{
30+
tag: [
31+
t.keyword,
32+
t.operatorKeyword,
33+
t.modifier,
34+
t.color,
35+
t.constant(t.name),
36+
t.standard(t.name),
37+
t.standard(t.tagName),
38+
t.special(t.brace),
39+
t.atom,
40+
t.bool,
41+
t.special(t.variableName),
42+
],
43+
color: '#0000ff',
44+
},
45+
{
46+
tag: [t.moduleKeyword, t.controlKeyword],
47+
color: '#af00db',
48+
},
49+
{
50+
tag: [
51+
t.name,
52+
t.deleted,
53+
t.character,
54+
t.macroName,
55+
t.propertyName,
56+
t.variableName,
57+
t.labelName,
58+
t.definition(t.name),
59+
],
60+
color: '#0070c1',
61+
},
62+
{ tag: t.heading, fontWeight: 'bold', color: '#0070c1' },
63+
{
64+
tag: [t.typeName, t.className, t.tagName, t.number, t.changed, t.annotation, t.self, t.namespace],
65+
color: '#267f99',
66+
},
67+
{
68+
tag: [t.function(t.variableName), t.function(t.propertyName)],
69+
color: '#795e26',
70+
},
71+
{ tag: [t.number], color: '#098658' },
72+
{
73+
tag: [t.operator, t.punctuation, t.separator, t.url, t.escape, t.regexp],
74+
color: '#383a42',
75+
},
76+
{
77+
tag: [t.regexp],
78+
color: '#af00db',
79+
},
80+
{
81+
tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted],
82+
color: '#a31515',
83+
},
84+
{ tag: [t.angleBracket], color: '#383a42' },
85+
{ tag: t.strong, fontWeight: 'bold' },
86+
{ tag: t.emphasis, fontStyle: 'italic' },
87+
{ tag: t.strikethrough, textDecoration: 'line-through' },
88+
{ tag: [t.meta, t.comment], color: '#008000' },
89+
{ tag: t.link, color: '#4078f2', textDecoration: 'underline' },
90+
{ tag: t.invalid, color: '#e45649' },
91+
...styles,
92+
],
93+
});
94+
}
95+
96+
export const vscodeLight = vscodeLightInit();

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { materialLight, materialDark } from '@uiw/codemirror-theme-material';
1616
import { monokai } from '@uiw/codemirror-theme-monokai';
1717
import { monokaiDimmed } from '@uiw/codemirror-theme-monokai-dimmed';
1818
import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac';
19-
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
19+
import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode';
2020
import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
2121
import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
2222
import { gruvboxDark, gruvboxLight } from '@uiw/codemirror-theme-gruvbox-dark';
@@ -75,6 +75,7 @@ export const themeData = {
7575
tokyoNightDay,
7676
tomorrowNightBlue,
7777
vscodeDark,
78+
vscodeLight,
7879
whiteLight,
7980
whiteDark,
8081
xcodeLight,

0 commit comments

Comments
 (0)
Please sign in to comment.