From cf882f088e059cada0d9aaa6dc1223f3ed355e3b Mon Sep 17 00:00:00 2001
From: m1m1sha <18262227804@163.com>
Date: Thu, 9 May 2024 23:42:42 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20follow=20theme=20switch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vitepress/components/starHistory.vue  | 25 +++++++++++++++++++++++++
 en/guide/community-and-contribution.md | 12 +++++-------
 guide/community-and-contribution.md    | 12 +++++-------
 3 files changed, 35 insertions(+), 14 deletions(-)
 create mode 100644 .vitepress/components/starHistory.vue

diff --git a/.vitepress/components/starHistory.vue b/.vitepress/components/starHistory.vue
new file mode 100644
index 0000000..bb5268e
--- /dev/null
+++ b/.vitepress/components/starHistory.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  repo: string
+  type?: 'Date' | 'Timeline'
+}>()
+
+const { isDark } = useData()
+
+const url = computed(() =>
+  `https://star-history.com/#${props.repo}&${props.type || 'Date'}`,
+)
+
+const imgUrl = computed(() =>
+  `https://api.star-history.com/svg?repos=${props.repo}&type=${props.type || 'Date'}${isDark.value ? '&theme=dark' : ''}`,
+)
+</script>
+
+<template>
+  <a :href="url">
+    <img alt="Star History Chart" :src="imgUrl">
+  </a>
+</template>
diff --git a/en/guide/community-and-contribution.md b/en/guide/community-and-contribution.md
index 11b5fc8..0ac0736 100644
--- a/en/guide/community-and-contribution.md
+++ b/en/guide/community-and-contribution.md
@@ -1,13 +1,11 @@
+<script setup>
+import StarHistory from '../../.vitepress/components/starHistory.vue'
+</script>
+
 # Community and Contribution
 
 We welcome and encourage community contributions! If you want to get involved, please submit a [GitHub PR](https://github.com/EasyTier/EasyTier/pulls). Detailed contribution guidelines can be found in [CONTRIBUTING.md](https://github.com/EasyTier/EasyTier/blob/main/CONTRIBUTING.md).
 
 ## Star History
 
-<a href="https://star-history.com/#EasyTier/EasyTier&Date">
- <picture>
-   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=EasyTier/EasyTier&type=Date&theme=dark" />
-   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=EasyTier/EasyTier&type=Date" />
-   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=EasyTier/EasyTier&type=Date" />
- </picture>
-</a>
+<StarHistory repo="EasyTier/EasyTier" type="Timeline" />
diff --git a/guide/community-and-contribution.md b/guide/community-and-contribution.md
index 36151ef..301374e 100644
--- a/guide/community-and-contribution.md
+++ b/guide/community-and-contribution.md
@@ -1,3 +1,7 @@
+<script setup>
+import StarHistory from '../.vitepress/components/starHistory.vue'
+</script>
+
 # 社区和贡献
 
 我们欢迎并鼓励社区贡献！如果你想参与进来，请提交 [GitHub PR](https://github.com/EasyTier/EasyTier/pulls)。
@@ -6,10 +10,4 @@
 
 ## Star 历史
 
-<a href="https://star-history.com/#EasyTier/EasyTier&Date">
- <picture>
-   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=EasyTier/EasyTier&type=Date&theme=dark" />
-   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=EasyTier/EasyTier&type=Date" />
-   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=EasyTier/EasyTier&type=Date" />
- </picture>
-</a>
+<StarHistory repo="EasyTier/EasyTier" type="Timeline" />