Skip to content

Commit 9908adb

Browse files
jaywcjlovejaywcjlove
committed
feat: add github/vscode/nord themes.
1 parent 9c03a58 commit 9908adb

22 files changed

+313
-57
lines changed

‎core/README.md‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,20 +85,31 @@ import React from 'react';
8585
import JsonView from '@uiw/react-json-view';
8686
import { lightTheme } from '@uiw/react-json-view/light';
8787
import { darkTheme } from '@uiw/react-json-view/dark';
88+
import { nordTheme } from '@uiw/react-json-view/nord';
89+
import { githubLightTheme } from '@uiw/react-json-view/githubLight';
90+
import { githubDarkTheme } from '@uiw/react-json-view/githubDark';
91+
import { vscodeTheme } from '@uiw/react-json-view/vscode';
8892

8993
const object = {
9094
string: 'Lorem ipsum dolor sit amet',
9195
integer: 42,
9296
float: 114.514,
97+
boolean: true,
98+
null: null,
99+
url: new URL('https://example.com'),
93100
}
94101

95102
export default function Demo() {
96103
return (
97-
<React.Fragment>
104+
<div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }}>
98105
<JsonView value={object} style={darkTheme} />
99106
<JsonView value={object} style={lightTheme} />
100-
</React.Fragment>
101-
)
107+
<JsonView value={object} style={nordTheme} />
108+
<JsonView value={object} style={githubLightTheme} />
109+
<JsonView value={object} style={githubDarkTheme} />
110+
<JsonView value={object} style={vscodeTheme} />
111+
</div>
112+
);
102113
}
103114
```
104115

‎core/dark.d.ts‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
11
declare module '@uiw/react-json-view/dark' {
2-
export const darkTheme: {
3-
'--w-rjv-font-family': string;
4-
'--w-rjv-color': string;
5-
'--w-rjv-background-color': string;
6-
'--w-rjv-border-left': string;
7-
'--w-rjv-arrow-color': string;
8-
'--w-rjv-info-color': string;
9-
'--w-rjv-type-string-color': string;
10-
'--w-rjv-type-int-color': string;
11-
'--w-rjv-type-float-color': string;
12-
'--w-rjv-type-bigint-color': string;
13-
'--w-rjv-type-boolean-color': string;
14-
'--w-rjv-type-date-color': string;
15-
'--w-rjv-type-null-color': string;
16-
'--w-rjv-type-nan-color': string;
17-
'--w-rjv-type-undefined-color': string;
18-
};
2+
export const darkTheme: import('react').CSSProperties;
193
}

‎core/githubDark.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
declare module '@uiw/react-json-view/githubDark' {
2+
export const githubDarkTheme: import('react').CSSProperties;
3+
}

‎core/githubLight.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
declare module '@uiw/react-json-view/githubLight' {
2+
export const githubLightTheme: import('react').CSSProperties;
3+
}

‎core/light.d.ts‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
11
declare module '@uiw/react-json-view/light' {
2-
export const lightTheme: {
3-
'--w-rjv-font-family': string;
4-
'--w-rjv-color': string;
5-
'--w-rjv-background-color': string;
6-
'--w-rjv-border-left': string;
7-
'--w-rjv-arrow-color': string;
8-
'--w-rjv-info-color': string;
9-
'--w-rjv-type-string-color': string;
10-
'--w-rjv-type-int-color': string;
11-
'--w-rjv-type-float-color': string;
12-
'--w-rjv-type-bigint-color': string;
13-
'--w-rjv-type-boolean-color': string;
14-
'--w-rjv-type-date-color': string;
15-
'--w-rjv-type-null-color': string;
16-
'--w-rjv-type-nan-color': string;
17-
'--w-rjv-type-undefined-color': string;
18-
};
2+
export const lightTheme: import('react').CSSProperties;
193
}

‎core/nord.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
declare module '@uiw/react-json-view/nord' {
2+
export const nordTheme: import('react').CSSProperties;
3+
}

‎core/package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,26 @@
2727
"types": "./cjs/theme/dark.d.ts",
2828
"require": "./cjs/theme/dark.js"
2929
},
30+
"./nord": {
31+
"import": "./esm/theme/nord.js",
32+
"types": "./cjs/theme/nord.d.ts",
33+
"require": "./cjs/theme/nord.js"
34+
},
35+
"./vscode": {
36+
"import": "./esm/theme/vscode.js",
37+
"types": "./cjs/theme/vscode.d.ts",
38+
"require": "./cjs/theme/vscode.js"
39+
},
40+
"./githubLight": {
41+
"import": "./esm/theme/github.light.js",
42+
"types": "./cjs/theme/github.light.d.ts",
43+
"require": "./cjs/theme/github.light.js"
44+
},
45+
"./githubDark": {
46+
"import": "./esm/theme/github.dark.js",
47+
"types": "./cjs/theme/github.dark.d.ts",
48+
"require": "./cjs/theme/github.dark.js"
49+
},
3050
"./triangle-arrow": {
3151
"import": "./esm/arrow/TriangleArrow.js",
3252
"types": "./cjs/arrow/TriangleArrow.d.ts",

‎core/src/theme/dark.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,4 @@ export const darkTheme = {
2323
'--w-rjv-type-null-color': '#d33682',
2424
'--w-rjv-type-nan-color': '#859900',
2525
'--w-rjv-type-undefined-color': '#586e75',
26-
};
26+
} as React.CSSProperties;

‎core/src/theme/github.dark.test.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { githubDarkTheme } from './github.dark';
2+
3+
it('githubDarkTheme test case', () => {
4+
expect(githubDarkTheme).toHaveProperty('--w-rjv-font-family', 'monospace');
5+
expect(Object.keys(githubDarkTheme)).toMatchObject([
6+
'--w-rjv-font-family',
7+
'--w-rjv-color',
8+
'--w-rjv-background-color',
9+
'--w-rjv-line-color',
10+
'--w-rjv-arrow-color',
11+
'--w-rjv-edit-color',
12+
'--w-rjv-info-color',
13+
'--w-rjv-update-color',
14+
'--w-rjv-copied-color',
15+
'--w-rjv-copied-success-color',
16+
'--w-rjv-curlybraces-color',
17+
'--w-rjv-colon-color',
18+
'--w-rjv-brackets-color',
19+
'--w-rjv-type-string-color',
20+
'--w-rjv-type-int-color',
21+
'--w-rjv-type-float-color',
22+
'--w-rjv-type-bigint-color',
23+
'--w-rjv-type-boolean-color',
24+
'--w-rjv-type-date-color',
25+
'--w-rjv-type-url-color',
26+
'--w-rjv-type-null-color',
27+
'--w-rjv-type-nan-color',
28+
'--w-rjv-type-undefined-color',
29+
]);
30+
});

‎core/src/theme/github.dark.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export const githubDarkTheme = {
2+
'--w-rjv-font-family': 'monospace',
3+
'--w-rjv-color': '#79c0ff',
4+
'--w-rjv-background-color': '#0d1117',
5+
'--w-rjv-line-color': '#36334280',
6+
'--w-rjv-arrow-color': '#ccc',
7+
'--w-rjv-edit-color': 'var(--w-rjv-color)',
8+
'--w-rjv-info-color': '#7b7b7b',
9+
'--w-rjv-update-color': '#ebcb8b',
10+
'--w-rjv-copied-color': '#79c0ff',
11+
'--w-rjv-copied-success-color': '#28a745',
12+
13+
'--w-rjv-curlybraces-color': '#8b949e',
14+
'--w-rjv-colon-color': '#c9d1d9',
15+
'--w-rjv-brackets-color': '#8b949e',
16+
17+
'--w-rjv-type-string-color': '#a5d6ff',
18+
'--w-rjv-type-int-color': '#79c0ff',
19+
'--w-rjv-type-float-color': '#79c0ff',
20+
'--w-rjv-type-bigint-color': '#79c0ff',
21+
'--w-rjv-type-boolean-color': '#ffab70',
22+
'--w-rjv-type-date-color': '#79c0ff',
23+
'--w-rjv-type-url-color': '#4facff',
24+
'--w-rjv-type-null-color': '#ff7b72',
25+
'--w-rjv-type-nan-color': '#859900',
26+
'--w-rjv-type-undefined-color': '#79c0ff',
27+
} as React.CSSProperties;

0 commit comments

Comments
 (0)