Merge pull request #302 from EaveLuo/hotfix-eave/darkmode

fix: refreshing the page in dark mode causes github-stat dark mode to fail.
kuizuo · Jun 25, 2024 · 8590f42 · 8590f42
2 parents 9e8fe44 + 4216466
commit 8590f42
Showing 1 changed file with 17 additions and 4 deletions.
diff --git a/src/components/landing/FeaturesSection/Github.tsx b/src/components/landing/FeaturesSection/Github.tsx
@@ -3,6 +3,7 @@ import GitHubCalendar from 'react-github-calendar'
 
 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>