style(web): 统一后台图标与全局视觉

src/components/ThemeSwitch/src/ThemeSwitch.vue

@@ -6,6 +6,7 @@ import { useAppStore } from '@/store/modules/app'
 import { ElSwitch } from 'element-plus'
 import { useIcon } from '@/hooks/web/useIcon'
 import { useDesign } from '@/hooks/web/useDesign'
+import { AppIcons } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
 
@@ -13,18 +14,15 @@ const emit = defineEmits(['change'])
 
 const prefixCls = getPrefixCls('theme-switch')
 
-const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' })
+const Sun = useIcon({ icon: AppIcons.lightMode, color: '#fde047' })
 
-const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon', color: '#fde047' })
+const CrescentMoon = useIcon({ icon: AppIcons.darkMode, color: '#fde047' })
 
 const appStore = useAppStore()
 
 // 初始化获取是否是暗黑主题
 const isDark = ref(appStore.getIsDark)
 
-// 设置switch的背景颜色
-const blackColor = 'var(--el-color-black)'
-
 const themeChange = (val: boolean) => {
   appStore.setIsDark(val)
   emit('change', val)
@@ -36,9 +34,6 @@ const themeChange = (val: boolean) => {
     :class="prefixCls"
     v-model="isDark"
     inline-prompt
-    :border-color="blackColor"
-    :inactive-color="blackColor"
-    :active-color="blackColor"
     :active-icon="Sun"
     :inactive-icon="CrescentMoon"
     @change="themeChange"
@@ -46,7 +41,20 @@ const themeChange = (val: boolean) => {
 </template>
 
 <style lang="less" scoped>
-:deep(.el-switch__core .el-switch__inner .is-icon) {
-  overflow: visible;
+.v-theme-switch {
+  :deep(.el-switch__core .el-switch__inner .is-icon) {
+    overflow: visible;
+  }
+
+  :deep(.el-switch__core) {
+    min-width: 44px;
+    background: var(--el-fill-color-darker);
+    border-color: var(--el-text-color-secondary);
+  }
+}
+
+.v-theme-switch.is-checked :deep(.el-switch__core) {
+  background: var(--app-primary-strong) !important;
+  border-color: var(--app-primary-strong) !important;
 }
 </style>