fix: dont affect textbox by localDarkMode state

Author: Dan0xE

example/Basic.vue

@@ -2,7 +2,7 @@
   <div class="example-box">
     <div class="block">
       <h3>JSON:</h3>
-      <textarea :class="{ 'dark-textarea': localDarkMode }" v-model="state.val"></textarea>
+      <textarea :class="{ 'dark-textarea': globalDarkModeState }" v-model="state.val"></textarea>
 
       <h3>Options:</h3>
       <div class="options">
@@ -153,7 +153,7 @@ export default defineComponent({
       showKeyValueSpace: true,
     });
 
-    const { localDarkMode, toggleLocalDarkMode } = useDarkMode();
+    const { localDarkMode, toggleLocalDarkMode, globalDarkModeState } = useDarkMode();
 
     const pathCollapsible = node => {
       return node.key === 'members';
@@ -175,6 +175,7 @@ export default defineComponent({
       pathCollapsible,
       localDarkMode,
       toggleLocalDarkMode,
+      globalDarkModeState,
     };
   },
 });

example/Editable.vue

@@ -2,7 +2,7 @@
   <div class="example-box">
     <div class="block">
       <h3>JSON:</h3>
-      <textarea :class="{ 'dark-textarea': localDarkMode }" v-model="state.val"></textarea>
+      <textarea :class="{ 'dark-textarea': globalDarkModeState }" v-model="state.val"></textarea>
 
       <h3>Options:</h3>
       <div class="options">
@@ -104,7 +104,7 @@ export default defineComponent({
       deep: 3,
     });
 
-    const { localDarkMode, toggleLocalDarkMode } = useDarkMode();
+    const { localDarkMode, toggleLocalDarkMode, globalDarkModeState } = useDarkMode();
 
     watch(
       () => state.val,
@@ -132,6 +132,7 @@ export default defineComponent({
       state,
       localDarkMode,
       toggleLocalDarkMode,
+      globalDarkModeState,
     };
   },
 });

example/SelectControl.vue

@@ -2,7 +2,7 @@
   <div class="example-box">
     <div class="block">
       <h3>JSON:</h3>
-      <textarea :class="{ 'dark-textarea': localDarkMode }" v-model="state.val"></textarea>
+      <textarea :class="{ 'dark-textarea': globalDarkModeState }" v-model="state.val"></textarea>
 
       <h3>Options:</h3>
       <div class="options">
@@ -154,7 +154,7 @@ export default defineComponent({
       showIcon: false,
     });
 
-    const { localDarkMode, toggleLocalDarkMode } = useDarkMode();
+    const { localDarkMode, toggleLocalDarkMode, globalDarkModeState } = useDarkMode();
 
     const handleNodeClick = node => {
       state.node = node;
@@ -196,6 +196,7 @@ export default defineComponent({
       handleAll,
       localDarkMode,
       toggleLocalDarkMode,
+      globalDarkModeState,
     };
   },
 });

example/VirtualList.vue

@@ -2,7 +2,7 @@
   <div class="example-box">
     <div class="block">
       <h3>JSON:</h3>
-      <textarea :class="{ 'dark-textarea': localDarkMode }" v-model="state.val"></textarea>
+      <textarea :class="{ 'dark-textarea': globalDarkModeState }" v-model="state.val"></textarea>
 
       <h3>Options:</h3>
       <div class="options">
@@ -92,7 +92,7 @@ export default defineComponent({
       itemHeight: 20,
     });
 
-    const { localDarkMode, toggleLocalDarkMode } = useDarkMode();
+    const { localDarkMode, toggleLocalDarkMode, globalDarkModeState } = useDarkMode();
 
     watch(
       () => state.val,
@@ -109,6 +109,7 @@ export default defineComponent({
       state,
       localDarkMode,
       toggleLocalDarkMode,
+      globalDarkModeState,
     };
   },
 });

example/useDarkMode.ts

@@ -2,18 +2,20 @@ import { inject, ref, watch } from 'vue';
 
 export function useDarkMode() {
   const darkModeState = inject('darkModeState');
+  const globalDarkModeState = ref(darkModeState.isDarkMode);
   const localDarkMode = ref(darkModeState.isDarkMode);
 
   watch(
     () => darkModeState.isDarkMode,
     newVal => {
       localDarkMode.value = newVal;
+      globalDarkModeState.value = newVal;
     },
   );
 
   const toggleLocalDarkMode = () => {
     darkModeState.isDarkMode = !darkModeState.isDarkMode;
   };
 
-  return { localDarkMode, toggleLocalDarkMode };
+  return { localDarkMode, toggleLocalDarkMode, globalDarkModeState };
 }