feat: add darkmode to site and add theme prop

README.md

@@ -106,31 +106,32 @@ plugins: [
 
 ## Props
 
-| Property                  | Description                                                                     | Type                              | Default |
-|---------------------------|---------------------------------------------------------------------------------|-----------------------------------| ------- |
-| data(v-model)             | JSON data, support v-model when use editable                                    | JSON object                       | -       |
-| collapsedNodeLength       | Objects or arrays which length is greater than this threshold will be collapsed | number                            | -       |
-| deep                      | Paths greater than this depth will be collapsed                                 | number                            | -       |
-| showLength                | Show the length when collapsed                                                  | boolean                           | false   |
-| showLine                  | Show the line                                                                   | boolean                           | true    |
-| showLineNumber            | Show the line number                                                            | boolean                           | false   |
-| showIcon                  | Show the icon                                                                   | boolean                           | false   |
-| showDoubleQuotes          | Show doublequotes on key                                                        | boolean                           | true    |
-| virtual                   | Use virtual scroll                                                              | boolean                           | false   |
-| height                    | The height of list when using virtual                                           | number                            | 400     |
-| itemHeight                | The height of node when using virtual                                           | number                            | 20      |
-| selectedValue(v-model)    | Selected data path                                                              | string, array                     | -       |
-| rootPath                  | Root data path                                                                  | string                            | `root`  |
-| nodeSelectable            | Defines whether a node supports selection                                       | (node) => boolean                 | -       |
-| selectableType            | Support path select, default none                                               | `multiple` \| `single`            | -       |
-| showSelectController      | Show the select controller                                                      | boolean                           | false   |
-| selectOnClickNode         | Trigger select when click node                                                  | boolean                           | true    |
-| highlightSelectedNode     | Support highlighting selected nodes                                             | boolean                           | true    |
-| collapsedOnClickBrackets  | Support click brackets to collapse                                              | boolean                           | true    |
-| renderNodeKey             | render node key, or use slot #renderNodeKey                                     | ({ node, defaultKey }) => vNode   | -       |
-| renderNodeValue           | render node value, or use slot #renderNodeValue                                 | ({ node, defaultValue }) => vNode | -       |
-| editable                  | Support editable                                                                | boolean                           | false   |
-| editableTrigger           | Trigger                                                                         | `click` \| `dblclick`             | `click` |
+| Property                 | Description                                                                                                             | Type                              | Default |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------- |
+| data(v-model)            | JSON data, support v-model when use editable                                                                            | JSON object                       | -       |
+| collapsedNodeLength      | Objects or arrays which length is greater than this threshold will be collapsed                                         | number                            | -       |
+| deep                     | Paths greater than this depth will be collapsed                                                                         | number                            | -       |
+| showLength               | Show the length when collapsed                                                                                          | boolean                           | false   |
+| showLine                 | Show the line                                                                                                           | boolean                           | true    |
+| showLineNumber           | Show the line number                                                                                                    | boolean                           | false   |
+| showIcon                 | Show the icon                                                                                                           | boolean                           | false   |
+| showDoubleQuotes         | Show doublequotes on key                                                                                                | boolean                           | true    |
+| virtual                  | Use virtual scroll                                                                                                      | boolean                           | false   |
+| height                   | The height of list when using virtual                                                                                   | number                            | 400     |
+| itemHeight               | The height of node when using virtual                                                                                   | number                            | 20      |
+| selectedValue(v-model)   | Selected data path                                                                                                      | string, array                     | -       |
+| rootPath                 | Root data path                                                                                                          | string                            | `root`  |
+| nodeSelectable           | Defines whether a node supports selection                                                                               | (node) => boolean                 | -       |
+| selectableType           | Support path select, default none                                                                                       | `multiple` \| `single`            | -       |
+| showSelectController     | Show the select controller                                                                                              | boolean                           | false   |
+| selectOnClickNode        | Trigger select when click node                                                                                          | boolean                           | true    |
+| highlightSelectedNode    | Support highlighting selected nodes                                                                                     | boolean                           | true    |
+| collapsedOnClickBrackets | Support click brackets to collapse                                                                                      | boolean                           | true    |
+| renderNodeKey            | render node key, or use slot #renderNodeKey                                                                             | ({ node, defaultKey }) => vNode   | -       |
+| renderNodeValue          | render node value, or use slot #renderNodeValue                                                                         | ({ node, defaultValue }) => vNode | -       |
+| editable                 | Support editable                                                                                                        | boolean                           | false   |
+| editableTrigger          | Trigger                                                                                                                 | `click` \| `dblclick`             | `click` |
+| theme                    | Sets the theme of the component. Options are 'light' or 'dark', with dark mode enhancing visibility on dark backgrounds | `'light' \| 'dark'`               | `light` |
 
 ## Events
 
@@ -145,7 +146,7 @@ plugins: [
 
 | Slot Name       | Description       | Parameters             |
 | --------------- | ----------------- | ---------------------- |
-| renderNodeKey   | render node key   | { node, defaultKey }        |
+| renderNodeKey   | render node key   | { node, defaultKey }   |
 | renderNodeValue | render node value | { node, defaultValue } |
 
 ## Contributors

example/App.tsx

@@ -1,10 +1,11 @@
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, provide, onMounted, watch } from 'vue';
 import Basic from './Basic.vue';
 import VirtualList from './VirtualList.vue';
 import SelectControl from './SelectControl.vue';
 import Editable from './Editable.vue';
 // import Tsx from './Tsx';
 import './styles.less';
+import { MoonIcon, SunIcon } from './Icons';
 
 const list = [
   {
@@ -41,24 +42,48 @@ export default defineComponent({
       opened: [list[0].key],
     });
 
+    const globalDarkModeState = reactive({
+      isDarkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
+    });
+
+    provide('darkModeState', globalDarkModeState);
+
     const onActiveChange = (key: string) => {
       state.activeKey = key;
       if (!state.opened.includes(key)) {
         state.opened.push(key);
       }
     };
 
+    const toggleDarkMode = () => {
+      globalDarkModeState.isDarkMode = !globalDarkModeState.isDarkMode;
+    };
+
+    onMounted(() => {
+      document.body.classList.toggle('dark-mode', globalDarkModeState.isDarkMode);
+    });
+
+    watch(
+      () => globalDarkModeState.isDarkMode,
+      newVal => {
+        document.body.classList.toggle('dark-mode', newVal);
+      },
+      { immediate: true },
+    );
+
     return {
       state,
       onActiveChange,
+      toggleDarkMode,
+      globalDarkModeState,
     };
   },
 
   render() {
-    const { state, onActiveChange } = this;
+    const { state, onActiveChange, toggleDarkMode, globalDarkModeState } = this;
 
     return (
-      <div class="example">
+      <div class={`example ${state.isDarkMode ? 'dark-mode' : ''}`}>
         <h1>Vue Json Pretty</h1>
         <p>
           Welcome to the demo space of Vue Json Pretty, here we provide the following different
@@ -67,15 +92,20 @@ export default defineComponent({
 
         <div class="tabs">
           <div class="tabs-header">
-            {list.map(({ title, key }) => (
-              <div
-                key={key}
-                class={`tabs-header-item ${key === state.activeKey ? 'is-active' : ''}`}
-                onClick={() => onActiveChange(key)}
-              >
-                {title}
-              </div>
-            ))}
+            <div class="tabs-items-container">
+              {list.map(({ title, key }) => (
+                <div
+                  key={key}
+                  class={`tabs-header-item ${key === state.activeKey ? 'is-active' : ''}`}
+                  onClick={() => onActiveChange(key)}
+                >
+                  {title}
+                </div>
+              ))}
+            </div>
+            <div class="dark-mode-toggle" onClick={toggleDarkMode}>
+              {globalDarkModeState.isDarkMode ? <SunIcon /> : <MoonIcon />}
+            </div>
           </div>
 
           <div class="tabs-content">

example/Basic.vue

@@ -2,7 +2,7 @@
   <div class="example-box">
     <div class="block">
       <h3>JSON:</h3>
-      <textarea v-model="state.val" />
+      <textarea :class="{ 'dark-textarea': globalDarkModeState }" v-model="state.val"></textarea>
 
       <h3>Options:</h3>
       <div class="options">
@@ -46,6 +46,13 @@
           <label>setPathCollapsible</label>
           <input v-model="state.setPathCollapsible" type="checkbox" />
         </div>
+        <div>
+          <label>theme</label>
+          <select v-model="localDarkMode">
+            <option value="light">light</option>
+            <option value="dark">dark</option>
+          </select>
+        </div>
       </div>
 
       <h3>Slots:</h3>
@@ -63,6 +70,7 @@
     <div class="block">
       <h3>vue-json-pretty:</h3>
       <vue-json-pretty
+        :theme="localDarkMode"
         :data="state.data"
         :deep="state.deep"
         :path-collapsible="state.setPathCollapsible ? pathCollapsible : undefined"
@@ -95,6 +103,7 @@
 
 <script>
 import { defineComponent, reactive, watch } from 'vue';
+import { useDarkMode } from './useDarkMode';
 import VueJsonPretty from 'src';
 
 const defaultData = {
@@ -147,6 +156,8 @@ export default defineComponent({
       showKeyValueSpace: true,
     });
 
+    const { localDarkMode, toggleLocalDarkMode, globalDarkModeState } = useDarkMode();
+
     const pathCollapsible = node => {
       return node.key === 'members';
     };
@@ -165,6 +176,9 @@ export default defineComponent({
     return {
       state,
       pathCollapsible,
+      localDarkMode,
+      toggleLocalDarkMode,
+      globalDarkModeState,
     };
   },
 });

example/Editable.vue

@@ -2,7 +2,7 @@
   <div class="example-box">
     <div class="block">
       <h3>JSON:</h3>
-      <textarea v-model="state.val" />
+      <textarea :class="{ 'dark-textarea': globalDarkModeState }" v-model="state.val"></textarea>
 
       <h3>Options:</h3>
       <div class="options">
@@ -34,11 +34,19 @@
           </select>
         </div>
       </div>
+      <div>
+        <label>theme</label>
+        <select v-model="localDarkMode">
+          <option value="light">light</option>
+          <option value="dark">dark</option>
+        </select>
+      </div>
     </div>
     <div class="block">
       <h3>vue-json-pretty:</h3>
       <vue-json-pretty
         v-model:data="state.data"
+        :theme="localDarkMode"
         :deep="state.deep"
         :show-double-quotes="true"
         :show-line="state.showLine"
@@ -53,6 +61,7 @@
 <script>
 import { defineComponent, reactive, watch } from 'vue';
 import VueJsonPretty from 'src';
+import { useDarkMode } from './useDarkMode';
 
 const defaultData = {
   status: 200,
@@ -98,6 +107,8 @@ export default defineComponent({
       deep: 3,
     });
 
+    const { localDarkMode, toggleLocalDarkMode, globalDarkModeState } = useDarkMode();
+
     watch(
       () => state.val,
       newVal => {
@@ -122,7 +133,11 @@ export default defineComponent({
 
     return {
       state,
+      localDarkMode,
+      toggleLocalDarkMode,
+      globalDarkModeState,
     };
   },
 });
 </script>
+./useDarkMode

example/Icons.tsx

@@ -0,0 +1,39 @@
+export const SunIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+  </svg>
+);
+
+export const MoonIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 12.79A9 9 0 0112.21 3C11.66 3 11.11 3.05 10.58 3.15A9 9 0 1021 12.79z"></path>
+  </svg>
+);

example/SelectControl.vue

@@ -2,7 +2,7 @@
   <div class="example-box">
     <div class="block">
       <h3>JSON:</h3>
-      <textarea v-model="state.val" />
+      <textarea :class="{ 'dark-textarea': globalDarkModeState }" v-model="state.val"></textarea>
 
       <h3>Options:</h3>
       <div class="options">
@@ -57,6 +57,13 @@
             <option :value="4">4</option>
           </select>
         </div>
+        <div>
+          <label>theme</label>
+          <select v-model="localDarkMode">
+            <option value="light">light</option>
+            <option value="dark">dark</option>
+          </select>
+        </div>
       </div>
       <h3>v-model:selectedValue:</h3>
       <div>{{ state.selectedValue }}</div>
@@ -68,6 +75,7 @@
       <vue-json-pretty
         v-if="state.renderOK"
         v-model:selectedValue="state.selectedValue"
+        :theme="localDarkMode"
         :data="state.data"
         :root-path="state.rootPath"
         :deep="state.deep"
@@ -94,6 +102,7 @@
 <script>
 import { defineComponent, reactive, watch, nextTick } from 'vue';
 import VueJsonPretty from 'src';
+import { useDarkMode } from './useDarkMode';
 
 const defaultData = {
   status: 200,
@@ -148,6 +157,8 @@ export default defineComponent({
       showIcon: false,
     });
 
+    const { localDarkMode, toggleLocalDarkMode, globalDarkModeState } = useDarkMode();
+
     const handleNodeClick = node => {
       state.node = node;
     };
@@ -186,6 +197,9 @@ export default defineComponent({
       state,
       handleNodeClick,
       handleAll,
+      localDarkMode,
+      toggleLocalDarkMode,
+      globalDarkModeState,
     };
   },
 });