主题配置保存到服务端，使各端主题一致

src/App.vue

@@ -4,17 +4,28 @@ import { useTheme } from 'vuetify'
 import api from '@/api'
 import store from './store'
 
+const { global: globalTheme } = useTheme()
 
 // 提示框
 const $toast = useToast()
 
+// 获取用户主题配置
+async function fetchThemeConfig() {
+  const response = await api.get('/user/config/theme')
+  if (response && response.data && response.data.value) {
+    return response.data.value
+  }
+  return null
+}
+
 // 设置主题
-function setTheme() {
-  const { global: globalTheme } = useTheme()
-  let theme = localStorage.getItem('theme') || 'light'
-  if (theme === 'auto')
-    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  globalTheme.name.value = theme
+async function setTheme() {
+  let themeValue = await fetchThemeConfig() || localStorage.getItem('theme') || 'light'
+  const autoTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
+  // 修改载入时背景色
+  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
+  localStorage.setItem('theme', themeValue)
 }
 
 // SSE持续接收消息