diff --git a/src/@core/components/ThemeSwitcher.vue b/src/@core/components/ThemeSwitcher.vue
index 060e1b06..bfa746a9 100644
--- a/src/@core/components/ThemeSwitcher.vue
+++ b/src/@core/components/ThemeSwitcher.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { useTheme } from 'vuetify'
 import type { ThemeSwitcherTheme } from '@layouts/types'
 import api from '@/api'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
 
 const props = defineProps<{
   themes: ThemeSwitcherTheme[]
@@ -22,7 +23,7 @@ const {
 )
 
 function updateTheme() {
-  const autoTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
   const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
   globalTheme.name.value = theme
   savedTheme.value = theme
@@ -32,7 +33,11 @@ function updateTheme() {
 }
 
 // 监听系统主题变化
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+try {
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+} catch(e) {
+  console.error('当前设备不支持监听系统主题变化')
+}
 
 watch(
   () => currentThemeName.value,
diff --git a/src/@core/utils/index.ts b/src/@core/utils/index.ts
index 2c97f674..b91bce96 100644
--- a/src/@core/utils/index.ts
+++ b/src/@core/utils/index.ts
@@ -118,3 +118,12 @@ export function isNullOrEmptyObject(obj: any): boolean {
   // 然后判断是否为空对象
   return !!(typeof obj === 'object' && Object.keys(obj).length === 0)
 }
+
+// 判断系统配置色是否是黑暗的
+export function checkPrefersColorSchemeIsDark(): boolean {
+  try {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  } catch (e) {
+    return false
+  }
+}
diff --git a/src/App.vue b/src/App.vue
index 9b943cef..538d3ab6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@ import { useToast } from 'vue-toast-notification'
 import { useTheme } from 'vuetify'
 import api from '@/api'
 import store from './store'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
 
 const { global: globalTheme } = useTheme()
 
@@ -21,7 +22,7 @@ async function fetchThemeConfig() {
 // 设置主题
 async function setTheme() {
   let themeValue = await fetchThemeConfig() || localStorage.getItem('theme') || 'light'
-  const autoTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
   globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
   // 修改载入时背景色
   localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
diff --git a/src/pages/login.vue b/src/pages/login.vue
index 812b3871..33d5e4d7 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -7,6 +7,7 @@ import api from '@/api'
 import router from '@/router'
 import logo from '@images/logo.png'
 import { useTheme } from 'vuetify'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
 
 const { global: globalTheme } = useTheme()
 
@@ -100,7 +101,7 @@ async function fetchThemeConfig() {
 // 设置主题
 async function setTheme() {
   let themeValue = await fetchThemeConfig() || localStorage.getItem('theme') || 'light'
-  const autoTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
   globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
   // 修改载入时背景色
   localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)