diff --git a/src/control/gantt/gantt.scss b/src/control/gantt/gantt.scss
index 17f87bbbb1a74a1809d643a0df2f1729ba8c380c..78524cc67679a7aa22556115b12ab9cc9e537ca8 100644
--- a/src/control/gantt/gantt.scss
+++ b/src/control/gantt/gantt.scss
@@ -3,6 +3,33 @@
   height: 100%;
 
   .xg-root {
+    // 背景
+    --gantt-bg: var(--ibiz-color-bg-1);
+    --gantt-bg-hover: var(--ibiz-color-disabled-border);
+    --gantt-bg-active: var(--ibiz-color-disabled-border);
+    --gantt-bg-checkmark: transparent;
+
+    // 阴影
+    --gantt-shadow: var(--ibiz-color-shadow);
+    --gantt-shadow-toolbar-item: var(--ibiz-color-shadow);
+
+    // 边框
+    --gantt-border: var(--ibiz-color-border);
+    --gantt-border-hover: var(--ibiz-color-disabled-border);
+    --gantt-border-dashed: var(--ibiz-color-disabled-border);
+    --gantt-border-toolbar-item: var(--ibiz-color-border);
+
+    // 文本
+    --gantt-text-0: var(--ibiz-color-text-0);
+    --gantt-text-3: var(--ibiz-color-text-3);
+
+    // 主要颜色
+    --gantt-white: var(--ibiz-color-white);
+    --gantt-black: var(--ibiz-color-black);
+
+    // 警示色
+    --gantt-warning: var(--ibiz-color-warning);
+
     .xg-table-body .xg-table-row {
       cursor: pointer;
 
diff --git a/src/control/gantt/gantt.tsx b/src/control/gantt/gantt.tsx
index f8ab21fec21eda20321e85c6d5818be9379cd572..bec1793ac8577110799a37d677b0cb2276dce310 100644
--- a/src/control/gantt/gantt.tsx
+++ b/src/control/gantt/gantt.tsx
@@ -1,7 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-restricted-syntax */
-import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import {
+  useControlController,
+  useNamespace,
+  useUIStore,
+} from '@ibiz-template/vue3-util';
 import {
   computed,
   defineComponent,
@@ -9,6 +13,7 @@ import {
   resolveComponent,
   VNode,
   h,
+  watch,
   onMounted,
   getCurrentInstance,
   ref,
@@ -118,19 +123,28 @@ export const GanttControl = defineComponent({
       return getComputedStyle(root).getPropertyValue(varName);
     };
 
-    const ganttStyle = computed(() => {
-      const style = {
+    const { UIStore } = useUIStore();
+    const ganttStyle = ref<IData>({});
+    const sliderColor = ref<IData>({});
+
+    // 计算甘特样式
+    const calcGanttStyle = () => {
+      return {
         primaryColor:
           c.state.ganttStyle?.primaryColor ||
           getVarValue('--ibiz-color-primary'),
         textColor:
           c.state.ganttStyle?.textColor ||
           getVarValue('--ibiz-color-primary-text'),
+        bgColor: getVarValue('--ibiz-color-bg-1'),
+        weekendColor: getVarValue('--ibiz-color-fill-2'),
+        todayColor: getVarValue('--ibiz-color-primary-light-active'),
+        borderColor: getVarValue('--ibiz-color-disabled-border'),
       };
-      return style;
-    });
+    };
 
-    const sliderColor = computed(() => {
+    // 计算滑块样式
+    const calcSliderColor = () => {
       const nodeColor: IData = {};
       c.model.detreeNodes?.forEach((node, index) => {
         const colorIndex = index % color.length;
@@ -139,7 +153,16 @@ export const GanttControl = defineComponent({
         )}, 1)`;
       });
       return nodeColor;
-    });
+    };
+
+    watch(
+      () => UIStore.theme,
+      () => {
+        ganttStyle.value = calcGanttStyle();
+        sliderColor.value = calcSliderColor();
+      },
+      { immediate: true },
+    );
 
     /**
      * 部件是否在加载状态
@@ -694,6 +717,13 @@ export const GanttControl = defineComponent({
           onMoveSlider={this.onSliderMove}
           primaryColor={this.ganttStyle.primaryColor}
           headerStyle={{ textColor: this.ganttStyle.textColor }}
+          borderColor={this.ganttStyle.borderColor}
+          bodyStyle={{
+            todayColor: this.ganttStyle.todayColor,
+            weekendColor: this.ganttStyle.weekendColor,
+            bgColor: this.ganttStyle.bgColor,
+            selectColor: this.ganttStyle.weekendColor,
+          }}
         >
           {{
             default: () => {