feat: add basic darkmode support

Author: Dan0xE

example/App.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, provide, onMounted } from 'vue';
 import Basic from './Basic.vue';
 import VirtualList from './VirtualList.vue';
 import SelectControl from './SelectControl.vue';
@@ -34,20 +34,67 @@ const list = [
   // },
 ];
 
+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>
+);
+
+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>
+);
+
 export default defineComponent({
   setup() {
     const state = reactive({
       activeKey: list[0].key,
       opened: [list[0].key],
+      isDarkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
     });
 
+    provide('darkModeState', state);
+
     const onActiveChange = (key: string) => {
       state.activeKey = key;
       if (!state.opened.includes(key)) {
         state.opened.push(key);
       }
     };
 
+    onMounted(() => {
+      document.body.classList.toggle('dark-mode', state.isDarkMode);
+    });
+
     return {
       state,
       onActiveChange,
@@ -57,8 +104,13 @@ export default defineComponent({
   render() {
     const { state, onActiveChange } = this;
 
+    const toggleDarkMode = () => {
+      state.isDarkMode = !state.isDarkMode;
+      document.body.classList.toggle('dark-mode', state.isDarkMode);
+    };
+
     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 +119,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}>
+              {state.isDarkMode ? <SunIcon /> : <MoonIcon />}
+            </div>
           </div>
 
           <div class="tabs-content">

example/Basic.vue

@@ -46,6 +46,10 @@
           <label>setPathCollapsible</label>
           <input v-model="state.setPathCollapsible" type="checkbox" />
         </div>
+        <div>
+          <label>darkMode</label>
+          <input v-model="state.darkMode" type="checkbox" />
+        </div>
       </div>
 
       <h3>Slots:</h3>
@@ -63,6 +67,7 @@
     <div class="block">
       <h3>vue-json-pretty:</h3>
       <vue-json-pretty
+        :darkMode="state.darkMode"
         :data="state.data"
         :deep="state.deep"
         :path-collapsible="state.setPathCollapsible ? pathCollapsible : undefined"

example/Editable.vue

@@ -34,11 +34,16 @@
           </select>
         </div>
       </div>
+      <div>
+        <label>darkMode</label>
+        <input v-model="state.darkMode" type="checkbox" />
+      </div>
     </div>
     <div class="block">
       <h3>vue-json-pretty:</h3>
       <vue-json-pretty
         v-model:data="state.data"
+        :darkMode="state.darkMode"
         :deep="state.deep"
         :show-double-quotes="true"
         :show-line="state.showLine"

example/SelectControl.vue

@@ -57,6 +57,10 @@
             <option :value="4">4</option>
           </select>
         </div>
+        <div>
+          <label>darkMode</label>
+          <input v-model="state.darkMode" type="checkbox" />
+        </div>
       </div>
       <h3>v-model:selectedValue:</h3>
       <div>{{ state.selectedValue }}</div>
@@ -68,6 +72,7 @@
       <vue-json-pretty
         v-if="state.renderOK"
         v-model:selectedValue="state.selectedValue"
+        :darkMode="state.darkMode"
         :data="state.data"
         :root-path="state.rootPath"
         :deep="state.deep"

example/VirtualList.vue

@@ -34,10 +34,15 @@
           </select>
         </div>
       </div>
+      <div>
+        <label>darkMode</label>
+        <input v-model="state.darkMode" type="checkbox" />
+      </div>
     </div>
     <div class="block">
       <h3>vue-json-pretty(10000+ items):</h3>
       <vue-json-pretty
+        :darkMode="state.darkMode"
         :collapsed-node-length="state.collapsedNodeLength"
         :virtual="true"
         :item-height="+state.itemHeight"

example/styles.less

@@ -1,4 +1,7 @@
 @primary-color: #1890ff;
+@dark-background-color: darken(#333, 5%);
+@dark-text-color: #fff;
+@dark-border-color: #555;
 
 * {
   box-sizing: border-box;
@@ -7,37 +10,59 @@
 html,
 body {
   margin: 0;
+  transition: background-color 0.3s, color 0.3s;
 }
 
 body {
   font-size: 14px;
   background-color: #f9f9f9;
+
+  &.dark-mode {
+    background-color: @dark-background-color;
+    color: @dark-text-color;
+  }
 }
 
 .tabs-header {
   display: flex;
+  justify-content: space-between;
   margin-bottom: 20px;
   border-bottom: 1px solid #ccc;
 }
 
-.tabs-header-item {
-  position: relative;
-  margin-right: 20px;
-  padding: 8px 0;
-  cursor: pointer;
-  transition: color 0.3s;
-
-  &:hover,
-  &.is-active {
-    color: @primary-color;
-
-    &:after {
-      border-bottom: 2px solid @primary-color;
-      content: '';
-      width: 100%;
-      position: absolute;
-      left: 0;
-      bottom: -1px;
+.tabs-items-container {
+  display: flex;
+
+  .tabs-header-item {
+    position: relative;
+    margin-right: 20px;
+    padding: 8px 0;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover,
+    &.is-active {
+      color: @primary-color;
+
+      &:after {
+        border-bottom: 2px solid @primary-color;
+        content: '';
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: -1px;
+      }
+    }
+    body.dark-mode & {
+      color: @dark-text-color;
+      &:hover,
+      &.is-active {
+        color: lighten(@primary-color, 20%);
+
+        &:after {
+          border-bottom: 2px solid lighten(@primary-color, 20%);
+        }
+      }
     }
   }
 }

src/components/Tree/index.tsx

@@ -70,6 +70,10 @@ export default defineComponent({
     onSelectedChange: {
       type: Function as PropType<(newVal: string | string[], oldVal: string | string[]) => void>,
     },
+    darkMode: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   slots: ['renderNodeKey', 'renderNodeValue'],
@@ -281,6 +285,7 @@ export default defineComponent({
             key={item.id}
             node={item}
             collapsed={!!state.hiddenPaths[item.path]}
+            darkMode={props.darkMode}
             showDoubleQuotes={props.showDoubleQuotes}
             showLength={props.showLength}
             checked={selectedPaths.value.includes(item.path)}
@@ -316,6 +321,7 @@ export default defineComponent({
           class={{
             'vjs-tree': true,
             'is-virtual': props.virtual,
+            'dark-mode': props.darkMode,
           }}
           onScroll={props.virtual ? handleTreeScroll : undefined}
           style={

src/components/TreeNode/index.tsx

@@ -64,6 +64,10 @@ export const treeNodePropsPass = {
     type: Boolean,
     default: false,
   },
+  darkMode: {
+    type: Boolean,
+    default: false,
+  },
   showKeyValueSpace: {
     type: Boolean,
     default: true,
@@ -213,6 +217,7 @@ export default defineComponent({
             'has-selector': props.showSelectController,
             'has-carets': props.showIcon,
             'is-highlight': props.highlightSelectedNode && props.checked,
+            'dark-mode': props.darkMode,
           }}
           onClick={handleNodeClick}
           style={props.style}

src/components/TreeNode/styles.less

@@ -35,6 +35,13 @@
       border-left: 1px dashed @border-color;
     }
   }
+
+  &.dark-mode {
+    &.is-highlight,
+    &:hover {
+      background-color: @highlight-bg-color-dark;
+    }
+  }
 }
 
 .@{css-prefix}-node-index {

src/themes.less

@@ -6,7 +6,7 @@
 @color-info: #1d8ce0;
 @color-error: #ff4949;
 @color-success: #13ce66;
-@color-nil: #D55FDE;
+@color-nil: #d55fde;
 
 /* field values color */
 @color-string: @color-success;
@@ -17,6 +17,7 @@
 
 /* highlight */
 @highlight-bg-color: #e6f7ff;
+@highlight-bg-color-dark: #2e4558;
 
 /* comment */
 @comment-color: #bfcbd9;