diff --git a/readme.md b/readme.md
index da198f4e..7071d07d 100644
--- a/readme.md
+++ b/readme.md
@@ -39,7 +39,7 @@ Features:
 - Bulk operations supported
 - Undo / Redo
 - Efficient shortcuts
-- Easily Styling your node with CSS
+- Easily Styling your node with CSS variables
 
 <details>
 <summary>Table of Contents</summary>
diff --git a/src/const.ts b/src/const.ts
index d5fbf2c1..5e9131b8 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -5,13 +5,11 @@ export const RIGHT = 1
 export const SIDE = 2
 export const DOWN = 3
 
-// TODO: move to options
-export const GAP = 30 // must sync with --gap in index.less
-
 export const THEME: Theme = {
   name: 'Latte',
   palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
   cssVar: {
+    '--gap': '30px',
     '--main-color': '#444446',
     '--main-bgcolor': '#ffffff',
     '--color': '#777777',
diff --git a/src/index.less b/src/index.less
index f109907d..62b3ce52 100644
--- a/src/index.less
+++ b/src/index.less
@@ -1,7 +1,6 @@
 .mind-elixir {
-  --gap: 30px; // child node horizontal gap, it will be updated at instance initialization
-
   // May overwrited by js
+  --gap: 30px; // child node horizontal gap
   --root-radius: 30px;
   --main-radius: 20px;
   --root-color: #ffffff;
diff --git a/src/index.ts b/src/index.ts
index d6da062a..c458e82a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,6 @@
 import './index.less'
 import './iconfont/iconfont.js'
-import { LEFT, RIGHT, SIDE, GAP, DARK_THEME, THEME } from './const'
+import { LEFT, RIGHT, SIDE, DARK_THEME, THEME } from './const'
 import { generateUUID } from './utils/index'
 import initMouseEvent from './mouse'
 import Bus from './utils/pubsub'
@@ -52,7 +52,6 @@ function MindElixir(
 
   ele.className += ' mind-elixir'
   ele.innerHTML = ''
-  ele.style.setProperty('--gap', GAP + 'px')
   this.mindElixirBox = ele as HTMLElement
   this.disposable = []
   this.before = before || {}
diff --git a/src/types/index.ts b/src/types/index.ts
index beac1a0f..fd135c8f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -18,6 +18,7 @@ export type Theme = {
   name: string
   palette: string[]
   cssVar: Partial<{
+    '--gap': string
     '--main-color': string
     '--main-bgcolor': string
     '--color': string
diff --git a/src/utils/generateBranch.ts b/src/utils/generateBranch.ts
index 4f481750..5720cf11 100644
--- a/src/utils/generateBranch.ts
+++ b/src/utils/generateBranch.ts
@@ -1,5 +1,4 @@
 import type { MindElixirInstance } from '..'
-import { GAP } from '../const'
 
 export type MainLineParams = {
   pT: number
@@ -50,6 +49,8 @@ export function main({ pT, pL, pW, pH, cT, cL, cW, cH, direction, containerHeigh
 }
 
 export function sub(this: MindElixirInstance, { pT, pL, pW, pH, cT, cL, cW, cH, direction, isFirst }: SubLineParams) {
+  const GAP = parseInt(this.mindElixirBox.style.getPropertyValue('--gap')) // cache?
+  // const GAP = 30
   let y1 = 0
   let end = 0
   if (isFirst) {
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index bd6cae74..0ea25375 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -1,16 +1,18 @@
-import { THEME } from '../const'
 import type { MindElixirInstance } from '../types/index'
 import type { Theme } from '../types/index'
 
 const changeTheme = function (this: MindElixirInstance, theme: Theme, shouldRefresh = true) {
-  theme.cssVar = { ...THEME.cssVar, ...theme.cssVar }
   this.theme = theme
   const cssVar = this.theme.cssVar
   const keys = Object.keys(cssVar)
+  this.mindElixirBox.style.cssText = ''
   for (let i = 0; i < keys.length; i++) {
     const key = keys[i] as keyof typeof cssVar
     this.mindElixirBox.style.setProperty(key, cssVar[key] as string)
   }
+  if (!theme.cssVar['--gap']) {
+    this.mindElixirBox.style.setProperty('--gap', '30px')
+  }
   shouldRefresh && this.refresh()
 }