feat: add basic theme.

Author: jaywcjlove

core/README.md

@@ -11,10 +11,7 @@ A React component for displaying and editing javascript arrays and JSON objects.
 
 <!--rehype:ignore:start-->
 <a href="https://uiwjs.github.io/react-json-view/" target="_blank">
-  <img width="360" alt="react-json-view" src="https://github.com/uiwjs/react-json-view/assets/1680273/b8b8300b-2a43-4173-878b-73e50cfac19c" />
-</a>
-<a href="https://uiwjs.github.io/react-json-view/" target="_blank">
-  <img width="360" alt="react-json-view" src="https://github.com/uiwjs/react-code-preview-layout/assets/1680273/da8e8499-6de3-4d4f-8316-8b2a3b616170" />
+  <img width="650" alt="react-json-view" src="https://github.com/uiwjs/react-json-view/assets/1680273/1c19bd72-f2ad-4d21-8708-cb30f3059cfd" />
 </a>
 
 <!--rehype:ignore:end-->
@@ -91,6 +88,7 @@ import { githubDarkTheme } from '@uiw/react-json-view/githubDark';
 import { vscodeTheme } from '@uiw/react-json-view/vscode';
 import { gruvboxTheme } from '@uiw/react-json-view/gruvbox';
 import { monokaiTheme } from '@uiw/react-json-view/monokai';
+import { basicTheme } from '@uiw/react-json-view/basic';
 
 const object = {
   string: 'Lorem ipsum dolor sit amet',
@@ -115,6 +113,7 @@ export default function Demo() {
       <JsonView value={object} style={gruvboxTheme} />
       <JsonView value={object} style={vscodeTheme} />
       <JsonView value={object} style={monokaiTheme} />
+      <JsonView value={object} style={basicTheme} />
     </div>
   );
 }
@@ -151,6 +150,7 @@ const customTheme = {
   '--w-rjv-copied-success-color': '#28a745',
 
   '--w-rjv-curlybraces-color': '#d4d4d4',
+  '--w-rjv-colon-color': '#d4d4d4',
   '--w-rjv-brackets-color': '#d4d4d4',
 
   '--w-rjv-type-string-color': '#ce9178',

core/basic.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/basic' {
+  export const basicTheme: import('react').CSSProperties;
+}

core/package.json

@@ -37,6 +37,11 @@
       "types": "./cjs/theme/vscode.d.ts",
       "require": "./cjs/theme/vscode.js"
     },
+    "./basic": {
+      "import": "./esm/theme/basic.js",
+      "types": "./cjs/theme/basic.d.ts",
+      "require": "./cjs/theme/basic.js"
+    },
     "./monokai": {
       "import": "./esm/theme/monokai.js",
       "types": "./cjs/theme/monokai.d.ts",

core/src/theme/basic.test.ts

@@ -0,0 +1,30 @@
+import { basicTheme } from './basic';
+
+it('basicTheme test case', () => {
+  expect(basicTheme).toHaveProperty('--w-rjv-font-family', 'monospace');
+  expect(Object.keys(basicTheme)).toMatchObject([
+    '--w-rjv-font-family',
+    '--w-rjv-color',
+    '--w-rjv-background-color',
+    '--w-rjv-line-color',
+    '--w-rjv-arrow-color',
+    '--w-rjv-edit-color',
+    '--w-rjv-info-color',
+    '--w-rjv-update-color',
+    '--w-rjv-copied-color',
+    '--w-rjv-copied-success-color',
+    '--w-rjv-curlybraces-color',
+    '--w-rjv-colon-color',
+    '--w-rjv-brackets-color',
+    '--w-rjv-type-string-color',
+    '--w-rjv-type-int-color',
+    '--w-rjv-type-float-color',
+    '--w-rjv-type-bigint-color',
+    '--w-rjv-type-boolean-color',
+    '--w-rjv-type-date-color',
+    '--w-rjv-type-url-color',
+    '--w-rjv-type-null-color',
+    '--w-rjv-type-nan-color',
+    '--w-rjv-type-undefined-color',
+  ]);
+});

core/src/theme/basic.tsx

@@ -0,0 +1,27 @@
+export const basicTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#b5bd68',
+  '--w-rjv-background-color': '#2E3235',
+  '--w-rjv-line-color': '#292d30',
+  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#d8d8d84d',
+  '--w-rjv-update-color': '#b5bd68',
+  '--w-rjv-copied-color': '#b5bd68',
+  '--w-rjv-copied-success-color': '#28a745',
+
+  '--w-rjv-curlybraces-color': '#cc99cc',
+  '--w-rjv-colon-color': '#bababa',
+  '--w-rjv-brackets-color': '#808080',
+
+  '--w-rjv-type-string-color': '#b5bd68',
+  '--w-rjv-type-int-color': '#fda331',
+  '--w-rjv-type-float-color': '#fda331',
+  '--w-rjv-type-bigint-color': '#fda331',
+  '--w-rjv-type-boolean-color': '#fda331',
+  '--w-rjv-type-date-color': '#8abeb7',
+  '--w-rjv-type-url-color': '#5a89c0',
+  '--w-rjv-type-null-color': '#8abeb7',
+  '--w-rjv-type-nan-color': '#8abeb7',
+  '--w-rjv-type-undefined-color': '#8abeb7',
+} as React.CSSProperties;

www/src/example/default.tsx

@@ -9,8 +9,10 @@ import { githubDarkTheme } from '@uiw/react-json-view/githubDark';
 import { vscodeTheme } from '@uiw/react-json-view/vscode';
 import { gruvboxTheme } from '@uiw/react-json-view/gruvbox';
 import { monokaiTheme } from '@uiw/react-json-view/monokai';
+import { basicTheme } from '@uiw/react-json-view/basic';
 
 export const themesData = {
+  basic: basicTheme,
   light: lightTheme,
   dark: darkTheme,
   nord: nordTheme,