Demo：修改主题和暗色的关联逻辑

web/src/pages/Edit/Index.vue

@@ -30,7 +30,7 @@ export default {
   computed: {
     ...mapState({
       isZenMode: state => state.localConfig.isZenMode,
-      isDark: state => state.isDark,
+      isDark: state => state.localConfig.isDark,
       activeSidebar: state => state.activeSidebar
     })
   },

web/src/pages/Edit/components/BaseStyle.vue

@@ -1004,7 +1004,11 @@ export default {
     }
   },
   computed: {
-    ...mapState(['activeSidebar', 'localConfig', 'isDark']),
+    ...mapState({
+      activeSidebar: state => state.activeSidebar,
+      localConfig: state => state.localConfig,
+      isDark: state => state.localConfig.isDark
+    }),
     lineStyleList() {
       return lineStyleList[this.$i18n.locale] || lineStyleList.zh
     },

web/src/pages/Edit/components/Color.vue

@@ -45,7 +45,9 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark']),
+    ...mapState({
+      isDark: state => state.localConfig.isDark
+    })
   },
   watch: {
     color() {

web/src/pages/Edit/components/Contextmenu.vue

@@ -167,7 +167,7 @@ export default {
   computed: {
     ...mapState({
       isZenMode: state => state.localConfig.isZenMode,
-      isDark: state => state.isDark
+      isDark: state => state.localConfig.isDark
     }),
     expandList() {
       return [

web/src/pages/Edit/components/Count.vue

@@ -36,7 +36,9 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark']),
+    ...mapState({
+      isDark: state => state.localConfig.isDark
+    }),
   },
   created() {
     this.$bus.$on('data_change', this.onDataChange)

web/src/pages/Edit/components/Export.vue

@@ -113,7 +113,7 @@ export default {
   computed: {
     ...mapState({
       openNodeRichText: state => state.localConfig.openNodeRichText,
-      isDark: state => state.isDark
+      isDark: state => state.localConfig.isDark
     }),
 
     downTypeList() {

web/src/pages/Edit/components/FormulaSidebar.vue

@@ -53,7 +53,11 @@ export default {
     }
   },
   computed: {
-    ...mapState(['activeSidebar', 'isDark', 'localConfig'])
+    ...mapState({
+      activeSidebar: state => state.activeSidebar, 
+      isDark: state => state.localConfig.isDark, 
+      localConfig: state => state.localConfig
+    })
   },
   watch: {
     activeSidebar(val) {

web/src/pages/Edit/components/Navigator.vue

@@ -54,7 +54,9 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark'])
+    ...mapState({
+      isDark: state => state.localConfig.isDark
+    })
   },
   mounted() {
     this.setSize()

web/src/pages/Edit/components/NavigatorToolbar.vue

@@ -132,13 +132,16 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark', 'isReadonly'])
+    ...mapState({
+      isReadonly: state => state.isReadonly,
+      isDark: state => state.localConfig.isDark
+    })
   },
   created() {
     this.lang = getLang()
   },
   methods: {
-    ...mapMutations(['setIsDark', 'setIsReadonly']),
+    ...mapMutations(['setLocalConfig', 'setIsReadonly']),
 
     readonlyChange() {
       this.setIsReadonly(!this.isReadonly)
@@ -161,7 +164,9 @@ export default {
     },
 
     toggleDark() {
-      this.setIsDark(!this.isDark)
+      this.setLocalConfig({
+        isDark: !this.isDark
+      })
     },
 
     handleCommand(command) {

web/src/pages/Edit/components/NodeIconSidebar.vue

@@ -78,7 +78,10 @@ export default {
     }
   },
   computed: {
-    ...mapState(['activeSidebar', 'isDark'])
+    ...mapState({
+      activeSidebar: state => state.activeSidebar,
+      isDark: state => state.localConfig.isDark
+    })
   },
   watch: {
     activeSidebar(val) {

web/src/pages/Edit/components/Outline.vue

@@ -70,7 +70,10 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark', 'isReadonly'])
+    ...mapState({
+      isReadonly: state => state.isReadonly,
+      isDark: state => state.localConfig.isDark
+    })
   },
   created() {
     window.addEventListener('keydown', this.onKeyDown)

web/src/pages/Edit/components/OutlineEdit.vue

@@ -77,7 +77,11 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isOutlineEdit', 'isDark', 'isReadonly'])
+    ...mapState({
+      isReadonly: state => state.isReadonly,
+      isDark: state => state.localConfig.isDark,
+      isOutlineEdit: state => state.isOutlineEdit
+    })
   },
   watch: {
     isOutlineEdit(val) {

web/src/pages/Edit/components/OutlineSidebar.vue

@@ -33,7 +33,11 @@ export default {
     }
   },
   computed: {
-    ...mapState(['activeSidebar', 'isOutlineEdit', 'isDark'])
+    ...mapState({
+      isDark: state => state.localConfig.isDark,
+      isOutlineEdit: state => state.isOutlineEdit,
+      activeSidebar: state => state.activeSidebar
+    })
   },
   watch: {
     activeSidebar(val) {

web/src/pages/Edit/components/RichTextToolbar.vue

@@ -144,7 +144,9 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark']),
+    ...mapState({
+      isDark: state => state.localConfig.isDark
+    }),
 
     fontFamilyList() {
       return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh

web/src/pages/Edit/components/Scrollbar.vue

@@ -47,7 +47,9 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark'])
+    ...mapState({
+      isDark: state => state.localConfig.isDark
+    })
   },
   mounted() {
     this.setScrollBarWrapSize()

web/src/pages/Edit/components/Search.vue

@@ -78,7 +78,10 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark', 'isReadonly'])
+    ...mapState({
+      isReadonly: state => state.isReadonly,
+      isDark: state => state.localConfig.isDark
+    })
   },
   watch: {
     searchText() {

web/src/pages/Edit/components/ShortcutKey.vue

@@ -38,7 +38,10 @@ export default {
     return {}
   },
   computed: {
-    ...mapState(['activeSidebar', 'isDark']),
+    ...mapState({
+      isDark: state => state.localConfig.isDark,
+      activeSidebar: state => state.activeSidebar
+    }),
 
     shortcutKeyList() {
       return shortcutKeyList[this.$i18n.locale] || shortcutKeyList.zh

web/src/pages/Edit/components/Sidebar.vue

@@ -39,7 +39,9 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark'])
+    ...mapState({
+      isDark: state => state.localConfig.isDark
+    })
   },
   watch: {
     show(val, oldVal) {

web/src/pages/Edit/components/SidebarTrigger.vue

@@ -39,7 +39,10 @@ export default {
     }
   },
   computed: {
-    ...mapState(['activeSidebar', 'isDark']),
+    ...mapState({
+      isDark: state => state.localConfig.isDark,
+      activeSidebar: state => state.activeSidebar
+    }),
 
     triggerList() {
       return sidebarTriggerList[this.$i18n.locale] || sidebarTriggerList.zh

web/src/pages/Edit/components/Structure.vue

@@ -47,7 +47,10 @@ export default {
     }
   },
   computed: {
-    ...mapState(['activeSidebar', 'isDark'])
+    ...mapState({
+      isDark: state => state.localConfig.isDark,
+      activeSidebar: state => state.activeSidebar
+    })
   },
   watch: {
     activeSidebar(val) {

web/src/pages/Edit/components/Style.vue

@@ -507,7 +507,10 @@ export default {
     }
   },
   computed: {
-    ...mapState(['activeSidebar', 'isDark']),
+    ...mapState({
+      isDark: state => state.localConfig.isDark,
+      activeSidebar: state => state.activeSidebar
+    }),
 
     fontFamilyList() {
       return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh

web/src/pages/Edit/components/Theme.vue

@@ -58,7 +58,10 @@ export default {
     }
   },
   computed: {
-    ...mapState(['activeSidebar', 'isDark']),
+    ...mapState({
+      isDark: state => state.localConfig.isDark,
+      activeSidebar: state => state.activeSidebar
+    }),
 
     currentList() {
       return this.groupList.find(item => {
@@ -70,7 +73,6 @@ export default {
     activeSidebar(val) {
       if (val === 'theme') {
         this.theme = this.mindMap.getTheme()
-        this.handleDark()
         this.$refs.sidebar.show = true
       } else {
         this.$refs.sidebar.show = false
@@ -80,14 +82,13 @@ export default {
   created() {
     this.initGroup()
     this.theme = this.mindMap.getTheme()
-    this.handleDark()
     this.mindMap.on('view_theme_change', this.handleViewThemeChange)
   },
   beforeDestroy() {
     this.mindMap.off('view_theme_change', this.handleViewThemeChange)
   },
   methods: {
-    ...mapMutations(['setIsDark']),
+    ...mapMutations(['setLocalConfig']),
 
     handleViewThemeChange() {
       this.theme = this.mindMap.getTheme()
@@ -180,7 +181,9 @@ export default {
       let target = this.themeList.find(item => {
         return item.value === this.theme
       })
-      this.setIsDark(target.dark)
+      this.setLocalConfig({
+        isDark: target.dark
+      })
     }
   }
 }

web/src/pages/Edit/components/Toolbar.vue

@@ -116,7 +116,10 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isHandleLocalFile', 'isDark'])
+    ...mapState({
+      isDark: state => state.localConfig.isDark,
+      isHandleLocalFile: state => state.isHandleLocalFile
+    })
   },
   watch: {
     isHandleLocalFile(val) {

web/src/pages/Edit/components/ToolbarNodeBtnList.vue

@@ -188,7 +188,9 @@ export default {
     }
   },
   computed: {
-    ...mapState(['isDark']),
+    ...mapState({
+      isDark: state => state.localConfig.isDark
+    }),
     hasRoot() {
       return (
         this.activeNodes.findIndex(node => {

web/src/store.js

@@ -19,10 +19,11 @@ const store = new Vuex.Store({
       // 是否显示滚动条
       isShowScrollbar: false,
       // 是否开启手绘风格
-      isUseHandDrawnLikeStyle: false
+      isUseHandDrawnLikeStyle: false,
+      // 是否是暗黑模式
+      isDark: false, 
     },
     activeSidebar: '', // 当前显示的侧边栏
-    isDark: false, // 是否是暗黑模式
     isOutlineEdit: false, // 是否是大纲编辑模式
     isReadonly: false // 是否只读
   },
@@ -51,11 +52,6 @@ const store = new Vuex.Store({
       state.activeSidebar = data
     },
 
-    // 设置暗黑模式
-    setIsDark(state, data) {
-      state.isDark = data
-    },
-
     // 设置大纲编辑模式
     setIsOutlineEdit(state, data) {
       state.isOutlineEdit = data