diff --git a/core/core-frontend/src/assets/svg/icon_sync_datasource.svg b/core/core-frontend/src/assets/svg/icon_sync_datasource.svg
index 79c5d84906..6dba88f67e 100644
--- a/core/core-frontend/src/assets/svg/icon_sync_datasource.svg
+++ b/core/core-frontend/src/assets/svg/icon_sync_datasource.svg
@@ -1,6 +1,6 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g clip-path="url(#clip0_10054_936)">
-    <path d="M0 6.66667C0 2.98477 3.25611 0 7.27273 0H32.7273C36.7439 0 40 2.98477 40 6.66667V33.3333C40 37.0152 36.7439 40 32.7273 40H7.27273C3.25611 40 0 37.0152 0 33.3333V6.66667Z" fill="#EBF1FF"/>
+    <path d="M0 6.66667C0 2.98477 3.25611 0 7.27273 0H32.7273C36.7439 0 40 2.98477 40 6.66667V33.3333C40 37.0152 36.7439 40 32.7273 40H7.27273C3.25611 40 0 37.0152 0 33.3333V6.66667Z" class="svg-primary-color_b50"/>
     <g clip-path="url(#clip1_10054_936)">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M29.9019 28.8369C30.5346 28.3383 31.1111 27.6133 31.1111 26.6667V13.3334C31.1111 12.3868 30.5346 11.6618 29.9019 11.1632C29.2567 10.6547 28.392 10.2454 27.4225 9.92225C25.4718 9.27202 22.8476 8.88892 20 8.88892C17.1524 8.88892 14.5283 9.27202 12.5776 9.92225C11.6081 10.2454 10.7433 10.6547 10.0981 11.1632C9.46546 11.6618 8.88892 12.3868 8.88892 13.3334V26.6667C8.88892 27.6133 9.46546 28.3383 10.0981 28.8369C10.7433 29.3453 11.6081 29.7546 12.5776 30.0778C14.5283 30.728 17.1524 31.1111 20 31.1111C22.8476 31.1111 25.4718 30.728 27.4225 30.0778C28.392 29.7546 29.2567 29.3453 29.9019 28.8369ZM11.1111 13.3331C11.1118 12.1059 15.0912 11.1111 20 11.1111C24.9092 11.1111 28.8889 12.1061 28.8889 13.3334C28.8889 14.5607 24.9092 15.5556 20 15.5556C15.0908 15.5556 11.1111 14.5607 11.1111 13.3334C11.1111 13.3333 11.1111 13.3333 11.1111 13.3333C11.1111 13.3332 11.1111 13.3331 11.1111 13.3331ZM27.4225 16.7445C27.9482 16.5692 28.4431 16.3687 28.8889 16.1407V20.0003C28.8889 20.0016 28.8888 20.0064 28.8855 20.017C28.8818 20.0294 28.8724 20.0539 28.8499 20.0905C28.8028 20.1673 28.7066 20.2828 28.5264 20.4248C28.1596 20.714 27.5598 21.0229 26.7197 21.303C25.0511 21.8592 22.6753 22.2222 20 22.2222C17.3248 22.2222 14.9489 21.8592 13.2803 21.303C12.4402 21.0229 11.8405 20.714 11.4736 20.4248C11.2934 20.2828 11.1973 20.1673 11.1501 20.0905C11.1276 20.0539 11.1183 20.0294 11.1145 20.017C11.1113 20.0065 11.1111 20.0014 11.1111 20V16.1407C11.5569 16.3687 12.0519 16.5692 12.5776 16.7445C14.5283 17.3947 17.1524 17.7778 20 17.7778C22.8476 17.7778 25.4718 17.3947 27.4225 16.7445ZM27.4225 23.4111C27.9482 23.2359 28.4431 23.0353 28.8889 22.8074V26.6668C28.8889 26.6678 28.8889 26.6725 28.8855 26.6837C28.8818 26.6961 28.8724 26.7205 28.8499 26.7572C28.8028 26.834 28.7066 26.9495 28.5264 27.0915C28.1596 27.3806 27.5598 27.6896 26.7197 27.9696C25.0511 28.5258 22.6753 28.8889 20 28.8889C17.3248 28.8889 14.9489 28.5258 13.2803 27.9696C12.4402 27.6896 11.8405 27.3806 11.4736 27.0915C11.2934 26.9495 11.1973 26.834 11.1501 26.7572C11.1276 26.7205 11.1183 26.6961 11.1145 26.6837C11.1111 26.6725 11.1111 26.6677 11.1111 26.6667V22.8074C11.5569 23.0353 12.0519 23.2359 12.5776 23.4111C14.5283 24.0614 17.1524 24.4445 20 24.4445C22.8476 24.4445 25.4718 24.0614 27.4225 23.4111Z" class="svg-primary-color"/>
     </g>
diff --git a/core/core-frontend/src/store/modules/appearance.ts b/core/core-frontend/src/store/modules/appearance.ts
index af1aebfcb5..c4bdf001cf 100644
--- a/core/core-frontend/src/store/modules/appearance.ts
+++ b/core/core-frontend/src/store/modules/appearance.ts
@@ -291,6 +291,12 @@ export const useAppearanceStore = defineStore('appearanceStore', {
       if (this.themeColor === 'custom' && this.customColor) {
         document.documentElement.style.setProperty('--ed-color-primary', this.customColor)
         document.documentElement.style.setProperty('--van-blue', this.customColor)
+        document.documentElement.style.setProperty(
+          '--ed-color-primary_b50',
+          colorFunctions
+            .mix(new colorTree('ffffff'), new colorTree(this.customColor.substr(1)), { value: 90 })
+            .toRGB()
+        )
         document.documentElement.style.setProperty(
           '--ed-color-primary-light-5',
           mixColor('ffffff', this.customColor, 40)
diff --git a/core/core-frontend/src/style/index.less b/core/core-frontend/src/style/index.less
index 524e55fa37..44fcc7b2de 100644
--- a/core/core-frontend/src/style/index.less
+++ b/core/core-frontend/src/style/index.less
@@ -347,15 +347,10 @@ body {
   fill: var(--ed-color-primary, #3370ff);
 }
 
-// .ed-drawer__footer {
-//   height: 64px !important;
-//   padding: 0px !important;
-//   box-shadow: 0 -1px 0px #d7d7d7 !important;
-// }
-
-// .ed-drawer__body {
-//   padding: 0 0 64px 0 !important;
-// }
+.svg-primary-color_b50 {
+  color: var(--ed-color-primary_b50, #ebf1ff);
+  fill: var(--ed-color-primary_b50, #ebf1ff);
+}
 
 .ed-tree-node.is-current > .ed-tree-node__content:not(.is-menu):after {
   display: none;
@@ -892,3 +887,7 @@ strong {
 .ed-tree-node__content {
   border-radius: 4px;
 }
+
+.ed-popper.is-light .ed-popper__arrow {
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+}