From e61a27ba8b97ed0868c71ccaf4b3460e7c4484cf Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Mon, 22 Apr 2024 15:41:12 +0800
Subject: [PATCH] fix: follow system theme change

---
 src/contentScripts/views/App.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index c72d1974..b0da9799 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useThrottleFn, useToggle } from '@vueuse/core'
+import { usePreferredDark, useThrottleFn, useToggle } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
 import type { Ref } from 'vue'
@@ -29,10 +29,10 @@ const handleThrottledPageRefresh = useThrottleFn(() => handlePageRefresh.value?.
 const handleThrottledReachBottom = useThrottleFn(() => handleReachBottom.value?.(), 500)
 const topBarRef = ref()
 
+const isPreferredDark = usePreferredDark()
 const isDark = computed(() => {
   if (settings.value.theme === 'auto')
-    return window.matchMedia('(prefers-color-scheme: dark)').matches
-
+    return isPreferredDark.value
   return settings.value.theme === 'dark'
 })