Merge pull request #232 from hmydgz/dev

✨ feat(ThemeSwitchButton): 新增在未手动设置主题时跟随系统主题的功能

Author: guansss

src/components/ThemeSwitchButton.tsx

@@ -2,6 +2,8 @@ import { Button } from '@blueprintjs/core'
 
 import { useEffect, useState } from 'react'
 
+const themeMedia = window.matchMedia('(prefers-color-scheme: light)')
+
 export const ThemeSwitchButton = () => {
   const [theme, setTheme] = useState(localStorage.getItem('theme') || '')
   const handleThemeSwitch = () => {
@@ -10,7 +12,11 @@ export const ThemeSwitchButton = () => {
     localStorage.setItem('theme', isCurrentDark ? 'light' : 'dark')
   }
   useEffect(() => {
-    if (theme == 'dark') {
+    if (!themeMedia.matches && !localStorage.getItem('theme')) {
+      handleThemeSwitch()
+      return
+    }
+    if (theme === 'dark') {
       document.body.classList.add('bp4-dark')
       document.body.classList.add('dark')
     } else {
@@ -22,6 +28,6 @@ export const ThemeSwitchButton = () => {
     <Button
       onClick={handleThemeSwitch}
       icon={theme === 'dark' ? 'moon' : 'flash'}
-    ></Button>
+    />
   )
 }