Demo：支持根据主题自动切换为暗黑模式

simple-mind-map/src/constants/constant.js

@@ -27,130 +27,162 @@ export const themeList = [
   {
     name: '默认',
     value: 'default',
+    dark: false
   },
   {
     name: '暗色2',
     value: 'dark2',
+    dark: true
   },
   {
     name: '天清绿',
     value: 'skyGreen',
+    dark: false
   },
   {
     name: '脑图经典2',
     value: 'classic2',
+    dark: false
   },
   {
     name: '脑图经典3',
     value: 'classic3',
+    dark: false
   },
   {
     name: '经典绿',
     value: 'classicGreen',
+    dark: false
   },
   {
     name: '经典蓝',
     value: 'classicBlue',
+    dark: false
   },
   {
     name: '天空蓝',
     value: 'blueSky',
+    dark: false
   },
   {
     name: '脑残粉',
     value: 'brainImpairedPink',
+    dark: false
   },
   {
     name: '暗色',
     value: 'dark',
+    dark: true
   },
   {
     name: '泥土黄',
     value: 'earthYellow',
+    dark: false
   },
   {
     name: '清新绿',
     value: 'freshGreen',
+    dark: false
   },
   {
     name: '清新红',
     value: 'freshRed',
+    dark: false
   },
   {
     name: '浪漫紫',
     value: 'romanticPurple',
+    dark: false
   },
   {
     name: '粉红葡萄',
     value: 'pinkGrape',
+    dark: false
   },
   {
     name: '薄荷',
     value: 'mint',
+    dark: false
   },
   {
     name: '金色vip',
     value: 'gold',
+    dark: false
   },
   {
     name: '活力橙',
     value: 'vitalityOrange',
+    dark: false
   },
   {
     name: '绿叶',
     value: 'greenLeaf',
+    dark: false
   },
   {
     name: '脑图经典',
     value: 'classic',
+    dark: true
   },
   {
     name: '脑图经典4',
     value: 'classic4',
+    dark: false
   },
   {
     name: '小黄人',
     value: 'minions',
+    dark: false
   },
   {
     name: '简约黑',
     value: 'simpleBlack',
+    dark: true
   },
   {
     name: '课程绿',
     value: 'courseGreen',
+    dark: false
   },
   {
     name: '咖啡',
     value: 'coffee',
+    dark: false
   },
   {
     name: '红色精神',
     value: 'redSpirit',
+    dark: false
   },
   {
     name: '黑色幽默',
     value: 'blackHumour',
+    dark: true
   },
   {
     name: '深夜办公室',
     value: 'lateNightOffice',
+    dark: true
   },
   {
     name: '黑金',
     value: 'blackGold',
+    dark: true
   },
   {
     name: '牛油果',
     value: 'avocado',
+    dark: false
   },
   {
     name: '秋天',
     value: 'autumn',
+    dark: false
   },
   {
     name: '橙汁',
     value: 'orangeJuice',
+    dark: true
   }
 ]
 

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

@@ -7,7 +7,7 @@
     <Outline :mindMap="mindMap"></Outline>
     <Style v-if="!isZenMode"></Style>
     <BaseStyle :data="mindMapData" :mindMap="mindMap"></BaseStyle>
-    <Theme :mindMap="mindMap"></Theme>
+    <Theme v-if="mindMap" :mindMap="mindMap"></Theme>
     <Structure :mindMap="mindMap"></Structure>
     <ShortcutKey></ShortcutKey>
     <Contextmenu v-if="mindMap" :mindMap="mindMap"></Contextmenu>

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

@@ -21,7 +21,7 @@
 import Sidebar from './Sidebar'
 import { themeList } from 'simple-mind-map/src/constants/constant'
 import { storeConfig } from '@/api'
-import { mapState } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
 import { themeMap } from '@/config/constant.js'
 import customThemeList from '@/customThemes'
 
@@ -54,13 +54,20 @@ 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
       }
     }
   },
+  created () {
+    this.theme = this.mindMap.getTheme()
+    this.handleDark()
+  },
   methods: {
+    ...mapMutations(['setIsDark']),
+
     /**
      * @Author: 王林
      * @Date: 2021-06-24 23:04:38
@@ -68,6 +75,7 @@ export default {
      */
     useTheme(theme) {
       this.theme = theme.value
+      this.handleDark()
       this.mindMap.setTheme(theme.value)
       storeConfig({
         theme: {
@@ -75,6 +83,13 @@ export default {
           config: this.mindMap.getCustomThemeConfig()
         }
       })
+    },
+
+    handleDark() {
+      let target = themeList.find((item) => {
+        return item.value === this.theme
+      })
+      this.setIsDark(target.dark)
     }
   }
 }