# 主题

## 使用和切换主题

`simple-mind-map`内置了很多主题，可以通过如下方式获取到所有的内置主题列表：

```js
import { themeList } from 'simple-mind-map/src/constants/constant'
// import { themeList } from 'simple-mind-map/src/utils/constant' v0.6.0以下版本使用该路径
```

> v0.6.8+，主题列表增加了代表是否是暗黑主题的字段dark，你可以根据这个字段来将界面切换为暗黑模式。

可以在实例化`simple-mind-map`时指定使用的主题：

```js
new MindMap({
    theme: 'minions'
})
```

如果想动态切换主题也很简单：

```js
mindMap.setTheme('classic')
```

如果要获取当前使用的主题名称可以使用：

```js
const theme = mindMap.getTheme()
```

## 定义新主题

除了可以使用内置的主题外，你也可以自定义新主题：

```js
import MindMap from 'simple-mind-map'

// 注册新主题
MindMap.defineTheme('主题名称', {
    // 主题配置
})

// 1.实例化时使用新注册的主题
const mindMap = new MindMap({
    theme: '主题名称'
})

// 2.动态切换新主题
mindMap.setTheme('主题名称')
```

最好在实例化之前进行注册，这样在实例化时可以直接使用新注册的主题。

一个主题其实就是一个普通的对象，完整配置可以参考[默认主题](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js)，`defineTheme`方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考[blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js)。

```js
MindMap.defineTheme('redSpirit', {
    // 背景颜色
    backgroundColor: 'rgb(255, 238, 228)',
    // 连线的颜色
    lineColor: 'rgb(230, 138, 131)',
    lineWidth: 3,
    // 概要连线的粗细
    generalizationLineWidth: 3,
    // 概要连线的颜色
    generalizationLineColor: 'rgb(222, 101, 85)',
    // 根节点样式
    root: {
      fillColor: 'rgb(207, 44, 44)',
      color: 'rgb(255, 233, 157)',
      borderColor: '',
      borderWidth: 0,
      fontSize: 24,
      active: {
        borderColor: 'rgb(255, 233, 157)',
        borderWidth: 3,
      }
    },
    // 二级节点样式
    second: {
      fillColor: 'rgb(255, 255, 255)',
      color: 'rgb(211, 58, 21)',
      borderColor: 'rgb(222, 101, 85)',
      borderWidth: 2,
      fontSize: 18,
      active: {
        borderColor: 'rgb(255, 233, 157)',
      }
    },
    // 三级及以下节点样式
    node: {
      fontSize: 14,
      color: 'rgb(144, 71, 43)',
      active: {
        borderColor: 'rgb(255, 233, 157)'
      }
    },
    // 概要节点样式
    generalization: {
      fontSize: 14,
      fillColor: 'rgb(255, 247, 211)',
      borderColor: 'rgb(255, 202, 162)',
      borderWidth: 2,
      color: 'rgb(187, 101, 69)',
      active: {
        borderColor: 'rgb(222, 101, 85)'
      }
    }
})
```

## 完整示例

<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/# " />