first commit

promo-ui2/src/components/ThemeSwitch/index.ts

@@ -0,0 +1,3 @@
+import ThemeSwitch from './src/ThemeSwitch.vue'
+
+export { ThemeSwitch }

promo-ui2/src/components/ThemeSwitch/src/ThemeSwitch.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+import { ElSwitch } from 'element-plus'
+import { useIcon } from '@/hooks/web/useIcon'
+import { useDesign } from '@/hooks/web/useDesign'
+import { getCssVar } from '@/utils'
+
+const { getPrefixCls } = useDesign()
+
+const emit = defineEmits(['change'])
+
+const prefixCls = getPrefixCls('theme-switch')
+
+const Sun = useIcon({ icon: 'vi-emojione-monotone:sun', color: '#fde047' })
+
+const CrescentMoon = useIcon({ icon: 'vi-emojione-monotone:crescent-moon', color: '#fde047' })
+
+const appStore = useAppStore()
+
+// 初始化获取是否是暗黑主题
+const isDark = computed({
+  get() {
+    return appStore.getIsDark
+  },
+  set(val: boolean) {
+    appStore.setIsDark(val)
+    const color = getCssVar('--el-bg-color')
+    appStore.setMenuTheme(color)
+    appStore.setHeaderTheme(color)
+    emit('change', val)
+  }
+})
+
+// 设置switch的背景颜色
+const blackColor = 'var(--el-color-black)'
+</script>
+
+<template>
+  <ElSwitch
+    :class="prefixCls"
+    v-model="isDark"
+    inline-prompt
+    :border-color="blackColor"
+    :inactive-color="blackColor"
+    :active-color="blackColor"
+    :active-icon="Sun"
+    :inactive-icon="CrescentMoon"
+  />
+</template>
+
+<style lang="less" scoped>
+:deep(.el-switch__core .el-switch__inner .is-icon) {
+  overflow: visible;
+}
+</style>