From 4db0dc7e83a9d4b8814f975c022716880626abb9 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 5 Aug 2026 11:21:03 -0600
Subject: [PATCH] =?UTF-8?q?fix(achievement):=20=E6=8A=AC=E5=A4=B4=E7=A8=80?=
 =?UTF-8?q?=E6=9C=89=E5=BA=A6=E9=85=8D=E8=89=B2=E9=80=82=E9=85=8D=E6=B5=85?=
 =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原色值是照深色底调的，白底上白金 1.7:1、黄金 2.2:1 看不清。
改成按 useDark 切换明暗两套色值。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/oj/achievement/index.vue | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/oj/achievement/index.vue b/src/oj/achievement/index.vue
index 8d7a1ce..e22334c 100644
--- a/src/oj/achievement/index.vue
+++ b/src/oj/achievement/index.vue
@@ -18,14 +18,28 @@ interface UserBadge {
 const route = useRoute()
 const name = computed(() => (route.query.name as string) || undefined)
 
-// 和 AchievementCard 的边框配色保持一致
-const RARITY_COLOR: Record<string, string> = {
-  bronze: "#b87333",
-  silver: "#9fa6b2",
+// 稀有度配色分明暗两套：AchievementCard 那组原色是照着深色底调的，
+// 直接拿到白底上，白金只有 1.7:1、黄金 2.2:1，小字根本看不清
+const isDark = useDark()
+
+const RARITY_COLOR_DARK: Record<string, string> = {
+  bronze: "#d18d4f",
+  silver: "#b6bcc7",
   gold: "#e0a300",
   platinum: "#7dd3fc",
 }
 
+const RARITY_COLOR_LIGHT: Record<string, string> = {
+  bronze: "#9a5b25",
+  silver: "#6b7280",
+  gold: "#a37500",
+  platinum: "#0284c7",
+}
+
+const rarityColor = computed(() =>
+  isDark.value ? RARITY_COLOR_DARK : RARITY_COLOR_LIGHT,
+)
+
 const achievements = ref<Achievement[]>([])
 const summary = ref<AchievementSummary | null>(null)
 const badges = ref<UserBadge[]>([])
@@ -89,7 +103,7 @@ watch(name, load)
             >
               <span
                 class="rarity-label"
-                :style="{ color: RARITY_COLOR[r.rarity] }"
+                :style="{ color: rarityColor[r.rarity] }"
               >
                 {{ r.label }}
               </span>
@@ -98,7 +112,7 @@ watch(name, load)
                   class="rarity-fill"
                   :style="{
                     width: r.total ? (r.unlocked / r.total) * 100 + '%' : '0%',
-                    background: RARITY_COLOR[r.rarity],
+                    background: rarityColor[r.rarity],
                   }"
                 />
               </span>