From 6f6f24a0502acaf80ee85c2a4d444d3b46c3ec30 Mon Sep 17 00:00:00 2001
From: DefectingCat <i@defect.ink>
Date: Fri, 10 Nov 2023 10:46:25 +0800
Subject: [PATCH] fix handle system theme

---
 components/pages/blog/post-card.tsx |  6 +++---
 components/pages/dark-mode-btn.tsx  | 26 +++++++++++++++++++++-----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/components/pages/blog/post-card.tsx b/components/pages/blog/post-card.tsx
index b4c2225..858198a 100644
--- a/components/pages/blog/post-card.tsx
+++ b/components/pages/blog/post-card.tsx
@@ -17,20 +17,20 @@ const PostCard = ({ post }: Props) => {
             'hover:bg-sky-100 hover:bg-opacity-50',
             // 'hover:bg-rua-gray-100 hover:bg-opacity-10',
             'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
-            'flex justify-between text-gray-800 ',
+            'flex justify-between text-gray-800',
             'mb-4 dark:text-gray-200',
             'flex-col',
           )}
         >
           <div className="flex justify-between">
-            <h2 className="mb-4  text-3xl font-semibold font-Barlow">
+            <h2 className="mb-4 text-3xl font-semibold font-Barlow">
               {post.title}
             </h2>
 
             <div className="hidden lg:block">{post.date}</div>
           </div>
 
-          <div className="flex justify-between">
+          <div className="flex justify-between text-subtext0">
             <div className="flex items-center text-sm">
               {Array.isArray(post.tags) ? (
                 post.tags.map((tag) => (
diff --git a/components/pages/dark-mode-btn.tsx b/components/pages/dark-mode-btn.tsx
index 58ed200..1dd3f03 100644
--- a/components/pages/dark-mode-btn.tsx
+++ b/components/pages/dark-mode-btn.tsx
@@ -10,17 +10,33 @@ const DarkModeBtn = () => {
   const { mounted } = useMounted();
   const { theme, setTheme } = useTheme();
   const handleTheme = (type: 'latte' | 'mocha') => () => {
+    const media = window.matchMedia(MEDIA);
+    const map = {
+      light: 'latte',
+      dark: 'mocha',
+    };
+    const system = media.matches ? 'dark' : 'light';
     setTheme(type);
+    if (map[system] === type) {
+      try {
+        window.localStorage.removeItem('rua-theme');
+      } catch (err) {}
+    }
   };
 
   const handleMediaQuery = useCallback(
     (e: MediaQueryListEvent | MediaQueryList) => {
       const isDark = e.matches;
-      if (isDark) {
-        setTheme('mocha');
-      } else {
-        setTheme('latte');
-      }
+      try {
+        const localTheme = window.localStorage.getItem('rua-theme');
+        if (localTheme) return;
+        if (isDark) {
+          setTheme('mocha');
+        } else {
+          setTheme('latte');
+        }
+        window.localStorage.removeItem('rua-theme');
+      } catch (err) {}
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],