diff --git a/frontend/src/components/business/DeLayoutContent.vue b/frontend/src/components/business/DeLayoutContent.vue
index 39a0daa9fa..e38271e634 100644
--- a/frontend/src/components/business/DeLayoutContent.vue
+++ b/frontend/src/components/business/DeLayoutContent.vue
@@ -49,7 +49,7 @@ export default {
   border-radius: 4px;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 14%);
   box-sizing: border-box;
-  background: #f5f6f7;
+  background-color: var(--MainBG,#f5f6f7);
   overflow: hidden;
   padding: 24px 24px 24px 24px;
   height: 100%;
@@ -61,14 +61,14 @@ export default {
     font-weight: 500;
     line-height: 28px;
     text-align: left;
-    color: #1F2329;
+    color: var(--TextPrimary, #1F2329);
     width: 100%;
     margin: 0;
   }
   .container-wrapper {
     width: 100%;
     overflow: auto;
-    background: #fff;
+    background-color: var(--ContentBG, #FFFFFF);
     margin-top: 24px;
     padding: 24px;
     flex: 1;
diff --git a/frontend/src/components/widget/DeWidget/customInput.js b/frontend/src/components/widget/DeWidget/customInput.js
index e6d8ccf852..b33449e1c9 100644
--- a/frontend/src/components/widget/DeWidget/customInput.js
+++ b/frontend/src/components/widget/DeWidget/customInput.js
@@ -51,7 +51,11 @@ export default {
       const newValue = { brColor, wordColor, innerBgColor }
       const cssVar = this.typeTransform()
       this.styleAttrs.forEach((ele, index) => {
-        document.documentElement.style.setProperty(cssVar[index], !isPanelDe ? '' : newValue[ele])
+        if (newValue[ele]) {
+          document.documentElement.style.setProperty(cssVar[index], !isPanelDe ? '' : newValue[ele])
+        } else {
+          document.documentElement.style.removeProperty(cssVar[index])
+        }
       })
     },
   }
diff --git a/frontend/src/views/panel/templateMarket/component/MarketPreview.vue b/frontend/src/views/panel/templateMarket/component/MarketPreview.vue
index c15ba178da..6cee4cf5b8 100644
--- a/frontend/src/views/panel/templateMarket/component/MarketPreview.vue
+++ b/frontend/src/views/panel/templateMarket/component/MarketPreview.vue
@@ -303,7 +303,7 @@ export default {
   height: calc(100vh - 56px);
   overflow-x: hidden;
   overflow-y: auto;
-  background: #fff;
+  background-color: var(--ContentBG,#ffffff);
 }
 
 .aside-inActive{
@@ -337,6 +337,7 @@ export default {
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
+  color: var(--TextPrimary, #1F2329);
 }
 
 .insert-filter {
@@ -403,6 +404,7 @@ export default {
   font-size: 20px;
   line-height: 28px;
   margin-bottom: 24px;
+  color: var(--TextPrimary, #1F2329);
 }
 
 .margin-top16 {
diff --git a/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue b/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
index 333334b857..d355433757 100644
--- a/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
+++ b/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
@@ -88,6 +88,7 @@ export default {
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
+    color: var(--TextPrimary, #1F2329);
   }
 
   .template-img {
diff --git a/frontend/src/views/panel/templateMarket/component/TemplateMarketPreviewItem.vue b/frontend/src/views/panel/templateMarket/component/TemplateMarketPreviewItem.vue
index 8ae016594f..294978e7de 100644
--- a/frontend/src/views/panel/templateMarket/component/TemplateMarketPreviewItem.vue
+++ b/frontend/src/views/panel/templateMarket/component/TemplateMarketPreviewItem.vue
@@ -67,7 +67,7 @@ export default {
     box-sizing: border-box;
     width: 182px;
     height: 116px;
-    background: #ffffff;
+    background-color: var(--ContentBG,#ffffff);
     border: 1px solid #DEE0E3 ;
     border-radius: 4px;
     flex: none;
diff --git a/frontend/src/views/panel/templateMarket/index.vue b/frontend/src/views/panel/templateMarket/index.vue
index 6e34c31f9f..573666d355 100644
--- a/frontend/src/views/panel/templateMarket/index.vue
+++ b/frontend/src/views/panel/templateMarket/index.vue
@@ -158,7 +158,7 @@ export default {
       _this.$nextTick(() => {
         const curSeparator = Math.trunc(templateMainDom.offsetWidth / _this.templateMiniWidth)
         _this.templateSpan = (100 / Math.trunc(templateMainDom.offsetWidth / _this.templateMiniWidth)) + '%'
-        _this.templateCurWidth = Math.trunc(templateMainDom.offsetWidth / curSeparator) - 32
+        _this.templateCurWidth = Math.trunc(templateMainDom.offsetWidth / curSeparator) - 33
       })
     })
   },
@@ -266,7 +266,7 @@ export default {
     height: calc(100vh - 190px)!important;
     overflow-x: hidden;
     overflow-y: auto;
-    background: #fff ;
+    background-color: var(--ContentBG,#ffffff);
   }
   .market-main{
     padding:24px
@@ -276,6 +276,7 @@ export default {
     font-size: 20px;
     font-weight: 500;
     line-height: 28px;
+    color: var(--TextPrimary, #1F2329);
   }
   .title-right{
     float: right;
@@ -322,7 +323,7 @@ export default {
   .outer-body{
     width: 100%;
     height: calc(100vh - 56px);
-    background: #f5f6f7;
+    background-color: var(--MainBG,#f5f6f7);
   }
 
   .market-dialog-css{