From c704949de3b26d6cceb457318f68d13be5dd658d Mon Sep 17 00:00:00 2001
From: Eave Luo <846899026@qq.com>
Date: Tue, 25 Jun 2024 09:48:47 +0800
Subject: [PATCH 1/2] fix: refreshing the page in dark mode causes github-stat
 dark mode to fail

---
 .../landing/FeaturesSection/Github.tsx        | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/landing/FeaturesSection/Github.tsx b/src/components/landing/FeaturesSection/Github.tsx
index b4c13002..9a22156b 100644
--- a/src/components/landing/FeaturesSection/Github.tsx
+++ b/src/components/landing/FeaturesSection/Github.tsx
@@ -1,8 +1,9 @@
-import Translate from '@docusaurus/Translate'
-import GitHubCalendar from 'react-github-calendar'
+import Translate from '@docusaurus/Translate';
+import GitHubCalendar from 'react-github-calendar';
 
-import { useColorMode } from '@docusaurus/theme-common'
-import { Icon } from '@iconify/react'
+import { useColorMode } from '@docusaurus/theme-common';
+import { Icon } from '@iconify/react';
+import ThemedImage from '@theme/ThemedImage';
 
 interface GithubProps {
   className?: string
@@ -11,9 +12,9 @@ interface GithubProps {
 export default function Github({ className }: GithubProps) {
   const { isDarkTheme } = useColorMode()
 
-  const githubStatsUrl = (type: 'overview' | 'languages') =>
+  const githubStatsUrl = (type: 'overview' | 'languages', isDark: boolean) =>
     `https://raw.githubusercontent.com/kuizuo/github-stats/master/generated/${type}.svg#gh-${
-      isDarkTheme ? 'dark' : 'light'
+      isDark ? 'dark' : 'light'
     }-mode-only`
 
   return (
@@ -24,8 +25,20 @@ export default function Github({ className }: GithubProps) {
       </h2>
       <div className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-background">
         <div className="github-stats mb-4 flex w-full flex-col justify-between gap-4 overflow-x-auto px-0 sm:flex-row">
-          <img src={githubStatsUrl('overview')} alt="GitHub Overview Stats" />
-          <img src={githubStatsUrl('languages')} alt="GitHub Languages Stats" />
+          <ThemedImage
+            alt="GitHub Overview Stats"
+            sources={{
+              light: githubStatsUrl('overview', false),
+              dark: githubStatsUrl('overview', true),
+            }}
+          />
+          <ThemedImage
+            alt="GitHub Languages Stats"
+            sources={{
+              light: githubStatsUrl('languages', false),
+              dark: githubStatsUrl('languages', true),
+            }}
+          />
         </div>
         <GitHubCalendar username="kuizuo" blockSize={11} colorScheme={isDarkTheme ? 'dark' : 'light'} />
       </div>

From 4216466b21d7938a19ed78fe10a44f910e2febfa Mon Sep 17 00:00:00 2001
From: Kuizuo <hi@kuizuo.cn>
Date: Tue, 25 Jun 2024 10:46:35 +0800
Subject: [PATCH 2/2] chore: lint

---
 src/components/landing/FeaturesSection/Github.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/landing/FeaturesSection/Github.tsx b/src/components/landing/FeaturesSection/Github.tsx
index 9a22156b..12a7ce88 100644
--- a/src/components/landing/FeaturesSection/Github.tsx
+++ b/src/components/landing/FeaturesSection/Github.tsx
@@ -1,9 +1,9 @@
-import Translate from '@docusaurus/Translate';
-import GitHubCalendar from 'react-github-calendar';
+import Translate from '@docusaurus/Translate'
+import GitHubCalendar from 'react-github-calendar'
 
-import { useColorMode } from '@docusaurus/theme-common';
-import { Icon } from '@iconify/react';
-import ThemedImage from '@theme/ThemedImage';
+import { useColorMode } from '@docusaurus/theme-common'
+import { Icon } from '@iconify/react'
+import ThemedImage from '@theme/ThemedImage'
 
 interface GithubProps {
   className?: string