Skip to content

Commit 27b08ed

Browse files
jaywcjlovejaywcjlove
committed
feat: add basic theme.
1 parent 1a96435 commit 27b08ed

File tree

6 files changed

+71
-4
lines changed

6 files changed

+71
-4
lines changed

‎core/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@ A React component for displaying and editing javascript arrays and JSON objects.
1111

1212
<!--rehype:ignore:start-->
1313
<a href="https://uiwjs.github.io/react-json-view/" target="_blank">
14-
<img width="360" alt="react-json-view" src="https://github.com/uiwjs/react-json-view/assets/1680273/b8b8300b-2a43-4173-878b-73e50cfac19c" />
15-
</a>
16-
<a href="https://uiwjs.github.io/react-json-view/" target="_blank">
17-
<img width="360" alt="react-json-view" src="https://github.com/uiwjs/react-code-preview-layout/assets/1680273/da8e8499-6de3-4d4f-8316-8b2a3b616170" />
14+
<img width="650" alt="react-json-view" src="https://github.com/uiwjs/react-json-view/assets/1680273/1c19bd72-f2ad-4d21-8708-cb30f3059cfd" />
1815
</a>
1916

2017
<!--rehype:ignore:end-->
@@ -91,6 +88,7 @@ import { githubDarkTheme } from '@uiw/react-json-view/githubDark';
9188
import { vscodeTheme } from '@uiw/react-json-view/vscode';
9289
import { gruvboxTheme } from '@uiw/react-json-view/gruvbox';
9390
import { monokaiTheme } from '@uiw/react-json-view/monokai';
91+
import { basicTheme } from '@uiw/react-json-view/basic';
9492

9593
const object = {
9694
string: 'Lorem ipsum dolor sit amet',
@@ -115,6 +113,7 @@ export default function Demo() {
115113
<JsonView value={object} style={gruvboxTheme} />
116114
<JsonView value={object} style={vscodeTheme} />
117115
<JsonView value={object} style={monokaiTheme} />
116+
<JsonView value={object} style={basicTheme} />
118117
</div>
119118
);
120119
}
@@ -151,6 +150,7 @@ const customTheme = {
151150
'--w-rjv-copied-success-color': '#28a745',
152151

153152
'--w-rjv-curlybraces-color': '#d4d4d4',
153+
'--w-rjv-colon-color': '#d4d4d4',
154154
'--w-rjv-brackets-color': '#d4d4d4',
155155

156156
'--w-rjv-type-string-color': '#ce9178',

‎core/basic.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/basic' {
2+
export const basicTheme: import('react').CSSProperties;
3+
}

‎core/package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@
3737
"types": "./cjs/theme/vscode.d.ts",
3838
"require": "./cjs/theme/vscode.js"
3939
},
40+
"./basic": {
41+
"import": "./esm/theme/basic.js",
42+
"types": "./cjs/theme/basic.d.ts",
43+
"require": "./cjs/theme/basic.js"
44+
},
4045
"./monokai": {
4146
"import": "./esm/theme/monokai.js",
4247
"types": "./cjs/theme/monokai.d.ts",

‎core/src/theme/basic.test.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { basicTheme } from './basic';
2+
3+
it('basicTheme test case', () => {
4+
expect(basicTheme).toHaveProperty('--w-rjv-font-family', 'monospace');
5+
expect(Object.keys(basicTheme)).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/basic.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export const basicTheme = {
2+
'--w-rjv-font-family': 'monospace',
3+
'--w-rjv-color': '#b5bd68',
4+
'--w-rjv-background-color': '#2E3235',
5+
'--w-rjv-line-color': '#292d30',
6+
'--w-rjv-arrow-color': 'var(--w-rjv-color)',
7+
'--w-rjv-edit-color': 'var(--w-rjv-color)',
8+
'--w-rjv-info-color': '#d8d8d84d',
9+
'--w-rjv-update-color': '#b5bd68',
10+
'--w-rjv-copied-color': '#b5bd68',
11+
'--w-rjv-copied-success-color': '#28a745',
12+
13+
'--w-rjv-curlybraces-color': '#cc99cc',
14+
'--w-rjv-colon-color': '#bababa',
15+
'--w-rjv-brackets-color': '#808080',
16+
17+
'--w-rjv-type-string-color': '#b5bd68',
18+
'--w-rjv-type-int-color': '#fda331',
19+
'--w-rjv-type-float-color': '#fda331',
20+
'--w-rjv-type-bigint-color': '#fda331',
21+
'--w-rjv-type-boolean-color': '#fda331',
22+
'--w-rjv-type-date-color': '#8abeb7',
23+
'--w-rjv-type-url-color': '#5a89c0',
24+
'--w-rjv-type-null-color': '#8abeb7',
25+
'--w-rjv-type-nan-color': '#8abeb7',
26+
'--w-rjv-type-undefined-color': '#8abeb7',
27+
} as React.CSSProperties;

‎www/src/example/default.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ import { githubDarkTheme } from '@uiw/react-json-view/githubDark';
99
import { vscodeTheme } from '@uiw/react-json-view/vscode';
1010
import { gruvboxTheme } from '@uiw/react-json-view/gruvbox';
1111
import { monokaiTheme } from '@uiw/react-json-view/monokai';
12+
import { basicTheme } from '@uiw/react-json-view/basic';
1213

1314
export const themesData = {
15+
basic: basicTheme,
1416
light: lightTheme,
1517
dark: darkTheme,
1618
nord: nordTheme,

0 commit comments

Comments
 (0)