# 主题 Theme

LogicFlow 提供了设置主题的方法,便于用户统一设置其内部所有元素的样式。
设置方式有两种:

  • 初始化LogicFlow时作为配置传入
  • 初始化后,调用LogicFlow的 setTheme 方法

主题配置参数见主题API

# 配置

new LogicFlow时作为将主题配置作为参数进行初始化。

// 方法1:new LogicFlow时作为配置传入
const config = {
  domId: 'app',
  width: 1000,
  height: 800,
  style: { // 设置默认主题样式
    rect: { // 矩形样式
      ...
    },
    circle: { // 圆形样式
      ...
    },
    nodeText: { // 节点文本样式
      ...
    },
    edgeText: { // 边文本样式
      ...
    },
    anchor: { // 锚点样式 
      ...
    }
    ...
  }
}
const lf = new LogicFlow(config);

# setTheme

调用LogicFlow的setTheme方法,lf.setTheme进行主题配置

// 方法2: 调用LogicFlow的setTheme方法 
lf.setTheme({ // 设置默认主题样式
  rect: { // 矩形样式
    ...
  },
  circle: { // 圆形样式
    ...
  },
  nodeText: { // 节点文本样式
    ...
  },
  edgeText: { // 边文本样式
    ...
  },
  anchor: { // 锚点样式 
    ...
  }
  ...
})