feat: add monokai theme.

Author: jaywcjlove

core/README.md

@@ -90,6 +90,7 @@ import { githubLightTheme } from '@uiw/react-json-view/githubLight';
 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';
 
 const object = {
   string: 'Lorem ipsum dolor sit amet',
@@ -113,6 +114,7 @@ export default function Demo() {
       <JsonView value={object} style={githubDarkTheme} />
       <JsonView value={object} style={gruvboxTheme} />
       <JsonView value={object} style={vscodeTheme} />
+      <JsonView value={object} style={monokaiTheme} />
     </div>
   );
 }

core/monokai.d.ts

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

core/package.json

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

core/src/theme/monokai.test.tsx

@@ -0,0 +1,30 @@
+import { monokaiTheme } from './monokai';
+
+it('monokaiTheme test case', () => {
+  expect(monokaiTheme).toHaveProperty('--w-rjv-font-family', 'monospace');
+  expect(Object.keys(monokaiTheme)).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/monokai.tsx

@@ -0,0 +1,27 @@
+export const monokaiTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#E6DB74',
+  '--w-rjv-background-color': '#272822',
+  '--w-rjv-line-color': '#3e3d32',
+  '--w-rjv-arrow-color': '#f8f8f2',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#cecece4d',
+  '--w-rjv-update-color': '#5f5600',
+  '--w-rjv-copied-color': '#E6DB74',
+  '--w-rjv-copied-success-color': '#28a745',
+
+  '--w-rjv-curlybraces-color': '#f8f8f2',
+  '--w-rjv-colon-color': '#f8f8f2',
+  '--w-rjv-brackets-color': '#f8f8f2',
+
+  '--w-rjv-type-string-color': '#E6DB74',
+  '--w-rjv-type-int-color': '#AE81FF',
+  '--w-rjv-type-float-color': '#AE81FF',
+  '--w-rjv-type-bigint-color': '#AE81FF',
+  '--w-rjv-type-boolean-color': '#AE81FF',
+  '--w-rjv-type-date-color': '#fd9720c7',
+  '--w-rjv-type-url-color': '#0969da',
+  '--w-rjv-type-null-color': '#FA2672',
+  '--w-rjv-type-nan-color': '#FD971F',
+  '--w-rjv-type-undefined-color': '#FD971F',
+} as React.CSSProperties;

www/src/example/default.tsx

@@ -8,15 +8,17 @@ import { githubLightTheme } from '@uiw/react-json-view/githubLight';
 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';
 
 export const themesData = {
-  gruvbox: gruvboxTheme,
   light: lightTheme,
   dark: darkTheme,
   nord: nordTheme,
   vscode: vscodeTheme,
   githubLight: githubLightTheme,
   githubDark: githubDarkTheme,
+  gruvbox: gruvboxTheme,
+  monokai: monokaiTheme,
 };
 
 const avatar = 'https://i.imgur.com/1bX5QH6.jpg';