feat:修改暗黑模式的样式

src/components/AddRules/src/AddRules.vue

@@ -526,7 +526,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -562,7 +562,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -590,7 +590,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -626,7 +626,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -662,7 +662,7 @@ defineExpose({
           <el-collapse-item name="NotificationFrequency">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsTwoActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -706,7 +706,7 @@ defineExpose({
           <el-collapse-item name="NotificationMethod">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsThreeActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -938,7 +938,7 @@ defineExpose({
   padding: 0 !important;
 }
 :deep(.el-collapse-item__header):hover {
-  background-color: #fff !important;
+  background-color: var(--color-system-color-bg) !important;
   border: none !important;
 }
 :deep(.el-collapse-item__arrow) {
@@ -964,26 +964,26 @@ defineExpose({
   transform: rotate(0);
 }
 :deep(.Ocean_collapse .el-collapse-item__header) {
-  background-color: #fff !important;
+  background-color: var(--color-system-color-bg) !important;
   padding: 0 8px !important;
   height: 40px !important;
 }
 :deep(.Ocean_collapse .el-collapse-item) {
-  background-color: var(--color-dialog-header-bg);
+  background-color: var(--color-system-color-bg);
   border-radius: 12px;
 }
 :deep(.Ocean_collapse .el-collapse-item__wrap) {
   padding: 0 8px !important;
 }
 :deep(.Ocean_collapse .el-collapse-item__header.is-active) {
-  background-color: var(--color-dialog-header-bg) !important;
+  background-color: var(--color-system-color-bg) !important;
 }
 :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
   color: var(--color-neutral-1);
 }
 .Rules_buttom {
   padding: 8px;
-  border-top: 1px solid var(--color-border-1);
+  border-top: 1px solid var(--color-system-border-1);
 }
 .rules_button {
   width: 100px;
@@ -1007,7 +1007,7 @@ defineExpose({
   align-items: center;
 }
 :deep(header.el-dialog__header) {
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 :deep(footer.el-dialog__footer) {
   border-top: none;

src/components/AddRules/src/components/AddedrluesTag.vue

@@ -58,6 +58,7 @@ const handleClose = (tag: any) => {
   padding: 8px !important;
   max-height: 400px;
   overflow-y: scroll;
+  background-color: var(--color-system-card-bg);
 }
 :deep(.el-tag .el-tag__close svg) {
   width: 16px !important;

src/components/AddRules/src/components/DelayedType.vue

@@ -228,13 +228,13 @@ defineExpose({
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {
@@ -264,7 +264,7 @@ defineExpose({
 }
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   padding: 5px 10px;
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 .delayedTitle {
   color: var(--color-neutral-2);
@@ -276,4 +276,10 @@ defineExpose({
 .oceanCheckbox {
   margin-bottom: 8px;
 }
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-system-border-1) inset;
+}
+:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
+  box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
+}
 </style>

src/components/AddRules/src/components/ETDShipments.vue

@@ -273,13 +273,13 @@ const clampedETAValue = computed(() => {
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {
@@ -292,6 +292,9 @@ const clampedETAValue = computed(() => {
 :deep(.el-radio) {
   border: none !important;
 }
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
 .delayedType {
   align-items: start;
   height: fit-content;
@@ -312,7 +315,7 @@ const clampedETAValue = computed(() => {
 }
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   padding: 5px 10px;
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 .delayedIcon {
   margin: 0 8px;
@@ -326,7 +329,8 @@ const clampedETAValue = computed(() => {
 :deep(.el-radio) {
   display: flex;
   min-height: 32px;
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-system-body-bg);
   margin-bottom: 4px;
   border-radius: 6px;
   padding: 0 8px;
@@ -338,4 +342,10 @@ const clampedETAValue = computed(() => {
 :deep(.el-radio__input.is-checked + .el-radio__label) {
   color: var(--color-neutral-1);
 }
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-system-border-1) inset;
+}
+:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
+  box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
+}
 </style>

src/components/AddRules/src/components/NotiFrequency.vue

@@ -362,7 +362,8 @@ defineExpose({
 :deep(.el-radio) {
   display: flex;
   min-height: 32px;
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-system-body-bg);
   margin-bottom: 4px;
   border-radius: 6px;
   padding: 0 8px;
@@ -374,6 +375,9 @@ defineExpose({
 :deep(.el-radio__input.is-checked + .el-radio__label) {
   color: var(--color-neutral-1);
 }
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
 .Daily {
   margin: 0 0 9px 0;
   display: flex;

src/components/AddRules/src/components/NotiMethods.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
+import Light_methods from '../images/illustration_system massage@2x.png'
+import Dark_methods from '../images/illustration_system massage_darkmode@2x.png'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
 
 const checkMethodList = ref()
 checkMethodList.value = []
@@ -7,6 +12,9 @@ let savesubscribeobj: any = {}
 const props = defineProps({
   MethodsData: Object
 })
+const MethodsImg = computed(() => {
+  return themeStore.theme === 'dark' ? Dark_methods : Light_methods
+})
 
 const methods_data = ref(props.MethodsData)
 watch(
@@ -68,7 +76,7 @@ const user_type = localStorage.getItem('user_type')
         <el-checkbox class="methodcheckbox" value="By System Message">
           <div>By System Message</div>
           <div class="methos_image">
-            <img src="../images/illustration_system massage@2x.png" />
+            <img :src="MethodsImg" />
           </div>
         </el-checkbox>
       </el-checkbox-group>
@@ -82,7 +90,7 @@ const user_type = localStorage.getItem('user_type')
   height: fit-content;
   width: 49%;
   margin-right: 5px;
-  background-color: var(--color-dialog-header-bg);
+  background-color: var(--color-system-notification-bg);
   border-radius: 6px;
   padding: 11px 0 0 13px;
 }

src/components/AddRules/src/components/RulesShipments.vue

@@ -68,13 +68,13 @@ const CheckChange = (val: any) => {
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {

src/components/AddRules/src/components/ShipmentRange.vue

@@ -193,4 +193,7 @@ defineExpose({
 :deep(.el-radio) {
   background-color: var(--color-drawer-body-bg);
 }
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
 </style>

src/components/CreateAddRules/src/CreateAddRules.vue

@@ -753,7 +753,7 @@ defineExpose({
           <el-collapse-item name="ShipmentRange">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFourActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -803,7 +803,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -839,7 +839,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -867,7 +867,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -903,7 +903,7 @@ defineExpose({
           <el-collapse-item name="SelectMilestone">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -939,7 +939,7 @@ defineExpose({
           <el-collapse-item name="NotificationFrequency">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsTwoActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -983,7 +983,7 @@ defineExpose({
           <el-collapse-item name="NotificationMethod">
             <template #title>
               <div class="Rules_Title">
-                <span class="iconfont_icon">
+                <span class="iconfont_icon icon_dark">
                   <svg class="iconfont" aria-hidden="true">
                     <use
                       :xlink:href="IsThreeActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
@@ -1266,7 +1266,7 @@ defineExpose({
   padding: 0 !important;
 }
 :deep(.el-collapse-item__header):hover {
-  background-color: #fff !important;
+  background-color: var(--color-system-color-bg) !important;
   border: none !important;
 }
 :deep(.el-collapse-item__arrow) {
@@ -1292,26 +1292,26 @@ defineExpose({
   transform: rotate(0);
 }
 :deep(.Ocean_collapse .el-collapse-item__header) {
-  background-color: #fff !important;
+  background-color: var(--color-system-color-bg) !important;
   padding: 0 8px !important;
   height: 40px !important;
 }
 :deep(.Ocean_collapse .el-collapse-item) {
-  background-color: var(--color-dialog-header-bg);
+  background-color: var(--color-system-color-bg);
   border-radius: 12px;
 }
 :deep(.Ocean_collapse .el-collapse-item__wrap) {
   padding: 0 8px !important;
 }
 :deep(.Ocean_collapse .el-collapse-item__header.is-active) {
-  background-color: var(--color-dialog-header-bg) !important;
+  background-color: var(--color-system-color-bg) !important;
 }
 :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
   color: var(--color-neutral-1);
 }
 .Rules_buttom {
   padding: 8px;
-  border-top: 1px solid var(--color-border-1);
+  border-top: 1px solid var(--color-system-border-1);
 }
 .rules_button {
   width: 100px;
@@ -1335,7 +1335,7 @@ defineExpose({
   align-items: center;
 }
 :deep(header.el-dialog__header) {
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 :deep(footer.el-dialog__footer) {
   border-top: none;
@@ -1343,24 +1343,4 @@ defineExpose({
 :deep(.el-collapse) {
   margin-right: 8px;
 }
-
-:deep(.el-radio-group) {
-  display: block;
-}
-:deep(.el-radio) {
-  display: flex;
-  min-height: 32px;
-  border: 1px solid var(--color-select-border);
-  margin-bottom: 4px;
-  border-radius: 6px;
-  padding: 0 8px;
-  margin-right: 0;
-  height: fit-content;
-  line-height: 32px;
-  align-items: start;
-  align-items: start;
-}
-:deep(.el-radio__input.is-checked + .el-radio__label) {
-  color: var(--color-neutral-1);
-}
 </style>

src/components/CreateAddRules/src/components/AddedrluesTag.vue

@@ -58,6 +58,7 @@ const handleClose = (tag: any) => {
   padding: 8px !important;
   max-height: 400px;
   overflow-y: scroll;
+  background-color: var(--color-system-card-bg);
 }
 :deep(.el-tag .el-tag__close svg) {
   width: 16px !important;

src/components/CreateAddRules/src/components/DelayedType.vue

@@ -228,13 +228,13 @@ defineExpose({
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {
@@ -264,7 +264,7 @@ defineExpose({
 }
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   padding: 5px 10px;
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 .delayedTitle {
   color: var(--color-neutral-2);
@@ -279,4 +279,10 @@ defineExpose({
 :deep(.el-radio) {
   align-items: center !important;
 }
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-system-border-1) inset;
+}
+:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
+  box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
+}
 </style>

src/components/CreateAddRules/src/components/ETDShipments.vue

@@ -273,13 +273,13 @@ const clampedETAValue = computed(() => {
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {
@@ -292,6 +292,9 @@ const clampedETAValue = computed(() => {
 :deep(.el-radio) {
   border: none !important;
 }
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
 .delayedType {
   align-items: start;
   height: fit-content;
@@ -312,7 +315,7 @@ const clampedETAValue = computed(() => {
 }
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   padding: 5px 10px;
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 .delayedIcon {
   margin: 0 8px;
@@ -326,7 +329,8 @@ const clampedETAValue = computed(() => {
 :deep(.el-radio) {
   display: flex;
   min-height: 32px;
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-system-body-bg);
   margin-bottom: 4px;
   border-radius: 6px;
   padding: 0 8px;
@@ -338,4 +342,10 @@ const clampedETAValue = computed(() => {
 :deep(.el-radio__input.is-checked + .el-radio__label) {
   color: var(--color-neutral-1);
 }
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-system-border-1) inset;
+}
+:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
+  box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
+}
 </style>

src/components/CreateAddRules/src/components/NotiFrequency.vue

@@ -362,7 +362,8 @@ defineExpose({
 :deep(.el-radio) {
   display: flex;
   min-height: 32px;
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-system-body-bg);
   margin-bottom: 4px;
   border-radius: 6px;
   padding: 0 8px;
@@ -371,6 +372,9 @@ defineExpose({
   line-height: 32px;
   align-items: start;
 }
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
 :deep(.el-radio__input.is-checked + .el-radio__label) {
   color: var(--color-neutral-1);
 }

src/components/CreateAddRules/src/components/NotiMethods.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import Light_methods from '../images/illustration_system massage@2x.png'
+import Dark_methods from '../images/illustration_system massage_darkmode@2x.png'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
 
 const checkMethodList = ref()
 checkMethodList.value = []
@@ -7,6 +12,9 @@ let savesubscribeobj: any = {}
 const props = defineProps({
   MethodsData: Object
 })
+const MethodsImg = computed(() => {
+  return themeStore.theme === 'dark' ? Dark_methods : Light_methods
+})
 
 const methods_data = ref(props.MethodsData)
 watch(
@@ -68,7 +76,7 @@ const user_type = localStorage.getItem('user_type')
         <el-checkbox class="methodcheckbox" value="By System Message">
           <div>By System Message</div>
           <div class="methos_image">
-            <img src="../images/illustration_system massage@2x.png" />
+            <img :src="MethodsImg" />
           </div>
         </el-checkbox>
       </el-checkbox-group>
@@ -82,7 +90,7 @@ const user_type = localStorage.getItem('user_type')
   height: fit-content;
   width: 49%;
   margin-right: 5px;
-  background-color: var(--color-dialog-header-bg);
+  background-color: var(--color-system-notification-bg);
   border-radius: 6px;
   padding: 11px 0 0 13px;
 }

src/components/CreateAddRules/src/components/RulesShipments.vue

@@ -66,13 +66,13 @@ const CheckChange = (val: any) => {
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {

src/components/CreateAddRules/src/components/ShipmentRange.vue

@@ -171,13 +171,13 @@ defineExpose({
 
 <style lang="scss" scoped>
 :deep(.el-checkbox-group) {
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 5px;
 }
 :deep(.el-checkbox) {
   width: 100%;
-  background-color: var(--color-drawer-body-bg);
-  border-bottom: 1px solid var(--color-select-border);
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
   padding: 8px;
 }
 :deep(.el-checkbox:first-child) {
@@ -210,9 +210,9 @@ defineExpose({
 }
 .Days {
   width: 64px;
-  border: 1px solid var(--color-select-border);
+  border: 1px solid var(--color-system-border);
   border-radius: 0 6px 6px 0;
-  background-color: var(--color-drawer-body-bg);
+  background-color: var(--color-system-body-bg);
   border-left: 0;
   display: flex;
   align-items: center;
@@ -220,8 +220,32 @@ defineExpose({
   opacity: 0.8;
   height: 28px;
 }
+:deep(.el-radio-group) {
+  display: block;
+}
 :deep(.el-radio) {
-  background-color: var(--color-drawer-body-bg);
-  align-items: center !important;
+  display: flex;
+  min-height: 32px;
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-system-body-bg);
+  margin-bottom: 4px;
+  border-radius: 6px;
+  padding: 0 8px;
+  margin-right: 0;
+  height: fit-content;
+  line-height: 32px;
+  align-items: center;
+}
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
+:deep(.el-radio__input.is-checked + .el-radio__label) {
+  color: var(--color-neutral-1);
+}
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--color-system-border-1) inset;
+}
+:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
+  box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
 }
 </style>

src/styles/elementui.scss

@@ -417,11 +417,11 @@ div .el-dropdown__popper .el-dropdown__list {
   user-select: none;
 }
 div .el-checkbox__inner:hover {
-  border-color: var(--color-select-border);
+  border-color: var(--color-system-checkbox-border);
 }
 div .el-checkbox__inner {
-  border-color: var(--color-select-border);
-  background-color: #fff;
+  border: 1px solid var(--color-system-checkbox-border);
+  background-color: transparent;
 }
 div .el-checkbox__input.is-checked .el-checkbox__inner:after {
   border-color: var(--color-mode);

src/styles/theme-g.scss

@@ -69,4 +69,12 @@
   --input-disabled-text-color: #66696f;
   --color-recent-name: rgba(240, 241, 243, 0.1);
   --color-disabled-bg: #2b2b2c;
+
+  --color-system-color-bg:#3f434a;
+  --color-system-border: #3f434a;
+  --color-system-checkbox-border: #3f434a;
+  --color-system-body-bg:#30353c;
+  --color-system-notification-bg:#343a43;
+  --color-system-card-bg:#2B2F36;
+  --color-system-border-1: #3F434A;
 }

src/styles/theme.scss

@@ -255,6 +255,15 @@
   --color-upload-file-bg: #fef8f2;
   --color-upload-file-color: #b5b9bf;
   --color-upload-file-border-bg: #f5b279;
+
+  --color-system-color-bg: #f6f8fa;
+  --color-system-border: #eaebed;
+  --color-system-checkbox-bg: #fff;
+  --color-system-checkbox-border: #eaebed;
+  --color-system-body-bg:#fff;
+  --color-system-notification-bg: #f6f8fa;
+  --color-system-card-bg:#fff;
+  --color-system-border-1: #e8eaee;
 }
 
 :root.dark {
@@ -300,7 +309,7 @@
   --color-user-config-title-bottom-border: #3f434a;
   --color-container-status-node-bg: #3e454f;
 
-  --color-btn-blue-bg: rgba(255, 255, 255, 0);
+  --color-btn-blue-bg: rgba(248, 249, 253, 0.10);
 
   --color-el-btn-pain-theme-border: #ed6d00;
   --color-el-btn-pain-theme-text: #ed6d00;

src/views/SystemSettings/src/components/CreateNewrule/src/CreateNewrule.vue

@@ -55,7 +55,7 @@ onMounted(() => {
   <div class="Title">
     <div>Create New Rule</div>
     <div>
-      <el-button class="create_button" type="default" @click="CancelRulesVisible = true">
+      <el-button class="create_button" style="margin-right: 8px;" type="default" @click="CancelRulesVisible = true">
         <span class="iconfont_icon">
           <svg class="iconfont" aria-hidden="true">
             <use xlink:href="#icon-icon_return_b"></use>
@@ -256,7 +256,7 @@ onMounted(() => {
   align-items: center;
 }
 :deep(header.el-dialog__header) {
-  background-color: #fff;
+  background-color: var(--color-system-body-bg);
 }
 :deep(footer.el-dialog__footer) {
   border-top: none;