Add files via upload

picx/src/utils/set-theme-mode.ts

@@ -0,0 +1,51 @@
+import { watch, nextTick } from 'vue'
+import { useStore } from '@/store'
+import { UserSettingsModel } from '@/common/model/user-settings.model'
+
+const setThemeMode = () => {
+  const store = useStore()
+
+  const setBodyClassName = async (theme: 'dark' | 'light') => {
+    await nextTick(() => {
+      const body = document.getElementsByTagName('html')[0]
+      if (theme === 'dark') {
+        body.classList.remove('light')
+        body.classList.add('dark')
+      } else {
+        body.classList.remove('dark')
+        body.classList.add('light')
+      }
+    })
+  }
+
+  const autoThemeModeTimeHandle = (autoLightThemeTime: string[]) => {
+    const getTimestamp = (i: number) => {
+      const D = new Date()
+      const yyyy = D.getFullYear()
+      const mm = D.getMonth() + 1
+      const dd = D.getDate()
+      return new Date(`${yyyy}/${mm}/${dd} ${autoLightThemeTime[i]}:00`).getTime()
+    }
+    const now = Date.now()
+    return getTimestamp(0) <= now && now <= getTimestamp(1)
+  }
+
+  const setThemeByConfigFn = (settings: UserSettingsModel) => {
+    const { themeMode, autoLightThemeTime } = settings
+    if (themeMode === 'auto') {
+      setBodyClassName(autoThemeModeTimeHandle(autoLightThemeTime) ? 'light' : 'dark')
+    } else {
+      setBodyClassName(themeMode)
+    }
+  }
+
+  watch(
+    (): UserSettingsModel => store.getters.getUserSettings,
+    (newValue) => {
+      setThemeByConfigFn(newValue)
+    },
+    { deep: true, immediate: true }
+  )
+}
+
+export default setThemeMode