diff --git a/core/core-frontend/src/custom-component/v-query/QueryCascade.vue b/core/core-frontend/src/custom-component/v-query/QueryCascade.vue
index d71cc27..d0739ee 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryCascade.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryCascade.vue
@@ -309,9 +309,10 @@ defineExpose({
 <style lang="less" scoped>
 .query-condition-cascade {
   .title {
+    color: #ffffff;
     .tip {
       font-size: 12px;
-      color: #646a73;
+      color: #ffffff;
     }
   }
 
@@ -319,7 +320,7 @@ defineExpose({
     height: 62px;
     width: 852px;
     border-radius: 4px;
-    background: #e1eaff;
+    background: #333333;
     position: relative;
     padding: 9px 0 9px 40px;
     font-family: var(--de-custom_font, 'PingFang');
@@ -339,7 +340,7 @@ defineExpose({
 
   .cascade-content {
     box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
-    border: 1px solid #e4e7ed;
+    border: 1px solid #434343;
     padding: 24px;
     padding-top: 8px;
     margin-top: 8px;
@@ -374,9 +375,16 @@ defineExpose({
     .cascade-delete {
       width: 40px;
       font-size: 20px;
-      color: #646a73;
+      color: #5f5f5f;
       margin-left: 20px;
     }
+    :deep(.ed-input__wrapper){
+      background-color: #252424 ;
+      box-shadow: 0 0 0 1px #5f5f5f inset;
+    }
+    :deep(.ed-input__inner){
+      color: #fff;
+    }
   }
 }
 </style>
diff --git a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
index dd20d23..7dd63e6 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@@ -2194,7 +2194,7 @@ defineExpose({
               class="list-item_primary"
               :class="element.id === activeCondition && 'active'"
             >
-              <el-icon class="handle">
+              <el-icon class="handle" style="color:#fff;">
                 <Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
               </el-icon>
               <div class="label flex-align-center icon" :title="element.name">
@@ -2246,7 +2246,7 @@ defineExpose({
               <el-radio :disabled="!curComponent.auto" :label="true">
                 <div class="flex-align-center">
                   {{ t('chart.margin_model_auto') }}
-                  <el-tooltip effect="dark" placement="top">
+                  <el-tooltip placement="top">
                     <template #content>
                       <div>
                         {{ t('v_query.be_switched_to') }}
@@ -3169,10 +3169,10 @@ defineExpose({
     </div>
     <template #footer>
       <div class="dialog-footer">
-        <el-button class="query-cascade" @click="openCascadeDialog">{{
+        <el-button type="primary" class="query-cascade" @click="openCascadeDialog">{{
           t('v_query.component_cascade_configuration')
         }}</el-button>
-        <el-button @click="cancelClick">{{ t('chart.cancel') }} </el-button>
+        <el-button @click="cancelClick">{{ t('chart.cancel') }}</el-button>
         <el-button @click="confirmClick" type="primary">{{ t('chart.confirm') }} </el-button>
       </div>
     </template>
@@ -3299,7 +3299,7 @@ defineExpose({
     width: 1152px;
     height: 454px;
     border-radius: 4px;
-    border: 1px solid #dee0e3;
+    border: 1px solid #434343;
     display: flex;
     .ed-checkbox:not(.is-disabled) {
       .ed-checkbox__label:hover {
@@ -3310,7 +3310,7 @@ defineExpose({
       height: 100%;
       // background: #f5f6f7;
       background: rgb(38,38,38);
-      border-right: 1px solid #dee0e3;
+      border-right: 1px solid #434343;
       width: 208px;
       overflow-y: auto;
 
@@ -3456,7 +3456,7 @@ defineExpose({
     }
 
     .condition-configuration {
-      border-left: 1px solid #dee0e3;
+      border-left: 1px solid #434343;
       width: 467px;
       position: relative;
       overflow: hidden;
@@ -3873,4 +3873,61 @@ defineExpose({
     height: 16px;
   }
 }
+.dialog-footer .ed-button{
+  color: #F2F4F5;
+  background-color: #212121;
+  border: 1px solid #434343;
+}
+.dialog-footer .ed-button--primary{
+  background-color:#0089FF;
+  border: 1px solid #0089FF;
+}
+.ed-checkbox__inner{
+  background: transparent;
+  border-color:#5f5f5f;
+}
+.ed-radio__inner{
+  background: rgb(33,33,33);
+  border-color:#5f5f5f;
+}
+.ed-radio__input.is-checked .ed-radio__inner{
+  background-color:#0089FF ;
+  border: 1px solid #0089FF;
+}
+.ed-radio__input.is-disabled .ed-radio__inner{
+  background-color:#373737 ;
+  border: 1px solid #5f5f5f;
+}
+.ed-radio--dark .ed-radio__input.is-disabled.is-checked .ed-radio__inner{
+  background-color:#5f5f5f ;
+  border: 1px solid #5f5f5f;
+}
+.ed-radio--dark .ed-radio__input.is-disabled.is-checked .ed-radio__inner::after{
+  background-color:rgb(33,33,33);
+}
+.list-item_primary.active{
+  background: rgba(0, 137, 255, 0.3);
+  color: #fff;
+}
+.ed-dropdown-menu__item{
+  color: #ffffff;
+}
+.ed-input__wrapper{
+  background-color: #252424 ;
+  box-shadow: 0 0 0 1px #5f5f5f inset;
+}
+.ed-input__inner{
+  color: #fff;
+}
+.ed-popper.is-dark{
+  background: rgb(41,41,41);
+  border: 1px solid #434343;
+}
+.ed-popper[data-popper-placement^=top] .ed-popper__arrow::before {
+  background: rgba(41, 41, 41, 1) !important;
+}
+.ed-select .ed-popper.is-dark{
+  background: rgb(41,41,41);
+  border: 1px solid #434343;
+}
 </style>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/PictureGroupThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/PictureGroupThresholdEdit.vue
index c2aa054..23c254a 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/PictureGroupThresholdEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/PictureGroupThresholdEdit.vue
@@ -334,7 +334,7 @@ init()
             :style="{ float: 'right' }"
             @click="removeThreshold(fieldIndex)"
           >
-            <el-icon size="20px" style="color: #646a73">
+            <el-icon size="20px" style="color: #979797">
               <Icon name="icon_delete-trash_outlined"
                 ><icon_deleteTrash_outlined class="svg-icon"
               /></Icon>
@@ -342,7 +342,7 @@ init()
           </el-button>
         </el-row>
 
-        <el-row :style="{ marginTop: '16px', borderTop: '1px solid #d5d6d8' }">
+        <el-row :style="{ marginTop: '16px', borderTop: '1px solid #5f5f5f' }">
           <el-row
             v-for="(item, index) in fieldItem.conditions"
             :key="index"
@@ -464,7 +464,7 @@ init()
                 text
                 @click="removeCondition(fieldItem, index)"
               >
-                <el-icon size="20px" style="color: #646a73">
+                <el-icon size="20px" style="color: #979797">
                   <Icon name="icon_delete-trash_outlined"
                     ><icon_deleteTrash_outlined class="svg-icon"
                   /></Icon>
@@ -510,7 +510,7 @@ init()
   border-radius: 4px;
   padding: 10px 16px;
   margin-top: 10px;
-  background: #f5f6f7;
+  background:#333333;
 }
 
 .line-item {
@@ -578,7 +578,7 @@ span {
 
 .tip {
   font-size: 12px;
-  background: #d6e2ff;
+  background: #333333;
   border-radius: 4px;
   padding: 10px 20px;
   display: flex;
@@ -613,6 +613,31 @@ span {
   justify-content: flex-start;
   padding: 0 11px;
 }
+:deep(.ed-input__wrapper){
+  background-color: #252424 ;
+  box-shadow: 0 0 0 1px #5f5f5f inset;
+}
+:deep(.ed-input__inner){
+  color: #fff;
+}
+:deep(.ed-select-dropdown__item){
+  color: #ffffff !important;
+}
+:deep(.ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover){
+  background: rgb(61,61,61) !important;
+}
+.ed-select-dropdown__item{   
+  color: #ffffff;
+}
+.ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover{
+  background: rgb(61,61,61);
+}
+.ed-select-dropdown__item.selected{
+  color: #0089ff;
+}
+:deep(.ed-color-picker__trigger){
+  border: 1px solid #5f5f5f ;
+}
 </style>
 
 <style lang="less">
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/AuthTree.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/AuthTree.vue
index 435f3de..1b9683a 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/AuthTree.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/AuthTree.vue
@@ -271,7 +271,7 @@ const del = (index, child) => {
   border-color: rgba(70, 70, 70, 1); 
 }
 :deep(.ed-dropdown-menu__item:not(.is-disabled):hover){
-  background-color: rgba(61,61,61, 1);
+  background-color: rgba(41,41,41, 1);
 }
 </style>
 <style>
diff --git a/core/core-frontend/src/viewsnew/application/service/dataset/index.vue b/core/core-frontend/src/viewsnew/application/service/dataset/index.vue
index 547f4ad..74d762d 100644
--- a/core/core-frontend/src/viewsnew/application/service/dataset/index.vue
+++ b/core/core-frontend/src/viewsnew/application/service/dataset/index.vue
@@ -1456,7 +1456,7 @@ const proxyAllowDrop = debounce((arg1, arg2) => {
 
 .ed-dropdown__popper.ed-popper{
   width: 150px;
-  background-color: rgba(51, 51, 51, 1);
+  background-color: rgba(41, 41, 41, 1);
   box-sizing: border-box;
   border-width: 1px;
   border-style: solid;