From b7634f723e7fbc7caa685e5ef496a18a32b02545 Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Sun, 19 Mar 2023 12:03:04 +0800
Subject: [PATCH] chore: improve compatibility for upgraded packages

---
 src/components/DecisionCard/index.jsx    |  7 ++++---
 src/components/FloatingToolbar/index.jsx |  7 ++++---
 src/hooks/use-window-theme.mjs           | 19 +++++++++++++++++++
 src/popup/Popup.jsx                      |  6 ++++--
 4 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 src/hooks/use-window-theme.mjs

diff --git a/src/components/DecisionCard/index.jsx b/src/components/DecisionCard/index.jsx
index 1748050..665d650 100644
--- a/src/components/DecisionCard/index.jsx
+++ b/src/components/DecisionCard/index.jsx
@@ -14,9 +14,10 @@ function DecisionCard(props) {
   const question = props.question
 
   useEffect(() => {
-    getUserConfig()
-      .then(setConfig)
-      .then(() => setRender(true))
+    getUserConfig().then((config) => {
+      setConfig(config)
+      setRender(true)
+    })
   }, [])
 
   useEffect(() => {
diff --git a/src/components/FloatingToolbar/index.jsx b/src/components/FloatingToolbar/index.jsx
index d84e00e..43a817c 100644
--- a/src/components/FloatingToolbar/index.jsx
+++ b/src/components/FloatingToolbar/index.jsx
@@ -21,9 +21,10 @@ function FloatingToolbar(props) {
   const windowSize = useClampWindowSize([750, 1500], [0, Infinity])
 
   useEffect(() => {
-    getUserConfig()
-      .then(setConfig)
-      .then(() => setRender(true))
+    getUserConfig().then((config) => {
+      setConfig(config)
+      setRender(true)
+    })
   }, [])
 
   useEffect(() => {
diff --git a/src/hooks/use-window-theme.mjs b/src/hooks/use-window-theme.mjs
new file mode 100644
index 0000000..10f82db
--- /dev/null
+++ b/src/hooks/use-window-theme.mjs
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react'
+
+export function useWindowTheme() {
+  const [theme, setTheme] = useState(
+    window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light',
+  )
+  useEffect(() => {
+    if (!window.matchMedia) return
+    const listener = (e) => {
+      setTheme(e.matches ? 'dark' : 'light')
+    }
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', listener)
+    return () =>
+      window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', listener)
+  }, [])
+  return theme
+}
diff --git a/src/popup/Popup.jsx b/src/popup/Popup.jsx
index 68a3170..2b4eced 100644
--- a/src/popup/Popup.jsx
+++ b/src/popup/Popup.jsx
@@ -19,6 +19,7 @@ import PropTypes from 'prop-types'
 import { config as toolsConfig } from '../content-script/selection-tools'
 import wechatpay from './donation/wechatpay.jpg'
 import bugmeacoffee from './donation/bugmeacoffee.svg'
+import { useWindowTheme } from '../hooks/use-window-theme.mjs'
 
 function GeneralPart({ config, updateConfig }) {
   const [balance, setBalance] = useState(null)
@@ -388,6 +389,7 @@ function Popup() {
   const [config, setConfig] = useState(defaultConfig)
   const [currentVersion, setCurrentVersion] = useState('')
   const [latestVersion, setLatestVersion] = useState('')
+  const theme = useWindowTheme()
 
   const updateConfig = (value) => {
     setConfig({ ...config, ...value })
@@ -407,8 +409,8 @@ function Popup() {
   }, [])
 
   useEffect(() => {
-    document.documentElement.dataset.theme = config.themeMode
-  }, [config.themeMode])
+    document.documentElement.dataset.theme = config.themeMode === 'auto' ? theme : config.themeMode
+  }, [config.themeMode, theme])
 
   return (
     <div className="container">