style(theme): expand color palettes and refine dark mode styles

- Expand CSS variables for primary and secondary colors to include full 50-950 scales in `main.css`.
- Update components to reference specific color shades (e.g., `primary-400`, `secondary-200`) instead of generic variables.
- Add dark mode background and text colors to Events, Hall of Fame, and Index sections.
- Adjust image aspect ratio in the Events component.

app/components/index/Events.vue

@@ -1,23 +1,23 @@
 <template>
   <!-- 活动模块 -->
-  <UPageSection title="校友活动" class="bg-gray-100">
+  <UPageSection title="校友活动" class="bg-gray-100 dark:bg-slate-800">
     <UPageGrid>
       <div
         v-for="event in events"
         :key="event.id"
-        class="bg-white shadow rounded-xl"
+        class="bg-white dark:bg-slate-700 shadow rounded-xl"
       >
         <img
           :src="event.cover"
           :alt="event.title"
-          class="w-full aspect-[16/9] object-cover rounded-t-xl"
+          class="w-full aspect-video object-cover rounded-t-xl"
         />
         <div class="p-6">
           <h4 class="font-semibold text-lg mb-2">{{ event.title }}</h4>
-          <p class="text-sm text-gray-600 mb-1">
+          <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
             日期：{{ useChineseDateFormat(event.date) }}
           </p>
-          <p class="text-sm text-gray-600 mb-4">地点：{{ event.location }}</p>
+          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">地点：{{ event.location }}</p>
           <UButton
             label="阅读详情"
             :to="event.path"

app/components/index/HallOfFame.vue

@@ -10,10 +10,10 @@
         <img
           :src="person.photo"
           :alt="person.name"
-          class="w-40 rounded-full border-primary border-4"
+          class="w-40 rounded-full border-primary-400 border-4"
         />
         <h4 class="text-lg font-bold">{{ person.name }}</h4>
-        <p class="text-sm text-gray-500">{{ person.title }}</p>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{{ person.title }}</p>
       </div>
     </div>
   </UPageSection>