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"