chore: improve compatibility for upgraded packages

Author: josStorer

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(() => {

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(() => {

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
+}

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">