diff --git a/src/components/CommandWrapper/styles/index.scss b/src/components/CommandWrapper/styles/index.scss
index 8f7ff1c..2675214 100644
--- a/src/components/CommandWrapper/styles/index.scss
+++ b/src/components/CommandWrapper/styles/index.scss
@@ -1,5 +1,5 @@
 .command-wrapper {
-  background-color: #00a6ff;
+  background-color: $theme-color-500;
   border-radius: 20px 4px 20px 20px;
   padding: 8px 24px;
   width: max-content;
diff --git a/src/components/FormCard/demo.vue b/src/components/FormCard/demo.vue
index 379d758..ff7200b 100644
--- a/src/components/FormCard/demo.vue
+++ b/src/components/FormCard/demo.vue
@@ -188,7 +188,7 @@ const addForm = () => {
   font-weight: 600;
   margin-bottom: 20rpx;
   color: #333;
-  border-left: 6rpx solid #00a6ff;
+  border-left: 6rpx solid $theme-color-500;
   padding-left: 16rpx;
 }
 
@@ -214,7 +214,7 @@ const addForm = () => {
 .add-btn {
   width: 100%;
   height: 80rpx;
-  background: #00a6ff;
+  background: $theme-color-500;
   color: #fff;
   border: none;
   border-radius: 8rpx;
diff --git a/src/components/FormCard/index.vue b/src/components/FormCard/index.vue
index 2688748..a98b665 100644
--- a/src/components/FormCard/index.vue
+++ b/src/components/FormCard/index.vue
@@ -1,12 +1,12 @@
 <template>
   <view class="form-wrapper">
     <view class="form-header">
-      <uni-icons class="minus" color="#00A6FF" size="22" type="minus" />
+      <uni-icons class="minus uni-color" color="opacity" size="22" type="minus" />
       <text class="form-title">{{ title }}</text>
       <uni-icons
         v-if="showDeleteIcon"
-        class="delete"
-        color="#00A6FF"
+        class="delete uni-color"
+        color="opacity"
         size="22"
         type="trash"
         @click="handleDelete"
diff --git a/src/components/FormCard/styles/index.scss b/src/components/FormCard/styles/index.scss
index 7afbd37..396a860 100644
--- a/src/components/FormCard/styles/index.scss
+++ b/src/components/FormCard/styles/index.scss
@@ -29,6 +29,10 @@ $form-transition: all 0.2s ease;
   padding: 10px 12px;
   min-height: 44px;
 
+  .uni-color {
+    color: $theme-color-500;
+  }
+
   .minus,
   .delete {
     height: 22px;
@@ -50,7 +54,7 @@ $form-transition: all 0.2s ease;
   margin-left: 8px;
   font-size: $uni-font-size-lg;
   font-weight: 500;
-  color: $form-primary-color;
+  color: $theme-color-500;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -110,7 +114,7 @@ $form-transition: all 0.2s ease;
   }
 
   &:focus {
-    border-bottom-color: $form-primary-color;
+    border-bottom-color: $theme-color-500;
 
     &::placeholder {
       opacity: 0.5;
diff --git a/src/components/ServiceTipsWord/styles/index.scss b/src/components/ServiceTipsWord/styles/index.scss
index 3f7608b..0a1e99d 100644
--- a/src/components/ServiceTipsWord/styles/index.scss
+++ b/src/components/ServiceTipsWord/styles/index.scss
@@ -48,6 +48,6 @@
   );
   font-size: $uni-font-size-sm;
   font-weight: 500;
-  color: #00a6ff;
+  color: $theme-color-500;
   border-radius: $uni-border-radius-50px;
 }
diff --git a/src/components/Speech/RecordingWaveBtn.vue b/src/components/Speech/RecordingWaveBtn.vue
index 4a6efdf..2d6d31b 100644
--- a/src/components/Speech/RecordingWaveBtn.vue
+++ b/src/components/Speech/RecordingWaveBtn.vue
@@ -107,7 +107,7 @@ defineExpose({
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #00a6ff;
+  background-color: $theme-color-500;
   height: 44px;
   border-radius: $uni-border-radius-50px;
 }
diff --git a/src/components/TagsGroup/styles/index.scss b/src/components/TagsGroup/styles/index.scss
index 0523182..e1be6a2 100644
--- a/src/components/TagsGroup/styles/index.scss
+++ b/src/components/TagsGroup/styles/index.scss
@@ -8,6 +8,6 @@
   border-radius: 10px;
   padding: 8px 16px;
   font-size: $uni-font-size-sm;
-  color: #00a6ff;
+  color: $theme-color-500;
   white-space: nowrap;
 }
diff --git a/src/pages/goods/components/GoodConfirm/styles/index.scss b/src/pages/goods/components/GoodConfirm/styles/index.scss
index 89b4696..a54937b 100644
--- a/src/pages/goods/components/GoodConfirm/styles/index.scss
+++ b/src/pages/goods/components/GoodConfirm/styles/index.scss
@@ -185,7 +185,7 @@
   .confirm-btn {
     width: 160px;
     height: 48px;
-    background: linear-gradient(179deg, #00a6ff 0%, #0256ff 100%);
+    background: linear-gradient(179deg, $theme-color-500 0%, $theme-color-700 100%);
     color: #fff;
     border: none;
     border-radius: 24px;
diff --git a/src/pages/index/components/module/QuickBookingCalender/styles/index.scss b/src/pages/index/components/module/QuickBookingCalender/styles/index.scss
index 29e57cb..f82361c 100644
--- a/src/pages/index/components/module/QuickBookingCalender/styles/index.scss
+++ b/src/pages/index/components/module/QuickBookingCalender/styles/index.scss
@@ -33,7 +33,7 @@
 }
 
 .date-item.active {
-  background-color: #00a6ff;
+  background-color: $theme-color-500;
 }
 .date-item.active .label,
 .date-item.active .date {