diff --git a/packages/designer/src/project/project.less b/packages/designer/src/project/project.less
index 9d37c73fb..38f1f7442 100644
--- a/packages/designer/src/project/project.less
+++ b/packages/designer/src/project/project.less
@@ -14,7 +14,7 @@
   }
 
   .lc-simulator {
-    background: rgb(237, 239, 243);
+    background-color: var(--color-background, rgb(237, 239, 243));
   }
 
   .lc-simulator-shell {
diff --git a/packages/editor-core/src/widgets/tip/style.less b/packages/editor-core/src/widgets/tip/style.less
index 3c02e5313..21b60b9b5 100644
--- a/packages/editor-core/src/widgets/tip/style.less
+++ b/packages/editor-core/src/widgets/tip/style.less
@@ -147,7 +147,7 @@
   z-index: 2;
   position: fixed;
   box-sizing: border-box;
-  background: rgba(0, 0, 0, 0.7);
+  background: var(--color-layer-tooltip-background);
   max-height: 400px;
   color: var(--color-text-reverse, rgba(255, 255, 255, 0.8));
   left: 0;
diff --git a/packages/editor-skeleton/src/components/settings/style.less b/packages/editor-skeleton/src/components/settings/style.less
index 23b707afd..57a7c9357 100644
--- a/packages/editor-skeleton/src/components/settings/style.less
+++ b/packages/editor-skeleton/src/components/settings/style.less
@@ -143,7 +143,6 @@
   .lc-outline-pane {
     position: absolute;
     z-index: 100;
-    background-color: white;
     top: 0;
     bottom: 0;
     display: none;
diff --git a/packages/editor-skeleton/src/index.ts b/packages/editor-skeleton/src/index.ts
index d4851ff5b..a39b445d1 100644
--- a/packages/editor-skeleton/src/index.ts
+++ b/packages/editor-skeleton/src/index.ts
@@ -8,3 +8,4 @@ export * from './components/popup';
 export * from './context';
 export * from './register-defaults';
 export * from './widget';
+export * from './layouts';
diff --git a/packages/editor-skeleton/src/layouts/index.ts b/packages/editor-skeleton/src/layouts/index.ts
new file mode 100644
index 000000000..b3c7a1058
--- /dev/null
+++ b/packages/editor-skeleton/src/layouts/index.ts
@@ -0,0 +1,7 @@
+export { default as LeftArea } from './left-area';
+export { default as LeftFloatPane } from './left-float-pane';
+export { default as LeftFixedPane } from './left-fixed-pane';
+export { default as MainArea } from './main-area';
+export { default as BottomArea } from './bottom-area';
+export { default as TopArea } from './top-area';
+export { default as SubTopArea } from './sub-top-area';
\ No newline at end of file
diff --git a/packages/editor-skeleton/src/layouts/left-area.tsx b/packages/editor-skeleton/src/layouts/left-area.tsx
index cbeba5a5c..d30dcfa86 100644
--- a/packages/editor-skeleton/src/layouts/left-area.tsx
+++ b/packages/editor-skeleton/src/layouts/left-area.tsx
@@ -4,14 +4,14 @@ import { observer } from '@alilc/lowcode-editor-core';
 import { Area } from '../area';
 
 @observer
-export default class LeftArea extends Component<{ area: Area }> {
+export default class LeftArea extends Component<{ area: Area; className?: string }> {
   render() {
-    const { area } = this.props;
+    const { area, className = 'lc-left-area' } = this.props;
     if (area.isEmpty()) {
       return null;
     }
     return (
-      <div className={classNames('lc-left-area', {
+      <div className={classNames(className, {
         'lc-area-visible': area.visible,
       })}
       >
@@ -21,7 +21,6 @@ export default class LeftArea extends Component<{ area: Area }> {
   }
 }
 
-
 @observer
 class Contents extends Component<{ area: Area }> {
   render() {
diff --git a/packages/workspace/src/layouts/sub-top-area.tsx b/packages/editor-skeleton/src/layouts/sub-top-area.tsx
similarity index 100%
rename from packages/workspace/src/layouts/sub-top-area.tsx
rename to packages/editor-skeleton/src/layouts/sub-top-area.tsx
diff --git a/packages/editor-skeleton/src/layouts/theme.less b/packages/editor-skeleton/src/layouts/theme.less
index b0da053db..53afb6932 100644
--- a/packages/editor-skeleton/src/layouts/theme.less
+++ b/packages/editor-skeleton/src/layouts/theme.less
@@ -16,6 +16,7 @@
   --color-icon-hover: @normal-alpha-3;
   --color-icon-active: @brand-color-1;
   --color-icon-reverse: @white-alpha-1;
+  --color-icon-pane: @dark-alpha-3;
 
   --color-line-normal: @normal-alpha-7;
   --color-line-darken: darken(@normal-alpha-7, 10%);
@@ -57,6 +58,7 @@
   --color-block-background-deep-dark: @normal-5;
   --color-layer-mask-background: @dark-alpha-7;
   --color-layer-tooltip-background: rgba(44,47,51,0.8);
+  --color-background: #edeff3;
 
   --pane-title-bg-color: rgba(31,56,88,.04);
 }
diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less
index fccdad4c2..0a034822f 100644
--- a/packages/editor-skeleton/src/layouts/workbench.less
+++ b/packages/editor-skeleton/src/layouts/workbench.less
@@ -38,7 +38,7 @@ body {
   font-family: var(--font-family);
   font-size: var(--font-size-text);
   color: var(--color-text);
-  background-color: #edeff3;
+  background-color: var(--color-background);
 }
 
 * {
@@ -49,13 +49,10 @@ body {
   width: 100%;
   height: 100%;
   position: relative;
-  background-color: #fff;
-  background-color: var(--color-pane-background);
   &.hidden {
     display: none;
   }
   .lc-panel-title {
-    // background-color: var(--pane-title-bg-color,rgba(31,56,88,.04));
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -71,7 +68,6 @@ body {
     height: 48px;
     font-size: 16px;
     padding: 0 15px;
-    // border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
     color: #0f1726;
     font-weight: bold;
   }
@@ -125,9 +121,6 @@ body {
   height: 100%;
   width: 100%;
   position: relative;
-  background-color: #fff;
-  background-color: var(--color-pane-background);
-  // overflow: auto;
   &.hidden {
     display: none;
   }
@@ -137,7 +130,7 @@ body {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #edeff3;
+  background-color: var(--color-background);
   position: absolute;
   left: 0;
   top: 0;
@@ -164,47 +157,58 @@ body {
 
     &.active {
       z-index: 999;
-      background: #edeff3;
+      background: var(--color-background);
     }
   }
 }
 
-.lc-workbench {
+.lc-workbench, .lc-workspace-workbench {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #edeff3;
+  background-color: var(--color-background);
 
   &.engine-main {
     height: 100%;
     display: flex;
     flex-direction: column;
-    background-color: #edeff3;
+    background-color: var(--color-background);
   }
-  .lc-top-area {
-    height: var(--top-area-height);
-    background-color: var(--color-pane-background);
+  .lc-top-area, .lc-sub-top-area {
     width: 100%;
     display: none;
     margin-bottom: 2px;
     padding: 8px 12px 8px 16px;
 
+    &.lc-top-area {
+      background-color: var(--color-top-area-background, var(--color-pane-background));
+      height: var(--top-area-height);
+    }
+
+    &.lc-sub-top-area {
+      background-color: var(--color-sub-top-area-background, var(--color-pane-background));
+      height: var(--sub-top-area-height, var(--top-area-height));
+      margin: var(--sub-top-area-margin, 0px 0px 2px 0px);
+      padding: var(--sub-top-area-padding, 8px 12px 8px 16px);
+    }
+
     &.lc-area-visible {
       display: flex;
     }
 
-    .lc-top-area-left {
+    .lc-top-area-left, .lc-sub-top-area-left {
       display: flex;
       align-items: center;
+      max-width: 100%;
     }
 
-    .lc-top-area-center {
+    .lc-top-area-center, .lc-sub-top-area-center {
       flex: 1;
       display: flex;
       justify-content: center;
       margin: 0 8px;
     }
-    .lc-top-area-right {
+    .lc-top-area-right, .lc-sub-top-area-right {
       display: flex;
       align-items: center;
       > * {
@@ -216,7 +220,7 @@ body {
       }
     }
   }
-  .lc-workbench-body {
+  .lc-workbench-body, .lc-workspace-workbench-body {
     flex: 1;
     display: flex;
     min-height: 0;
@@ -264,7 +268,7 @@ body {
       z-index: 2;
       .next-icon {
         line-height: 1;
-        color: rgba(0, 0, 0, 0.6);
+        color: var(--color-icon-pane);
       }
     }
 
@@ -277,7 +281,7 @@ body {
       z-index: 2;
       svg {
         vertical-align: middle;
-        color: rgba(0, 0, 0, 0.6);
+        color: var(--color-icon-pane);
       }
     }
 
@@ -288,7 +292,7 @@ body {
       width: var(--dock-pane-width);
       // min-width: var(--dock-fixed-pane-width);
       left: calc(var(--left-area-width) + 1px);
-      background-color: var(--color-pane-background);
+      background-color: var(--color-left-float-pane-background, var(--color-pane-background));
       box-shadow: 4px 6px 6px 0 rgba(31, 50, 88, 0.08);
       z-index: 820;
       display: none;
@@ -297,15 +301,20 @@ body {
         display: block;
       }
     }
-    .lc-left-area {
+    .lc-left-area, .lc-workspace-left-area {
       height: 100%;
       width: var(--left-area-width);
-      background-color: var(--color-pane-background);
       display: none;
       flex-shrink: 0;
       flex-direction: column;
       justify-content: space-between;
       overflow: hidden;
+      &.lc-left-area {
+        background-color: var(--color-left-area-background, var(--color-pane-background));
+      }
+      &.lc-workspace-left-area {
+        background-color: var(--color-workspace-left-area-background, var(--color-pane-background));
+      }
       &.lc-area-visible {
         display: flex;
       }
@@ -316,6 +325,8 @@ body {
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;
+        color: var(--color-text);
+
         .lc-title {
           flex-direction: column;
           width: calc(var(--left-area-width) - 2px);
@@ -325,6 +336,9 @@ body {
           justify-content: center;
           cursor: pointer;
 
+          &.has-tip {
+            cursor: pointer;
+          }
           &.actived {
             color: #0079f2;
           }
@@ -366,6 +380,9 @@ body {
     .lc-left-area.lc-area-visible ~ .lc-workbench-center {
       margin-left: 2px;
     }
+    .lc-workspace-left-area.lc-area-visible ~ .lc-workspace-workbench-center {
+      margin-left: 2px;
+    }
     .lc-outline-pane {
       .lc-outline-tree .tree-node .tree-node-title {
         border-bottom: none;
@@ -390,7 +407,7 @@ body {
       }
       .lc-main-area {
         flex: 1;
-        background-color: #edeff3;
+        background-color: var(--color-background);
       }
       .lc-bottom-area {
         height: var(--bottom-area-height);
@@ -404,13 +421,14 @@ body {
     .lc-right-area {
       height: 100%;
       width: var(--right-area-width);
-      background-color: var(--color-pane-background);
+      background-color: var(--color-right-area-background, var(--color-pane-background));
       display: none;
       flex-shrink: 0;
       margin-left: 2px;
       position: relative;
       > .lc-panel {
         position: absolute;
+        background-color: var(--color-right-area-background, var(--color-pane-background, #fff));
         left: 0;
         top: 0;
       }
@@ -437,4 +455,68 @@ body {
       }
     }
   }
+  .engine-actionitem {
+    max-width: 100%;
+    color: var(--color-text);
+  }
+}
+
+.lc-workspace-workbench {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-background);
+  .lc-workspace-workbench-body {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+    position: relative;
+
+    .lc-workspace-workbench-center {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      z-index: 10;
+      position: relative;
+      .lc-toolbar {
+        display: flex;
+        height: var(--toolbar-height);
+        background-color: var(--color-pane-background);
+        padding: 8px 16px;
+        .lc-toolbar-center {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex: 1;
+        }
+      }
+      .lc-main-area {
+        flex: 1;
+      }
+      .lc-bottom-area {
+        height: var(--bottom-area-height);
+        background-color: var(--color-pane-background);
+        display: none;
+        &.lc-area-visible {
+          display: block;
+        }
+      }
+    }
+
+    .lc-workspace-workbench-center-content {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      flex-direction: column;
+      display: flex;
+      align-content: stretch;
+    }
+
+    .lc-workspace-workbench-window {
+      position: relative;
+      height: 100%;
+    }
+  }
 }
diff --git a/packages/plugin-outline-pane/src/views/style.less b/packages/plugin-outline-pane/src/views/style.less
index 254b639d6..406a5b5da 100644
--- a/packages/plugin-outline-pane/src/views/style.less
+++ b/packages/plugin-outline-pane/src/views/style.less
@@ -3,7 +3,6 @@
   width: 100%;
   position: relative;
   z-index: 200;
-  background-color: white;
 
   > .lc-outline-tree-container {
     top: 52px;
@@ -29,8 +28,8 @@
     }
 
     .lc-outline-filter-icon {
-      background: #ebecf0;
-      border: 1px solid #c4c6cf;
+      background: var(--color-block-background-shallow, #ebecf0);
+      border: 1px solid var(--color-field-border, #c4c6cf);
       display: flex;
       align-items: center;
       border-radius: 0 2px 2px 0;
@@ -245,7 +244,6 @@
     .tree-node-title {
       font-size: var(--font-size-text);
       cursor: pointer;
-      background: var(--color-pane-background);
       border-bottom: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
       display: flex;
       align-items: center;
diff --git a/packages/workspace/src/layouts/bottom-area.tsx b/packages/workspace/src/layouts/bottom-area.tsx
deleted file mode 100644
index 5fc4d815b..000000000
--- a/packages/workspace/src/layouts/bottom-area.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Component, Fragment } from 'react';
-import classNames from 'classnames';
-import { observer } from '@alilc/lowcode-editor-core';
-import { Area, Panel } from '@alilc/lowcode-editor-skeleton';
-
-@observer
-export default class BottomArea extends Component<{ area: Area<any, Panel> }> {
-  render() {
-    const { area } = this.props;
-    if (area.isEmpty()) {
-      return null;
-    }
-    return (
-      <div className={classNames('lc-bottom-area', {
-        'lc-area-visible': area.visible,
-      })}
-      >
-        <Contents area={area} />
-      </div>
-    );
-  }
-}
-
-@observer
-class Contents extends Component<{ area: Area<any, Panel> }> {
-  render() {
-    const { area } = this.props;
-    return (
-      <Fragment>
-        {area.container.items.map((item) => item.content)}
-      </Fragment>
-    );
-  }
-}
diff --git a/packages/workspace/src/layouts/left-area.tsx b/packages/workspace/src/layouts/left-area.tsx
deleted file mode 100644
index 3057386ed..000000000
--- a/packages/workspace/src/layouts/left-area.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Component, Fragment } from 'react';
-import classNames from 'classnames';
-import { observer } from '@alilc/lowcode-editor-core';
-import { Area } from '@alilc/lowcode-editor-skeleton';
-
-@observer
-export default class LeftArea extends Component<{ area: Area }> {
-  render() {
-    const { area } = this.props;
-    if (area.isEmpty()) {
-      return null;
-    }
-    return (
-      <div className={classNames('lc-left-area', {
-        'lc-area-visible': area.visible,
-      })}
-      >
-        <Contents area={area} />
-      </div>
-    );
-  }
-}
-
-
-@observer
-class Contents extends Component<{ area: Area }> {
-  render() {
-    const { area } = this.props;
-    const top: any[] = [];
-    const bottom: any[] = [];
-    area.container.items.slice().sort((a, b) => {
-      const index1 = a.config?.index || 0;
-      const index2 = b.config?.index || 0;
-      return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1);
-    }).forEach((item) => {
-      const content = <div key={`left-area-${item.name}`}>{item.content}</div>;
-      if (item.align === 'bottom') {
-        bottom.push(content);
-      } else {
-        top.push(content);
-      }
-    });
-    return (
-      <Fragment>
-        <div className="lc-left-area-top">{top}</div>
-        <div className="lc-left-area-bottom">{bottom}</div>
-      </Fragment>
-    );
-  }
-}
diff --git a/packages/workspace/src/layouts/left-fixed-pane.tsx b/packages/workspace/src/layouts/left-fixed-pane.tsx
deleted file mode 100644
index e0c01c510..000000000
--- a/packages/workspace/src/layouts/left-fixed-pane.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Component, Fragment } from 'react';
-import classNames from 'classnames';
-import { observer } from '@alilc/lowcode-editor-core';
-import { Area, Panel, PanelConfig } from '@alilc/lowcode-editor-skeleton';
-
-@observer
-export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, Panel> }> {
-  componentDidUpdate() {
-    // FIXME: dirty fix, need deep think
-    this.props.area.skeleton.editor.get('designer')?.touchOffsetObserver();
-  }
-
-
-  render() {
-    const { area } = this.props;
-    const width = area.current?.config.props?.width;
-    const style = width
-      ? {
-        width,
-      }
-      : undefined;
-
-    return (
-      <div
-        className={classNames('lc-left-fixed-pane', {
-          'lc-area-visible': area.visible,
-        })}
-        style={style}
-      >
-        <Contents area={area} />
-      </div>
-    );
-  }
-}
-
-@observer
-class Contents extends Component<{ area: Area<PanelConfig, Panel> }> {
-  render() {
-    const { area } = this.props;
-    return <Fragment>{area.container.items.map((panel) => panel.content)}</Fragment>;
-  }
-}
diff --git a/packages/workspace/src/layouts/left-float-pane.tsx b/packages/workspace/src/layouts/left-float-pane.tsx
deleted file mode 100644
index 3df3e197c..000000000
--- a/packages/workspace/src/layouts/left-float-pane.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { Component, Fragment } from 'react';
-import classNames from 'classnames';
-import { observer, Focusable } from '@alilc/lowcode-editor-core';
-import { Area, Panel } from '@alilc/lowcode-editor-skeleton';
-import { IPublicApiProject } from '@alilc/lowcode-types';
-
-@observer
-export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }> {
-  private dispose?: () => void;
-
-  private focusing?: Focusable;
-
-  private shell: HTMLElement | null = null;
-
-  componentDidMount() {
-    const { area } = this.props;
-    const triggerClose = (e: any) => {
-      if (!area.visible) return;
-      // 当 MouseEvent 的 target 为「插入占位符」时，不关闭当前 panel
-      if (e.originalEvent?.target?.classList.contains('insertion')) return;
-      // 假如当前操作 target 祖先节点中有属性 data-keep-visible-while-dragging="true" 代表该 target 所属 panel
-      // 不希望 target 在 panel 范围内拖拽时关闭 panel
-      const panelElem = e.originalEvent?.target.closest('div[data-keep-visible-while-dragging="true"]');
-      if (panelElem) return;
-      area.setVisible(false);
-    };
-    area.skeleton.editor.eventBus.on('designer.drag', triggerClose);
-
-    this.dispose = () => {
-      area.skeleton.editor.removeListener('designer.drag', triggerClose);
-    };
-
-    const project: IPublicApiProject | undefined = area.skeleton.editor.get('project');
-
-    this.focusing = area.skeleton.focusTracker.create({
-      range: (e) => {
-        const target = e.target as HTMLElement;
-        if (!target) {
-          return false;
-        }
-        if (this.shell?.contains(target)) {
-          return true;
-        }
-        // 点击了 iframe 内容，算失焦
-        if ((document.querySelector('.lc-simulator-content-frame') as HTMLIFrameElement)?.contentWindow?.document.documentElement.contains(target)) {
-          return false;
-        }
-        if (project?.simulatorHost?.contentWindow?.document.documentElement.contains(target)) {
-          return false;
-        }
-        // 点击设置区
-        if (document.querySelector('.lc-right-area')?.contains(target)) {
-          return false;
-        }
-        // 点击非编辑区域的popup/dialog,插件栏左侧等不触发失焦
-        if (!document.querySelector('.lc-workbench')?.contains(target)) {
-          return true;
-        }
-        // 排除设置区，iframe 之后，都不算失焦
-        if (document.querySelector('.lc-workbench-body')?.contains(target)) {
-          return true;
-        }
-        const docks = area.current?.getAssocDocks();
-        if (docks && docks?.length) {
-          return docks.some(dock => dock.getDOMNode()?.contains(target));
-        }
-        return false;
-      },
-      onEsc: () => {
-        this.props.area.setVisible(false);
-      },
-      onBlur: () => {
-        this.props.area.setVisible(false);
-      },
-    });
-
-    this.onEffect();
-  }
-
-  onEffect() {
-    const { area } = this.props;
-    if (area.visible) {
-      this.focusing?.active();
-      // 关闭当前fixed区域的面板
-      // TODO: 看看有没有更合适的地方
-      const fixedContainer = area?.skeleton?.leftFixedArea?.container;
-      const currentFixed = fixedContainer?.current;
-      if (currentFixed) {
-        fixedContainer.unactive(currentFixed);
-      }
-    } else {
-      this.focusing?.suspense();
-    }
-  }
-
-  componentDidUpdate() {
-    this.onEffect();
-  }
-
-  componentWillUnmount() {
-    this.focusing?.purge();
-    this.dispose?.();
-  }
-
-  render() {
-    const { area } = this.props;
-    const width = area.current?.config.props?.width;
-
-    const style = width ? {
-      width,
-    } : undefined;
-    return (
-      <div
-        ref={(ref) => { this.shell = ref; }}
-        className={classNames('lc-left-float-pane', {
-          'lc-area-visible': area.visible,
-        })}
-        style={style}
-      >
-        <Contents area={area} />
-      </div>
-    );
-  }
-}
-
-@observer
-class Contents extends Component<{ area: Area<any, Panel> }> {
-  render() {
-    const { area } = this.props;
-    return (
-      <Fragment>
-        {area.container.items.map((panel) => panel.content)}
-      </Fragment>
-    );
-  }
-}
diff --git a/packages/workspace/src/layouts/main-area.tsx b/packages/workspace/src/layouts/main-area.tsx
deleted file mode 100644
index 5313d7007..000000000
--- a/packages/workspace/src/layouts/main-area.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from 'react';
-import classNames from 'classnames';
-import { observer } from '@alilc/lowcode-editor-core';
-import { Area, Panel, Widget } from '@alilc/lowcode-editor-skeleton';
-
-@observer
-export default class MainArea extends Component<{ area: Area<any, Panel | Widget> }> {
-  render() {
-    const { area } = this.props;
-    return (
-      <div className={classNames('lc-main-area engine-workspacepane')}>
-        {area.container.items.map((item) => item.content)}
-      </div>
-    );
-  }
-}
diff --git a/packages/workspace/src/layouts/theme.less b/packages/workspace/src/layouts/theme.less
deleted file mode 100644
index b0da053db..000000000
--- a/packages/workspace/src/layouts/theme.less
+++ /dev/null
@@ -1,62 +0,0 @@
-@import '../less-variables.less';
-
-/*
- * Theme Colors
- *
- * 乐高设计器的主要主题色变量
- */
-:root {
-  --color-brand: @brand-color-1;
-  --color-brand-light: @brand-color-2;
-  --color-brand-dark: @brand-color-3;
-
-  --color-canvas-background: @normal-alpha-8;
-
-  --color-icon-normal: @normal-alpha-4;
-  --color-icon-hover: @normal-alpha-3;
-  --color-icon-active: @brand-color-1;
-  --color-icon-reverse: @white-alpha-1;
-
-  --color-line-normal: @normal-alpha-7;
-  --color-line-darken: darken(@normal-alpha-7, 10%);
-
-  --color-title: @dark-alpha-2;
-  --color-text: @dark-alpha-3;
-  --color-text-dark: darken(@dark-alpha-3, 10%);
-  --color-text-light: lighten(@dark-alpha-3, 10%);
-  --color-text-reverse: @white-alpha-2;
-  --color-text-regular: @normal-alpha-2;
-
-  --color-field-label: @dark-alpha-4;
-  --color-field-text: @dark-alpha-3;
-  --color-field-placeholder: @normal-alpha-5;
-  --color-field-border: @normal-alpha-5;
-  --color-field-border-hover: @normal-alpha-4;
-  --color-field-border-active: @normal-alpha-3;
-  --color-field-background: @white-alpha-1;
-
-  --color-function-success: @brand-success;
-  --color-function-success-dark: darken(@brand-success, 10%);
-  --color-function-success-light: lighten(@brand-success, 10%);
-  --color-function-warning: @brand-warning;
-  --color-function-warning-dark: darken(@brand-warning, 10%);
-  --color-function-warning-light: lighten(@brand-warning, 10%);
-  --color-function-information: @brand-link-hover;
-  --color-function-information-dark: darken(@brand-link-hover, 10%);
-  --color-function-information-light: lighten(@brand-link-hover, 10%);
-  --color-function-error: @brand-danger;
-  --color-function-error-dark: darken(@brand-danger, 10%);
-  --color-function-error-light: lighten(@brand-danger, 10%);
-
-  --color-pane-background: @white-alpha-1;
-  --color-block-background-normal: @white-alpha-1;
-  --color-block-background-light: @normal-alpha-9;
-  --color-block-background-shallow: @normal-alpha-8;
-  --color-block-background-dark: @normal-alpha-7;
-  --color-block-background-disabled: @normal-alpha-6;
-  --color-block-background-deep-dark: @normal-5;
-  --color-layer-mask-background: @dark-alpha-7;
-  --color-layer-tooltip-background: rgba(44,47,51,0.8);
-
-  --pane-title-bg-color: rgba(31,56,88,.04);
-}
diff --git a/packages/workspace/src/layouts/top-area.tsx b/packages/workspace/src/layouts/top-area.tsx
deleted file mode 100644
index cecaee2a7..000000000
--- a/packages/workspace/src/layouts/top-area.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Component, Fragment } from 'react';
-import classNames from 'classnames';
-import { observer } from '@alilc/lowcode-editor-core';
-import { Area } from '@alilc/lowcode-editor-skeleton';
-
-@observer
-export default class TopArea extends Component<{ area: Area; itemClassName?: string }> {
-  render() {
-    const { area, itemClassName } = this.props;
-
-    if (area.isEmpty()) {
-      return null;
-    }
-
-    return (
-      <div className={classNames('lc-top-area engine-actionpane', {
-        'lc-area-visible': area.visible,
-      })}
-      >
-        <Contents area={area} itemClassName={itemClassName} />
-      </div>
-    );
-  }
-}
-
-@observer
-class Contents extends Component<{ area: Area; itemClassName?: string }> {
-  render() {
-    const { area, itemClassName } = this.props;
-    const left: any[] = [];
-    const center: any[] = [];
-    const right: any[] = [];
-    area.container.items.slice().sort((a, b) => {
-      const index1 = a.config?.index || 0;
-      const index2 = b.config?.index || 0;
-      return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1);
-    }).forEach(item => {
-      const content = (
-        <div className={itemClassName || ''} key={`top-area-${item.name}`}>
-          {item.content}
-        </div>
-      );
-      if (item.align === 'center') {
-        center.push(content);
-      } else if (item.align === 'left') {
-        left.push(content);
-      } else {
-        right.push(content);
-      }
-    });
-
-    return (
-      <Fragment>
-        <div className="lc-top-area-left">{left}</div>
-        <div className="lc-top-area-center">{center}</div>
-        <div className="lc-top-area-right">{right}</div>
-      </Fragment>
-    );
-  }
-}
diff --git a/packages/workspace/src/layouts/workbench.less b/packages/workspace/src/layouts/workbench.less
deleted file mode 100644
index 05eb5f513..000000000
--- a/packages/workspace/src/layouts/workbench.less
+++ /dev/null
@@ -1,421 +0,0 @@
-@import './theme.less';
-
-:root {
-  --font-family: @font-family;
-  --font-size-label: @fontSize-4;
-  --font-size-text: @fontSize-5;
-  --font-size-btn-large: @fontSize-3;
-  --font-size-btn-medium: @fontSize-4;
-  --font-size-btn-small: @fontSize-5;
-
-  --global-border-radius: @global-border-radius;
-  --input-border-radius: @input-border-radius;
-  --popup-border-radius: @popup-border-radius;
-
-  --left-area-width: 48px;
-  --right-area-width: 300px;
-  --top-area-height: 48px;
-  --toolbar-height: 36px;
-  --dock-pane-width: 300px;
-  --dock-fixed-pane-width: 300px;
-}
-
-@media (min-width: 1860px) {
-  :root {
-    --right-area-width: 400px;
-    --dock-pane-width: 452px;
-    --dock-fixed-pane-width: 350px;
-  }
-}
-
-html,
-body {
-  height: 100%;
-  overflow: hidden;
-  padding: 0;
-  margin: 0;
-  position: relative;
-  font-family: var(--font-family);
-  font-size: var(--font-size-text);
-  color: var(--color-text);
-  background-color: #edeff3;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-.lc-titled-panel {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background-color: #fff;
-  background-color: var(--color-pane-background);
-  &.hidden {
-    display: none;
-  }
-  .lc-panel-title {
-    // background-color: var(--pane-title-bg-color,rgba(31,56,88,.04));
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 0 15px;
-
-    .lc-help-tip {
-      margin-left: 4px;
-      color: rgba(0, 0, 0, 0.4);
-      cursor: pointer;
-    }
-  }
-  > .lc-panel-title {
-    height: 48px;
-    font-size: 16px;
-    padding: 0 15px;
-    // border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
-    color: #0f1726;
-    font-weight: bold;
-  }
-
-  .lc-panel-body {
-    position: absolute;
-    top: 48px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: visible;
-    /*
-    .my-tabs {
-      width: 100%;
-      height: 100%;
-      position: relative;
-      .tabs-title {
-        display: flex;
-        height: var(--pane-title-height);
-        > .tab-title {
-          cursor: pointer;
-          padding: 0;
-          flex: 1;
-          min-width: 0;
-          justify-content: center;
-          border-bottom: 2px solid transparent;
-          &.actived {
-            cursor: default;
-            color: var(--color-text-avtived);
-            border-bottom-color: #3896ee;
-          }
-        }
-      }
-      .tabs-content {
-        position: absolute;
-        top: var(--pane-title-height);
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: calc(100% - var(--pane-title-height));
-        overflow: hidden;
-      }
-    }
-    */
-  }
-  .lc-outline-tree-container {
-    border-top: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
-  }
-}
-.lc-panel {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  background-color: #fff;
-  background-color: var(--color-pane-background);
-  // overflow: auto;
-  &.hidden {
-    display: none;
-  }
-}
-
-.lc-workspace-workbench {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: #edeff3;
-  .lc-top-area, .lc-sub-top-area {
-    height: var(--top-area-height);
-    background-color: var(--color-pane-background);
-    width: 100%;
-    display: none;
-    margin-bottom: 2px;
-    padding: 8px 12px 8px 16px;
-
-    &.lc-area-visible {
-      display: flex;
-    }
-
-    .lc-top-area-left, .lc-sub-top-area-left {
-      display: flex;
-      align-items: center;
-      max-width: 100%;
-    }
-
-    .lc-top-area-center, .lc-sub-top-area-center {
-      flex: 1;
-      display: flex;
-      justify-content: center;
-      margin: 0 8px;
-    }
-    .lc-top-area-right, .lc-sub-top-area-right {
-      display: flex;
-      align-items: center;
-      > * {
-        margin-left: 4px;
-        margin-right: 4px;
-      }
-      .ve-quick-search-trigger {
-        display: flex;
-      }
-    }
-  }
-  .lc-workspace-workbench-body {
-    flex: 1;
-    display: flex;
-    min-height: 0;
-    position: relative;
-
-    .lc-tabs-title {
-      width: 100%;
-      height: 32px;
-      position: relative;
-      display: center;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      // background: rgba(31,56,88,0.04);
-      border-bottom: 1px solid #edeff3;
-      .lc-tab-title {
-        flex: 1;
-        height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-bottom: 2px solid transparent;
-        cursor: pointer;
-        font-size: 12px;
-        &.actived {
-          color: #0079f2;
-          border-bottom-color: #0079f2;
-        }
-      }
-    }
-
-    .lc-tabs-content {
-      position: absolute;
-      top: 32px;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-
-    .lc-pane-icon-close {
-      position: absolute;
-      right: 16px;
-      top: 14px;
-      height: auto;
-      z-index: 2;
-      .next-icon {
-        line-height: 1;
-        color: rgba(0, 0, 0, 0.6);
-      }
-    }
-
-    .lc-pane-icon-fix,
-    .lc-pane-icon-float {
-      position: absolute;
-      right: 38px;
-      top: 14px;
-      height: auto;
-      z-index: 2;
-      svg {
-        vertical-align: middle;
-        color: rgba(0, 0, 0, 0.6);
-      }
-    }
-
-    .lc-left-float-pane {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: var(--dock-pane-width);
-      // min-width: var(--dock-fixed-pane-width);
-      left: calc(var(--left-area-width) + 1px);
-      background-color: var(--color-pane-background);
-      box-shadow: 4px 6px 6px 0 rgba(31, 50, 88, 0.08);
-      z-index: 820;
-      display: none;
-      // padding-top: 36px;
-      &.lc-area-visible {
-        display: block;
-      }
-    }
-    .lc-left-area {
-      height: 100%;
-      width: var(--left-area-width);
-      background-color: var(--color-pane-background);
-      display: none;
-      flex-shrink: 0;
-      flex-direction: column;
-      justify-content: space-between;
-      overflow: hidden;
-      &.lc-area-visible {
-        display: flex;
-      }
-      .lc-left-area-top,
-      .lc-left-area-bottom {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: center;
-        .lc-title {
-          flex-direction: column;
-          width: calc(var(--left-area-width) - 2px);
-          height: 46px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          &.has-tip {
-            cursor: pointer;
-          }
-          &.actived {
-            color: #0079f2;
-          }
-          &.disabled {
-            opacity: 0.4;
-          }
-          .lc-title-icon {
-            height: 20px;
-            width: 20px;
-            margin: 0;
-            .next-icon:before {
-              line-height: 1 !important;
-            }
-          }
-        }
-      }
-      .lc-left-area-top {
-        padding-top: 12px;
-      }
-      .lc-left-area-bottom {
-        padding-bottom: 12px;
-      }
-    }
-    .lc-left-fixed-pane {
-      width: var(--dock-fixed-pane-width);
-      background-color: var(--color-pane-background);
-      height: 100%;
-      display: none;
-      flex-shrink: 0;
-      position: relative;
-      z-index: 820;
-      &.lc-area-visible {
-        display: block;
-      }
-    }
-    .lc-left-area.lc-area-visible ~ .lc-left-fixed-pane {
-      margin-left: 1px;
-    }
-    .lc-left-area.lc-area-visible ~ .lc-workspace-workbench-center {
-      margin-left: 2px;
-    }
-    .lc-outline-pane {
-      .lc-outline-tree .tree-node .tree-node-title {
-        border-bottom: none;
-      }
-    }
-    .lc-workspace-workbench-center {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      z-index: 10;
-      position: relative;
-      .lc-toolbar {
-        display: flex;
-        height: var(--toolbar-height);
-        background-color: var(--color-pane-background);
-        padding: 8px 16px;
-        .lc-toolbar-center {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex: 1;
-        }
-      }
-      .lc-main-area {
-        flex: 1;
-      }
-      .lc-bottom-area {
-        height: var(--bottom-area-height);
-        background-color: var(--color-pane-background);
-        display: none;
-        &.lc-area-visible {
-          display: block;
-        }
-      }
-    }
-
-    .lc-workspace-workbench-center-content {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      flex-direction: column;
-      display: flex;
-      align-content: stretch;
-    }
-
-    .engine-actionitem {
-      max-width: 100%;
-    }
-
-    .lc-workspace-workbench-window {
-      position: relative;
-      height: 100%;
-    }
-
-    .lc-right-area {
-      height: 100%;
-      width: var(--right-area-width);
-      background-color: var(--color-pane-background);
-      display: none;
-      flex-shrink: 0;
-      margin-left: 2px;
-      position: relative;
-      > .lc-panel {
-        position: absolute;
-        left: 0;
-        top: 0;
-      }
-      &.lc-area-visible {
-        display: block;
-      }
-      .lc-settings-tabs {
-        > .next-tabs-nav-extra {
-          top: 36px !important;
-        }
-        .lc-settings-tab-item {
-          .next-tabs-tab-inner {
-            font-size: 12px;
-            line-height: 12px;
-          }
-        }
-        .lc-title {
-          color: inherit;
-          line-height: inherit !important;
-        }
-      }
-      .lc-settings-tabs-content {
-        top: 66px;
-      }
-    }
-  }
-}
diff --git a/packages/workspace/src/layouts/workbench.tsx b/packages/workspace/src/layouts/workbench.tsx
index 08d6dc1a9..7d2d96df1 100644
--- a/packages/workspace/src/layouts/workbench.tsx
+++ b/packages/workspace/src/layouts/workbench.tsx
@@ -2,17 +2,10 @@ import { Component } from 'react';
 import { TipContainer, engineConfig, observer } from '@alilc/lowcode-editor-core';
 import { WindowView } from '../view/window-view';
 import classNames from 'classnames';
-import TopArea from './top-area';
-import LeftArea from './left-area';
-import LeftFixedPane from './left-fixed-pane';
-import LeftFloatPane from './left-float-pane';
-import MainArea from './main-area';
-import BottomArea from './bottom-area';
-import './workbench.less';
 import { SkeletonContext } from '../skeleton-context';
 import { EditorConfig, PluginClassSet } from '@alilc/lowcode-types';
 import { Workspace } from '../workspace';
-import SubTopArea from './sub-top-area';
+import { BottomArea, LeftArea, LeftFixedPane, LeftFloatPane, MainArea, SubTopArea, TopArea } from '@alilc/lowcode-editor-skeleton';
 
 @observer
 export class Workbench extends Component<{
@@ -23,12 +16,18 @@ export class Workbench extends Component<{
   topAreaItemClassName?: string;
 }, {
   workspaceEmptyComponent: any;
+  theme?: string;
 }> {
   constructor(props: any) {
     super(props);
     const { config, components, workspace } = this.props;
     const { skeleton } = workspace;
     skeleton.buildFromConfig(config, components);
+    engineConfig.onGot('theme', (theme) => {
+      this.setState({
+        theme,
+      });
+    });
     engineConfig.onGot('workspaceEmptyComponent', (workspaceEmptyComponent) => {
       this.setState({
         workspaceEmptyComponent,
@@ -36,20 +35,21 @@ export class Workbench extends Component<{
     });
     this.state = {
       workspaceEmptyComponent: engineConfig.get('workspaceEmptyComponent'),
+      theme: engineConfig.get('theme'),
     };
   }
 
   render() {
     const { workspace, className, topAreaItemClassName } = this.props;
     const { skeleton } = workspace;
-    const WorkspaceEmptyComponent = this.state.workspaceEmptyComponent;
+    const { workspaceEmptyComponent: WorkspaceEmptyComponent, theme } = this.state;
 
     return (
-      <div className={classNames('lc-workspace-workbench', className)}>
+      <div className={classNames('lc-workspace-workbench', className, theme)}>
         <SkeletonContext.Provider value={skeleton}>
           <TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName} />
           <div className="lc-workspace-workbench-body">
-            <LeftArea area={skeleton.leftArea} />
+            <LeftArea className="lc-workspace-left-area" area={skeleton.leftArea} />
             <LeftFloatPane area={skeleton.leftFloatArea} />
             <LeftFixedPane area={skeleton.leftFixedArea} />
             <div className="lc-workspace-workbench-center">
diff --git a/packages/workspace/src/view/resource-view.tsx b/packages/workspace/src/view/resource-view.tsx
index 9ef30af09..e2204dd50 100644
--- a/packages/workspace/src/view/resource-view.tsx
+++ b/packages/workspace/src/view/resource-view.tsx
@@ -1,10 +1,10 @@
 import { PureComponent } from 'react';
 import { EditorView } from './editor-view';
 import { observer } from '@alilc/lowcode-editor-core';
-import TopArea from '../layouts/top-area';
 import { IResource } from '../resource';
 import { IEditorWindow } from '../window';
 import './resource-view.less';
+import { TopArea } from '@alilc/lowcode-editor-skeleton';
 
 @observer
 export class ResourceView extends PureComponent<{