feat: add dark mode

HuolalaTech · Jun 9, 2023 · 7bc471c · 7bc471c
1 parent f87150f
commit 7bc471c
Show file tree

Hide file tree

Showing 13 changed files with 167,402 additions and 90 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-Engligh | [中文](./README_ZH.md)
+Engligh | [中文](./README_CN.md)
 
 ## @huolala-tech/react-json-view
 
@@ -35,6 +35,7 @@ const App = () => {
     <div id="app">
       <ReactJsonView
         source={data}
+        darkMode={false}
         rootLabel="Response data"
         keyCount={200}
         defaultExpand={false}
@@ -59,6 +60,7 @@ The default configuration usage:
 ```tsx
 <ReactJsonView
   source={data}
+  darkMode={false}
   rootLabel=""
   defaultExpand={false}
   keyCount={200}
@@ -68,7 +70,8 @@ The default configuration usage:
 
 | Name            | Type               | Default value | Description                                                  |
 | --------------- | ------------------ | ------------- | ------------------------------------------------------------ |
-| `source`        | `object`           | None          | Origin serializable data.                                            |
+| `source`        | `object`           | None          | Origin serializable data.                                    |
+| `darkMode`      | `boolean`          | `false`       | Indicate whether enable dark mode.                           |
 | `rootLabel`     | `React.ReactNode`  | `""`          | Root node's label.                                           |
 | `defaultExpand` | `boolean / number` | `false`       | Whether expand property panel. Expand at a particular depth if you pass a integer value. |
 | `keyCount`      | `number / "all"`   | `200`         | `ReactJsonView` supports lazily loading more properties. The parameter indicates how many properties to show at a time, and you can pass `"all"` to show all properties. |

diff --git a/README_ZH.md → README_CN.md b/README_ZH.md → README_CN.md
@@ -35,6 +35,7 @@ const App = () => {
     <div id="app">
       <ReactJsonView
         source={data}
+        darkMode={false}
         rootLabel="Response data"
         keyCount={200}
         defaultExpand={false}
@@ -59,6 +60,7 @@ ReactDOM.render(
 ```tsx
 <ReactJsonView
   source={data}
+  darkMode={false}
   rootLabel=""
   defaultExpand={false}
   keyCount={200}
@@ -69,6 +71,7 @@ ReactDOM.render(
 | 配置项           | 类型               | 默认值        | 释义                    |
 | --------------- | ----------------- | ------------- | ---------------------- |
 | `source`        | `string`          | 无默认值       | 可序列化的数据。             |
+| `darkMode` | `boolean` | `false` | 是否启用暗色模式 |
 | `rootLabel`     | `React.ReactNode` | `""`          | 根节点的标题名称          |
 | `defaultExpand` | `boolean / number` | `false`       | 是否展开面板。传入整数时是指定展开的层级。 |
 | `keyCount`      | `number / "all"`  | `200`         | `ReactJsonView` 支持延迟加载更多属性。 该参数表示一次显示多少个属性，您可以传递 `"all"` 以显示所有属性。 |

diff --git a/examples/App.tsx b/examples/App.tsx
@@ -2,16 +2,27 @@ import { data } from './assets/data';
 import '../dist/style.css';
 import './index.less';
 import { SourceRender } from './components/SourceRender';
+import { useEffect, useState } from 'react';
 
 const App = () => {
+  const [mode, setMode] = useState(localStorage.themeMode);
+  useEffect(() => {
+    if (mode === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.themeMode = mode;
+  }, [mode]);
+
   return (
     <div id="app" className="min-w-[768px]">
       <div className="w-11/12 mx-auto">
         <div className="mt-12 px-4 overflow-hidden border-0 border-l-4 border-solid border-purple-500 text-lg font-bold">
           <code>
             <p>
               <span className="inline-block px-2 relative">
-                <span className="relative text-white z-10">
+                <span className="relative text-slate-100 z-10">
                   &lt;ReactJsonView /&gt;
                 </span>
                 <span
@@ -25,7 +36,10 @@ const App = () => {
             </p>
             <p>
               You can open the repo{' '}
-              <a href="https://github.com/HuolalaTech/react-json-view">
+              <a
+                href="https://github.com/HuolalaTech/react-json-view"
+                className="text-purple-500"
+              >
                 @huolala-tech/react-json-view
               </a>{' '}
               to find how to get it and ⭐️.
@@ -34,13 +48,48 @@ const App = () => {
           </code>
         </div>
 
+        {/* Toggle Mode */}
+        <div className="flex justify-end items-center space-x-4">
+          <div>
+            <label htmlFor="light">Light</label>
+            <input
+              type="radio"
+              name="themeMode"
+              id="light"
+              value="light"
+              checked={mode === 'light'}
+              onChange={(e) => {
+                if (e.target.checked) {
+                  setMode('light');
+                }
+              }}
+            />
+          </div>
+          <div>
+            <label htmlFor="dark">Dark</label>
+            <input
+              type="radio"
+              name="themeMode"
+              id="dark"
+              value="dark"
+              checked={mode === 'dark'}
+              onChange={(e) => {
+                if (e.target.checked) {
+                  setMode('dark');
+                }
+              }}
+            />
+          </div>
+        </div>
+
         {data.map((item) => {
           const { originSource, renderSource } = item.getData();
           return (
-            <div className="mt-12 last:mb-12">
+            <div className="mt-12 last:mb-12" key={item.type}>
               <h3>{item.type}</h3>
               <SourceRender
                 {...{
+                  darkMode: mode === 'dark',
                   originSource,
                   renderSource,
                   rjvProps: item.props,