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

src/@core/components/ThemeSwitcher.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import { useTheme } from 'vuetify'
 import type { ThemeSwitcherTheme } from '@layouts/types'
+import api from '@/api'
 
 const props = defineProps<{
   themes: ThemeSwitcherTheme[]
@@ -42,6 +43,12 @@ function changeTheme() {
   const nextTheme = getNextThemeName()
   currentThemeName.value = nextTheme
   localStorage.setItem('theme', nextTheme)
+  // 保存主题到服务端
+  api.post('/user/config/theme', nextTheme, {
+    headers: {
+      'Content-Type': 'text/plain',
+    },
+  })
 }
 
 // Apply saved theme on page load

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() {
+async function setTheme() {
-  const { global: globalTheme } = useTheme()
+  let themeValue = await fetchThemeConfig() || localStorage.getItem('theme') || 'light'
-  let theme = localStorage.getItem('theme') || 'light'
+  const autoTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  if (theme === 'auto')
+  globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
-    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  // 修改载入时背景色
-  globalTheme.name.value = theme
+  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
+  localStorage.setItem('theme', themeValue)
 }
 
 // SSE持续接收消息

src/pages/login.vue

@@ -6,6 +6,9 @@ import { requiredValidator } from '@/@validators'
 import api from '@/api'
 import router from '@/router'
 import logo from '@images/logo.png'
+import { useTheme } from 'vuetify'
+
+const { global: globalTheme } = useTheme()
 
 // Vuex Store
 const store = useStore()
@@ -85,7 +88,28 @@ async function tryLoadDashboardConfig() {
   await loadDashboardConfig()
 }
 
+// 获取用户主题配置
+async function fetchThemeConfig() {
+  const response = await api.get('/user/config/theme')
+  if (response && response.data && response.data.value) {
+    return response.data.value
+  }
+  return null
+}
+
+// 设置主题
+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)
+}
+
 async function afterLogin() {
+  // 主题配置
+  await setTheme()
   // 尝试加载用户监控面板配置（本地无配置时才加载）
   await tryLoadDashboardConfig()
   // 跳转到首页或回原始页面