基础颜色全部使用css变量

src/components/AddressItem.vue

@@ -94,7 +94,7 @@ export default {
 
     .address-val {
         font-size: 14px;
-        color: rgba(0, 0, 0, 1);
+        color: rgba(var(--ion-color-light-contrast-rgb), 1);
         line-height: 20px;
     }
 }

src/components/DistributionOrder.vue

@@ -84,12 +84,12 @@ export default {
         margin-left: 10px;
         .text1 {
             font-size: 14px;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 20px;
         }
         .text2 {
             font-size: 12px;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 17px;
             margin-top: 5px;
         }

src/components/OrderInfo.vue

@@ -436,7 +436,7 @@ export default {
 
 .text1 {
     font-size: 14px;
-    color: rgba(0, 0, 0, 1);
+    color: rgba(var(--ion-color-light-contrast-rgb), 1);
     line-height: 20px;
 }
 
@@ -461,7 +461,7 @@ export default {
     .price {
         font-size: 14px;
         font-weight: bold;
-        color: rgba(0, 0, 0, 1);
+        color: rgba(var(--ion-color-light-contrast-rgb), 1);
         line-height: 20px;
     }
 
@@ -539,7 +539,7 @@ export default {
         font-size: 16px;
         font-weight: bold;
         text-align: center;
-        color: rgba(0, 0, 0, 1);
+        color: rgba(var(--ion-color-light-contrast-rgb), 1);
         line-height: 22px;
     }
 
@@ -552,7 +552,7 @@ export default {
         .name {
             font-size: 18px;
             font-weight: bold;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 25px;
             min-width: 82px;
         }
@@ -560,7 +560,7 @@ export default {
         .val {
             font-size: 14px;
             font-weight: bold;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 20px;
 
             &.bold {

src/components/OrderItem.vue

@@ -454,7 +454,7 @@ export default {
 
 .text1 {
     font-size: 14px;
-    color: rgba(0, 0, 0, 1);
+    color: rgba(var(--ion-color-light-contrast-rgb), 1);
     line-height: 20px;
 }
 
@@ -553,7 +553,7 @@ export default {
         font-size: 16px;
         font-weight: bold;
         text-align: center;
-        color: rgba(0, 0, 0, 1);
+        color: rgba(var(--ion-color-light-contrast-rgb), 1);
         line-height: 22px;
     }
 
@@ -565,7 +565,7 @@ export default {
         .name {
             font-size: 14px;
             font-weight: bold;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 25px;
             min-width: 82px;
         }
@@ -573,7 +573,7 @@ export default {
         .val {
             font-size: 14px;
             font-weight: bold;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 20px;
 
             &.bold {
@@ -605,6 +605,6 @@ ion-modal#delegate {
     --min-width: 250px;
     --height: fit-content;
     --border-radius: 6px;
-    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+    --box-shadow: 0 28px 48px rgba(var(--ion-color-light-contrast-rgb), 0.4);
 }
 </style>

src/components/ProductInfo.vue

@@ -90,7 +90,7 @@ export default defineComponent({
             font-size: 10px;
             color: #392d19;
             line-height: 16px;
-            background: #ffffff66;
+            background: var(--ion-color-step-0)66;
             border-radius: 2px;
             padding: 0 2px;
         }
@@ -109,12 +109,12 @@ export default defineComponent({
         .val {
             font-size: 13px;
             font-weight: bold;
-            color: #000000;
+            color: var(--ion-color-light-contrast);
             line-height: 24px;
         }
         .name {
             font-size: 11px;
-            color: rgba(0, 0, 0, 0.6);
+            color: rgba(var(--ion-color-light-contrast-rgb), 0.6);
             line-height: 17px;
         }
 

src/components/Record.vue

@@ -116,13 +116,13 @@ export default {
         &:first-child {
             font-size: 24px;
             font-weight: bold;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 28px;
         }
         &:last-child {
             font-size: 12px;
             font-weight: bold;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 17px;
             margin-left: 4px;
         }
@@ -141,7 +141,7 @@ export default {
         .val {
             font-size: 14px;
             font-weight: bold;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 20px;
         }
 

src/components/RecordOrder.vue

@@ -96,12 +96,12 @@ export default {
         margin-left: 10px;
         .text1 {
             font-size: 14px;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 20px;
         }
         .text2 {
             font-size: 12px;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 17px;
             margin-top: 5px;
         }
@@ -131,7 +131,7 @@ export default {
     padding: 15px 0 0;
     font-size: 14px;
     font-weight: bold;
-    color: rgba(0, 0, 0, 1);
+    color: rgba(var(--ion-color-light-contrast-rgb), 1);
     line-height: 20px;
     span {
         margin-right: 20px;

src/components/StatisticsOrder.vue

@@ -85,7 +85,7 @@ export default {
         align-items: center;
         span {
             font-size: 14px;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 20px;
             margin-left: 6px;
         }
@@ -106,12 +106,12 @@ export default {
         margin-left: 10px;
         .text1 {
             font-size: 14px;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 20px;
         }
         .text2 {
             font-size: 12px;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 17px;
             margin-top: 5px;
         }

src/styles/main.less

@@ -15,7 +15,7 @@
     --van-empty-description-margin-top: 16px;
 }
 ion-back-button {
-    --ion-color-primary: #000;
+    --color: var(--van-primary-color);
 }
 
 ion-content {
@@ -36,6 +36,7 @@ ion-toast.error-toast {
 
 ion-toolbar {
     --border-style: none;
+    --background: var(--ion-color-step-0);
 }
 ion-refresher {
     --color: var(--ion-color-step-400);

src/views/BalanceRecordPage.vue

@@ -180,7 +180,7 @@ ion-modal#picker {
     --min-width: calc(100vw - 80px);
     --height: fit-content;
     --border-radius: 6px;
-    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+    --box-shadow: 0 28px 48px rgba(var(--ion-color-light-contrast-rgb), 0.4);
 }
 ion-datetime {
     color: var(--ion-text-color);

src/views/ChangeTextPage.vue

@@ -109,8 +109,8 @@ export default {
 }
 
 :deep(.van-cell) {
-    --van-field-label-color: #000000;
-    --van-cell-value-color: #000000;
+    --van-field-label-color: var(--ion-color-light-contrast);
+    --van-cell-value-color: var(--ion-color-light-contrast);
     --van-field-label-width: 50px;
     --van-cell-vertical-padding: 18px;
     --van-cell-horizontal-padding: 15px;

src/views/CommissionPage.vue

@@ -111,7 +111,7 @@ export default {
 .cell-title {
     font-size: 14px;
     font-weight: bold;
-    color: #000000;
+    color: var(--ion-color-light-contrast);
 }
 .cell-value {
     font-size: 16px;
@@ -132,7 +132,7 @@ export default {
 
     .tips-title {
         font-size: 14px;
-        color: rgba(0, 0, 0, 1);
+        color: rgba(var(--ion-color-light-contrast-rgb), 1);
         line-height: 20px;
     }
 

src/views/DistributionPage.vue

@@ -188,7 +188,7 @@ export default {
 
 .content {
     background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
+    box-shadow: 0px 4px 8px 0px rgba(var(--ion-color-light-contrast-rgb), 0.04);
     border-radius: 4px;
     margin: 0 15px;
     padding: 0 30px;
@@ -248,7 +248,7 @@ export default {
         width: calc((100% - 15px) / 2);
         height: 80px;
         background: rgba(255, 255, 255, 1);
-        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
+        box-shadow: 0px 4px 8px 0px rgba(var(--ion-color-light-contrast-rgb), 0.04);
         border-radius: 4px;
         justify-content: center;
         img {
@@ -283,7 +283,7 @@ export default {
 
     .menu-title {
         font-size: 14px;
-        color: rgba(0, 0, 0, 1);
+        color: rgba(var(--ion-color-light-contrast-rgb), 1);
     }
 
     .menu-not-val {

src/views/HomePage.vue

@@ -270,15 +270,15 @@ const getStatus = info => {
         .text1 {
             font-size: 20px;
             font-weight: bold;
-            color: #ffffff;
+            color: var(--ion-color-step-0);
             line-height: 28px;
-            text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
+            text-shadow: 0px 0px 4px rgba(var(--ion-color-light-contrast-rgb), 0.5);
         }
         .text2 {
             font-size: 12px;
-            color: #ffffff;
+            color: var(--ion-color-step-0);
             line-height: 17px;
-            text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
+            text-shadow: 0px 0px 4px rgba(var(--ion-color-light-contrast-rgb), 0.5);
             margin-top: 2px;
             margin-bottom: 15px;
         }
@@ -307,7 +307,7 @@ const getStatus = info => {
     .driver {
         width: 1px;
         height: 10px;
-        background: rgba(0, 0, 0, 0.2);
+        background: rgba(var(--ion-color-light-contrast-rgb), 0.2);
         margin: 0 8px 0 9px;
     }
 }
@@ -345,7 +345,7 @@ const getStatus = info => {
     .f();
     padding: 2px 6px;
     background: var(--green);
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
+    box-shadow: 0px 2px 4px 0px rgba(var(--ion-color-light-contrast-rgb), 0.3);
     border-radius: 4px;
     position: absolute;
     top: 18px;
@@ -356,7 +356,7 @@ const getStatus = info => {
     }
     span {
         font-size: 12px;
-        color: #ffffff;
+        color: var(--ion-color-step-0);
         line-height: 22px;
         margin-left: 6px;
     }

src/views/LoginPage.vue

@@ -141,7 +141,7 @@ ion-back-button {
     .title {
         font-size: 24px;
         font-weight: bold;
-        color: #000000;
+        color: var(--ion-color-light-contrast);
         line-height: 34px;
         padding-bottom: 30px;
     }
@@ -151,7 +151,7 @@ ion-back-button {
         align-items: flex-start;
         --van-cell-vertical-padding: 10px;
         --van-cell-horizontal-padding: 0;
-        --van-field-placeholder-text-color: #939599;
+        --van-field-placeholder-text-color: var(--ion-color-step-400);
         --van-padding-base: 10px;
 
         .van-field__left-icon {
@@ -170,7 +170,7 @@ ion-back-button {
 }
 
 .xieyi {
-    --van-checkbox-label-color: #939599;
+    --van-checkbox-label-color: var(--ion-color-step-400);
     margin-top: 12px !important;
     .rule {
         color: #a108ff;
@@ -207,7 +207,7 @@ ion-back-button {
     padding-top: 20px;
     .btn-left {
         font-size: 12px;
-        color: #939599;
+        color: var(--ion-color-step-400);
         line-height: 24px;
         span {
             color: #a108ff;
@@ -216,7 +216,7 @@ ion-back-button {
 
     .btn-right {
         font-size: 12px;
-        color: #000000;
+        color: var(--ion-color-light-contrast);
         line-height: 24px;
         text-decoration: underline;
         font-weight: bold;

src/views/LoginPhonePage.vue

@@ -156,7 +156,7 @@ ion-back-button {
     .title {
         font-size: 24px;
         font-weight: bold;
-        color: #000000;
+        color: var(--ion-color-light-contrast);
         line-height: 34px;
         padding-bottom: 30px;
     }
@@ -166,7 +166,7 @@ ion-back-button {
         align-items: flex-start;
         --van-cell-vertical-padding: 10px;
         --van-cell-horizontal-padding: 0;
-        --van-field-placeholder-text-color: #939599;
+        --van-field-placeholder-text-color: var(--ion-color-step-400);
         --van-padding-base: 10px;
         --van-button-small-height: 24px;
 
@@ -189,7 +189,7 @@ ion-back-button {
 }
 
 .xieyi {
-    --van-checkbox-label-color: #939599;
+    --van-checkbox-label-color: var(--ion-color-step-400);
     margin-top: 12px !important;
     .rule {
         color: #a108ff;
@@ -226,7 +226,7 @@ ion-back-button {
     padding-top: 20px;
     .btn-left {
         font-size: 12px;
-        color: #939599;
+        color: var(--ion-color-step-400);
         line-height: 24px;
         span {
             color: #a108ff;
@@ -235,7 +235,7 @@ ion-back-button {
 
     .btn-right {
         font-size: 12px;
-        color: #000000;
+        color: var(--ion-color-light-contrast);
         line-height: 24px;
         text-decoration: underline;
         font-weight: bold;

src/views/MinePage.vue

@@ -152,7 +152,7 @@ const goSetting = () => {
     .name {
         font-size: 20px;
         font-weight: bold;
-        color: #ffffff;
+        color: var(--ion-color-step-0);
         line-height: 28px;
         flex-grow: 1;
         margin: 0 12px;
@@ -160,8 +160,8 @@ const goSetting = () => {
 }
 
 .order-card {
-    background: #ffffff;
-    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
+    background: var(--ion-color-step-0);
+    box-shadow: 0px 4px 8px 0px rgba(var(--ion-color-light-contrast-rgb), 0.04);
     border-radius: 4px;
     position: relative;
     z-index: 1;
@@ -177,7 +177,7 @@ const goSetting = () => {
         .text1 {
             font-size: 14px;
             font-weight: bold;
-            color: #000000;
+            color: var(--ion-color-light-contrast);
             line-height: 24px;
             flex-grow: 1;
         }

src/views/OrderDetailPage.vue

@@ -500,7 +500,7 @@ export default {
         left: 0;
         right: 0;
         height: 110px;
-        background: linear-gradient(360deg, var(--ion-background-color) 0%, rgba(0, 0, 0, 0) 100%);
+        background: linear-gradient(360deg, var(--ion-background-color) 0%, rgba(var(--ion-color-light-contrast-rgb), 0) 100%);
     }
 }
 .top {
@@ -540,7 +540,7 @@ export default {
 
     .addresss-content {
         font-size: 14px;
-        color: rgba(0, 0, 0, 1);
+        color: rgba(var(--ion-color-light-contrast-rgb), 1);
         line-height: 20px;
         margin-left: 10px;
     }
@@ -564,7 +564,7 @@ export default {
             min-width: 0;
             .text1 {
                 font-size: 14px;
-                color: rgba(0, 0, 0, 1);
+                color: rgba(var(--ion-color-light-contrast-rgb), 1);
                 line-height: 20px;
                 text-overflow: ellipsis;
                 white-space: nowrap;
@@ -591,7 +591,7 @@ export default {
                 .price {
                     font-size: 14px;
                     font-weight: bold;
-                    color: rgba(0, 0, 0, 1);
+                    color: rgba(var(--ion-color-light-contrast-rgb), 1);
                     line-height: 20px;
                 }
 
@@ -622,7 +622,7 @@ export default {
 
         .val {
             font-size: 13px;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 18px;
         }
     }
@@ -645,7 +645,7 @@ export default {
         }
         .val {
             font-size: 13px;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 18px;
 
             &.price {
@@ -727,7 +727,7 @@ ion-backdrop {
         font-size: 16px;
         font-weight: bold;
         text-align: center;
-        color: rgba(0, 0, 0, 1);
+        color: rgba(var(--ion-color-light-contrast-rgb), 1);
         line-height: 22px;
     }
 
@@ -739,7 +739,7 @@ ion-backdrop {
         .name {
             font-size: 14px;
             font-weight: bold;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 25px;
             min-width: 82px;
         }
@@ -747,7 +747,7 @@ ion-backdrop {
         .val {
             font-size: 14px;
             font-weight: bold;
-            color: rgba(0, 0, 0, 1);
+            color: rgba(var(--ion-color-light-contrast-rgb), 1);
             line-height: 20px;
 
             &.bold {
@@ -778,6 +778,6 @@ ion-modal#delegate {
     --min-width: 250px;
     --height: fit-content;
     --border-radius: 6px;
-    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+    --box-shadow: 0 28px 48px rgba(var(--ion-color-light-contrast-rgb), 0.4);
 }
 </style>

src/views/ProductDetailPage.vue

@@ -146,7 +146,7 @@ onMounted(() => {
             }
             .name {
                 font-size: 12px;
-                color: rgba(var(--ion-color-light-contrast-rgb), 0.6);
+                color: var(--ion-color-step-400);
                 line-height: 17px;
             }
 

src/views/ProductListPage.vue

@@ -1,13 +1,13 @@
 <template>
     <ion-page>
         <ion-header>
-            <ion-toolbar class="head">
+            <ion-toolbar>
                 <ion-buttons slot="start">
                     <ion-back-button default-href="#" text="" @click="$router.back()"></ion-back-button>
                 </ion-buttons>
                 <ion-title>{{ batchInfo.name }}</ion-title>
                 <ion-buttons slot="end" @click="$router.push({ name: 'productSearch', query: { batchId } })">
-                    <img class="search" src="../assets/search.png" alt="" />
+                    <ion-icon slot="icon-only" :icon="searchOutline"></ion-icon>
                 </ion-buttons>
             </ion-toolbar>
         </ion-header>
@@ -39,6 +39,7 @@ import { ref, getCurrentInstance, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import useList from '../plugins/list'
 import { isAfter, isBefore, parse, getYear, getMonth, getDate } from 'date-fns'
+import { searchOutline } from 'ionicons/icons'
 
 const route = useRoute()
 const {
@@ -88,25 +89,10 @@ onMounted(() => {
 </script>
 
 <style lang="less" scoped>
-.head {
-    height: 50px;
-    background-color: var(--ion-color-dark-contrast);
-    .f();
-    padding: 0;
-    font-size: 16px;
-    .text {
-        flex-grow: 1;
-    }
-    .search {
-        width: 24px;
-        height: 24px;
-    }
-}
-
 .header-title {
     font-size: 16px;
     font-weight: bold;
-    color: #000000;
+    color: var(--ion-color-light-contrast);
     line-height: 24px;
 }
 
@@ -114,7 +100,7 @@ onMounted(() => {
     padding: 12px 0;
     .product {
         margin: 0 16px 12px;
-        background: #ffffff;
+        background: var(--ion-color-step-0);
         border-radius: 4px;
     }
 }
@@ -130,7 +116,7 @@ onMounted(() => {
     }
     span {
         font-size: 12px;
-        color: #ffffff;
+        color: var(--ion-color-step-0);
         line-height: 22px;
         margin-left: 6px;
     }

src/views/ProductSearchPage.vue

@@ -8,19 +8,19 @@
                 <ion-title>{{ batchInfo.name }}</ion-title>
             </ion-toolbar>
         </ion-header>
-        <div class="search">
-            <van-search v-model="search" show-action placeholder="请输入搜索关键词" @search="getSearch">
-                <template #left-icon>
-                    <img class="search-icon" src="../assets/nav_icon_sousuo.png" alt="" />
-                </template>
-
-                <template #action>
-                    <div v-if="!isSearch" @click="getSearch(search)">搜索</div>
-                    <div v-else @click="onCancel">取消</div>
-                </template>
-            </van-search>
-        </div>
         <ion-content>
+            <div class="search">
+                <van-search v-model="search" show-action placeholder="请输入搜索关键词" @search="getSearch">
+                    <template #left-icon>
+                        <img class="search-icon" src="../assets/nav_icon_sousuo.png" alt="" />
+                    </template>
+
+                    <template #action>
+                        <div v-if="!isSearch" @click="getSearch(search)">搜索</div>
+                        <div v-else @click="onCancel">取消</div>
+                    </template>
+                </van-search>
+            </div>
             <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
                 <div class="product" v-for="(item, index) in list" :key="index">
                     <product-info list v-model:info="list[index]"></product-info>
@@ -78,21 +78,10 @@ const status = computed(() => {
 </script>
 
 <style lang="less" scoped>
-.head {
-    height: 50px;
-    --background: #fff;
-    .f();
-    padding: 0;
-    font-size: 16px;
-    .text {
-        flex-grow: 1;
-    }
-}
-
 .header-title {
     font-size: 16px;
     font-weight: bold;
-    color: #000000;
+    color: var(--ion-color-light-contrast);
     line-height: 24px;
 }
 
@@ -100,7 +89,7 @@ const status = computed(() => {
     padding: 12px 0;
     .product {
         margin: 0 16px 12px;
-        background: #ffffff;
+        background: var(--ion-color-step-0);
         border-radius: 4px;
     }
 }
@@ -116,7 +105,7 @@ const status = computed(() => {
     }
     span {
         font-size: 12px;
-        color: #ffffff;
+        color: var(--ion-color-step-0);
         line-height: 22px;
         margin-left: 6px;
     }
@@ -128,10 +117,10 @@ const status = computed(() => {
 
 .search {
     :deep(.van-search) {
-        --van-search-left-icon-color: #c8c9cc;
-        --van-search-content-background-color: #f6f6f6;
+        --van-search-left-icon-color: var(--ion-color-step-200);
+        --van-search-content-background-color: var(--ion-color-step-50);
         --van-search-input-height: 36px;
-        --van-text-color: #c8c9cc;
+        --van-text-color: var(--ion-color-step-200);
         --van-search-action-padding: 0 16px;
         --van-search-action-text-color: #8c7af8;
         --van-padding-sm: 4px;

src/views/RegisterPage.vue

@@ -208,7 +208,7 @@ ion-back-button {
     .title {
         font-size: 24px;
         font-weight: bold;
-        color: #000000;
+        color: var(--ion-color-light-contrast);
         line-height: 34px;
         padding-bottom: 30px;
     }
@@ -218,7 +218,7 @@ ion-back-button {
         align-items: flex-start;
         --van-cell-vertical-padding: 10px;
         --van-cell-horizontal-padding: 0;
-        --van-field-placeholder-text-color: #939599;
+        --van-field-placeholder-text-color: var(--ion-color-step-400);
         --van-padding-base: 10px;
         --van-button-small-height: 24px;
 
@@ -241,7 +241,7 @@ ion-back-button {
 }
 
 .xieyi {
-    --van-checkbox-label-color: #939599;
+    --van-checkbox-label-color: var(--ion-color-step-400);
     margin-top: 12px !important;
     .rule {
         color: #a108ff;
@@ -278,7 +278,7 @@ ion-back-button {
     padding-top: 20px;
     .btn-left {
         font-size: 12px;
-        color: #939599;
+        color: var(--ion-color-step-400);
         line-height: 24px;
         span {
             color: #a108ff;
@@ -287,7 +287,7 @@ ion-back-button {
 
     .btn-right {
         font-size: 12px;
-        color: #000000;
+        color: var(--ion-color-light-contrast);
         line-height: 24px;
         font-weight: bold;
     }