#前端

zhou zhou

4 小时以前 fec285d150b377d004e47f0973d298b92fe4c711

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import { useSettingStore } from '@/store/modules/setting'
import { SystemThemeEnum } from '@/enums/appEnum'
import AppConfig from '@/config'
import { getDarkColor, getLightColor, setElementThemeColor } from '@/utils/ui'
import { usePreferredDark } from '@vueuse/core'
import { watch } from 'vue'
function useTheme() {
  const settingStore = useSettingStore()
  const disableTransitions = () => {
    const style = document.createElement('style')
    style.setAttribute('id', 'disable-transitions')
    style.textContent = '* { transition: none !important; }'
    document.head.appendChild(style)
  }
  const enableTransitions = () => {
    const style = document.getElementById('disable-transitions')
    if (style) {
      style.remove()
    }
  }
  const setSystemTheme = (theme, themeMode) => {
    disableTransitions()
    const el = document.getElementsByTagName('html')[0]
    const isDark = theme === SystemThemeEnum.DARK
    if (!themeMode) {
      themeMode = theme
    }
    const currentTheme = AppConfig.systemThemeStyles[theme]
    if (currentTheme) {
      el.setAttribute('class', currentTheme.className)
    }
    const primary = settingStore.systemThemeColor
    for (let i = 1; i <= 9; i++) {
      document.documentElement.style.setProperty(
        `--el-color-primary-light-${i}`,
        isDark ? `${getDarkColor(primary, i / 10)}` : `${getLightColor(primary, i / 10)}`
      )
    }
    settingStore.setGlopTheme(theme, themeMode)
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        enableTransitions()
      })
    })
  }
  const prefersDark = usePreferredDark()
  const setSystemAutoTheme = () => {
    const theme = prefersDark.value ? SystemThemeEnum.DARK : SystemThemeEnum.LIGHT
    setSystemTheme(theme, SystemThemeEnum.AUTO)
  }
  const switchThemeStyles = (theme) => {
    if (theme === SystemThemeEnum.AUTO) {
      setSystemAutoTheme()
    } else {
      setSystemTheme(theme)
    }
  }
  return {
    setSystemTheme,
    setSystemAutoTheme,
    switchThemeStyles,
    prefersDark
  }
}
function initializeTheme() {
  const settingStore = useSettingStore()
  const prefersDark = usePreferredDark()
  const applyThemeByMode = () => {
    const el = document.getElementsByTagName('html')[0]
    let actualTheme = settingStore.systemThemeType
    if (settingStore.systemThemeMode === SystemThemeEnum.AUTO) {
      actualTheme = prefersDark.value ? SystemThemeEnum.DARK : SystemThemeEnum.LIGHT
      settingStore.systemThemeType = actualTheme
    }
    const currentTheme = AppConfig.systemThemeStyles[actualTheme]
    if (currentTheme) {
      el.setAttribute('class', currentTheme.className)
    }
    setElementThemeColor(settingStore.systemThemeColor)
    document.documentElement.style.setProperty('--custom-radius', `${settingStore.customRadius}rem`)
  }
  applyThemeByMode()
  if (settingStore.systemThemeMode === SystemThemeEnum.AUTO) {
    watch(
      prefersDark,
      () => {
        if (settingStore.systemThemeMode === SystemThemeEnum.AUTO) {
          applyThemeByMode()
        }
      },
      { immediate: false }
    )
  }
}
export { initializeTheme, useTheme }