fix(achievement): 抬头稀有度配色适配浅色模式

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

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/oj/achievement/index.vue

@@ -18,14 +18,28 @@ interface UserBadge {
 const route = useRoute()
 const name = computed(() => (route.query.name as string) || undefined)
 
-// 和 AchievementCard 的边框配色保持一致
+// 稀有度配色分明暗两套：AchievementCard 那组原色是照着深色底调的，
-const RARITY_COLOR: Record<string, string> = {
+// 直接拿到白底上，白金只有 1.7:1、黄金 2.2:1，小字根本看不清
-  bronze: "#b87333",
+const isDark = useDark()
-  silver: "#9fa6b2",
+
+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>