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/assets/css/main.css

@@ -5,7 +5,30 @@
 
 @theme {
   --color-primary: #fb9e3a;
+  --color-primary-50: #fff8f0;
+  --color-primary-100: #feecd8;
+  --color-primary-200: #fdd4ab;
+  --color-primary-300: #fbb674;
+  --color-primary-400: #fb9e3a;
+  --color-primary-500: #f9840a;
+  --color-primary-600: #dd6b06;
+  --color-primary-700: #b74f07;
+  --color-primary-800: #943e0d;
+  --color-primary-900: #7a340e;
+  --color-primary-950: #461902;
+
   --color-secondary: #fcef91;
+  --color-secondary-50: #fffeea;
+  --color-secondary-100: #fffbc5;
+  --color-secondary-200: #fcef91;
+  --color-secondary-300: #f9df53;
+  --color-secondary-400: #f6ca24;
+  --color-secondary-500: #e6b010;
+  --color-secondary-600: #c6880a;
+  --color-secondary-700: #9e610c;
+  --color-secondary-800: #834d12;
+  --color-secondary-900: #6f3f15;
+  --color-secondary-950: #412008;
 }
 
 .dark {

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>

app/error.vue

@@ -164,7 +164,7 @@ const errorColor = computed(() => {
               <button
                 @click="goHome"
                 class="px-5 py-2.5 rounded-md text-white font-medium transition-colors flex items-center gap-2"
-                style="background-color: var(--color-primary)"
+                style="background-color: var(--color-primary-400)"
               >
                 <span>返回首页</span>
               </button>

app/layouts/default.vue

@@ -12,7 +12,7 @@
           <div class="flex gap-4 items-center">
             <img class="inline h-12 w-auto" src="/Logo.svg" alt="YPHS Alumni" />
             <h1
-              class="text-xl font-bold text-gray-900 hover:text-primary hidden md:inline"
+              class="text-xl font-bold text-gray-900 hover:text-primary-400 hidden md:inline"
             >
               永平中学校友会
             </h1>

app/pages/about/founded-history.vue

@@ -131,7 +131,7 @@
                   :class="[
                     'px-4',
                     'py-2',
-                    idx < 2 ? 'font-bold text-primary' : '',
+                    idx < 2 ? 'font-bold text-primary-400' : '',
                   ]"
                 >
                   {{ donor.amount }}
@@ -167,7 +167,7 @@
                   {{ money.format(serviceDonor.amount) }}
                 </td>
               </tr>
-              <tr class="bg-amber-50 font-semibold text-primary">
+              <tr class="bg-amber-50 font-semibold text-primary-400">
                 <td class="px-4 py-2">总额</td>
                 <td class="px-4 py-2">专业服务及装修项目</td>
                 <td class="px-4 py-2">{{ money.format(33170) }}</td>

app/pages/about/org-structure/[slug].vue

@@ -49,7 +49,7 @@ useSeoMeta({
   ogTitle: "永平中学校友会组织架构",
   ogDescription:
     "了解永平中学校友会的领导团队、职能与专项部门，见证校友情谊与组织力量。",
-  ogImage: "/org-structure/ogImage.png",
+  ogImage: "https://img.yphsalumni.org/i/2025/11/28/qq4k4z.png",
   ogType: "website",
 });
 
@@ -64,7 +64,7 @@ const orgStructure = ref([
     name: "李煜斌",
     position: "主席",
     category: "领导团队",
-    photo: "/org-structure/李煜斌.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qm2sjz.png",
     description:
       "全面领导与战略决策，统筹理事会整体工作，确保组织愿景与使命的实现。",
   },
@@ -72,154 +72,154 @@ const orgStructure = ref([
     name: "郑惠忠",
     position: "副主席",
     category: "领导团队",
-    photo: "/org-structure/郑惠忠.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qm3nod.png",
     description: "协助主席制定战略方向，分管外部关系与合作伙伴发展。",
   },
   {
     name: "陈月丽",
     position: "副主席",
     category: "领导团队",
-    photo: "/org-structure/陈月丽.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qm41qp.png",
     description: "协助主席处理内部事务，分管人力资源与组织文化建设。",
   },
   {
     name: "余东照",
     position: "副主席",
     category: "领导团队",
-    photo: "/org-structure/余东照.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qm4izj.png",
     description: "协助主席推动重点项目，分管创新业务与发展规划。",
   },
   {
     name: "蓝宜宏",
     position: "秘书",
     category: "职能部门",
-    photo: "/org-structure/蓝宜宏.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qmrsai.png",
     description: "文件管理、会议组织、行政协调与日常事务处理。",
   },
   {
     name: "陈冠宇",
     position: "副秘书",
     category: "职能部门",
-    photo: "/org-structure/陈冠宇.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qms4el.png",
     description: "协助秘书处理文档、会议安排与行政支持工作。",
   },
   {
     name: "余粝栎",
     position: "财政",
     category: "职能部门",
-    photo: "/org-structure/余粝栎.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qmsnhy.png",
     description: "全面财务管理、预算控制、资金运作与财务报告。",
   },
   {
     name: "曾国书",
     position: "副财政",
     category: "职能部门",
-    photo: "/org-structure/曾国书.jpg",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qmslmm.jpg",
     description: "协助财政处理账务、报销与日常财务管理工作。",
   },
   {
     name: "颜志宝",
     position: "总务",
     category: "职能部门",
-    photo: "/org-structure/颜志宝.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qnfyb0.png",
     description: "物资采购、资产管理、场地协调与后勤保障服务。",
   },
   {
     name: "温敬富",
     position: "副总务",
     category: "职能部门",
-    photo: "/org-structure/温敬富.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qnglal.png",
     description: "协助总务处理物资管理、设备维护与后勤支持。",
   },
   {
     name: "胡少菲",
     position: "康乐",
     category: "职能部门",
-    photo: "/org-structure/胡少菲.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qnre6r.png",
     description: "文化活动策划、康乐项目组织与会员联谊活动。",
   },
   {
     name: "林剑宝",
     position: "副康乐",
     category: "职能部门",
-    photo: "/org-structure/林剑宝.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qns52y.png",
     description: "协助文康组织文体活动、兴趣小组与社交聚会。",
   },
   {
     name: "余美枫",
     position: "福利主任",
     category: "专项部门",
-    photo: "/org-structure/余美枫.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qodchd.png",
     description: "会员福利规划、实施与评估，提升会员满意度。",
   },
   {
     name: "郑惠国",
     position: "副福利主任",
     category: "专项部门",
-    photo: "/org-structure/郑惠国.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qoe3ua.png",
     description: "协助会员福利规划、实施与评估，提升会员满意度。",
   },
   {
     name: "程靖原",
     position: "会员籍暨咨询管理",
     category: "专项部门",
-    photo: "/org-structure/程靖原.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qof326.png",
     description: "会员信息管理、咨询服务提供与会员关系维护。",
   },
   {
     name: "许福源",
     position: "副会员籍暨咨询管理",
     category: "专项部门",
-    photo: "/org-structure/许福源.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qog4aa.png",
     description: "协助会员管理、咨询响应与信息系统维护。",
   },
   {
     name: "麦祖奕",
     position: "副会员籍暨咨询管理",
     category: "专项部门",
-    photo: "/org-structure/麦祖奕.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qoo8lx.png",
     description: "协助会员管理、咨询响应与信息系统开发。",
   },
   {
     name: "许浩铭",
     position: "奖励金主任",
     category: "专项部门",
-    photo: "/org-structure/许浩铭.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qoos64.png",
     description: "奖励金制度设计、评审组织与发放管理。",
   },
   {
     name: "黄楚茵",
     position: "副奖励金主任",
     category: "专项部门",
-    photo: "/org-structure/黄楚茵.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qoxrim.png",
     description: "协助奖励金评审、资料审核与发放流程管理。",
   },
   {
     name: "陈廷添",
     position: "理事",
     category: "专项部门",
-    photo: "/org-structure/陈廷添.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qoyjo8.png",
     description: "参与理事会决策、专项工作推进与建议提出。",
   },
   {
     name: "邱康勤",
     position: "理事",
     category: "专项部门",
-    photo: "/org-structure/邱康勤.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qp8tni.png",
     description: "参与理事会决策、专项工作推进与建议提出。",
   },
   {
     name: "张键国",
     position: "稽查",
     category: "专项部门",
-    photo: "/org-structure/张键国.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qp99ia.png",
     description: "内部审计、合规监督与风险控制管理。",
   },
   {
     name: "许皓杰",
     position: "稽查",
     category: "专项部门",
-    photo: "/org-structure/许皓杰.png",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qp9l0z.png",
     description: "内部审计、合规监督与风险控制管理。",
   },
 ]);

app/pages/index.vue

@@ -2,14 +2,8 @@
   <UPage>
     <!-- Hero Banner -->
     <UPageHero
-      class="bg-cover bg-center"
+      :class="heroClass"
-      style="
+      :style="heroStyle"
-        background-image: url(&quot;/hero-image-2.jpg?v=2&quot;);
-        background-position-y: -40px;
-        background-repeat: no-repeat;
-        background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent black */
-        background-blend-mode: lighten;
-      "
       title="连接校友 · 传承精神"
       description="马来西亚柔佛永平中学校友会官方网站"
       :links="heroCta"
@@ -25,7 +19,7 @@
 
     <!-- 捐赠模块 -->
     <UPageCTA
-      class="bg-secondary"
+      class="bg-secondary-200 dark:bg-secondary-900"
       title="支持与捐赠（功能暂未开放）"
       description="您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！"
       :links="donationLinks"
@@ -40,6 +34,20 @@ useSeoMeta({
   title: "首页",
 });
 
+const colorMode = useColorMode()
+const heroClass = 'bg-cover bg-center'
+const heroStyle = computed(() => ({
+  backgroundImage: colorMode.value === 'dark' 
+    ? 'url("https://img.yphsalumni.org/i/2025/11/28/qzxrpq.png")'
+    : 'url("https://img.yphsalumni.org/i/2025/11/28/qk9fe8.png")',
+  backgroundPositionY: '-40px',
+  backgroundRepeat: 'no-repeat',
+  backgroundColor: colorMode.value === 'dark' 
+    ? 'rgba(0, 0, 0, 0.5)' 
+    : 'rgba(255, 255, 255, 0.5)',
+  backgroundBlendMode: colorMode.value === 'dark' ? 'darken' : 'lighten'
+}))
+
 const heroCta = ref([
   {
     label: "立即加入我们",

app/pages/join-us/index.vue

@@ -113,7 +113,7 @@ const handleSubmit = () => {
 </script>
 
 <template>
-  <UPage class="bg-primary">
+  <UPage class="bg-primary-400">
     <div
       class="cursor-not-allowed fixed flex items-center justify-center min-h-screen min-w-screen bg-black opacity-50"
     >

content/events/20250927-return-to-school.md

@@ -3,16 +3,16 @@ title: "927 永中 • 钟意你"
 subtitle: "永中校友会 39周年庆" 
 date: "2025-09-27"
 location: "永平中学校园"
-cover: "/events/20250927-return-to-school/event-photo-1.jpg"
+cover: "https://img.yphsalumni.org/i/2025/11/28/qr1l7k.jpg"
 ---
 # 永中校友会39周年会庆午宴 温馨欢聚350人
 
-![来宾打卡照](/events/20250927-return-to-school/event-photo-1.jpg)
+![来宾打卡照](https://img.yphsalumni.org/i/2025/11/28/qr1l7k.jpg)
 来宾打卡照（星洲日报记者，邹智敏摄）
 
 永平中学校友会于 9 月 27 日举办“927 永中·钟意你”39 周年会庆午宴，吸引约 350 位校友与社会贤达齐聚一堂，共度温馨时光，场面热闹盛大。
 
-![嘉宾合照](/events/20250927-return-to-school/event-photo-2.jpg)
+![嘉宾合照](https://img.yphsalumni.org/i/2025/11/28/qr1rrx.jpg)
 与会嘉宾向永中校友会献上祝福，左起：许敏捷、王飞兴、林添顺、李煜斌、刘镇东、蓝宜宏、傅庆隆、张嘉群及郑凯聪（星洲日报记者，邹智敏摄）
 
 本次会庆出席嘉宾包括：

content/events/20251009-roulian-xiaoyouhui-20th.md

@@ -3,11 +3,11 @@ title: "柔联校友会 20 届理事就职典礼"
 subtitle: "中学生写作比赛颁奖" 
 date: "2025-10-09"
 location: "富华冷气酒家 2 楼"
-cover: "/events/20251009-roulian-xiaoyouhui-20th/event-photo-1.jpg"
+cover: "https://img.yphsalumni.org/i/2025/11/28/qryfft.jpg"
 ---
 # 柔联校友会 20 届理事就职典礼
 
-![新届理事合照](/events/20251009-roulian-xiaoyouhui-20th/event-photo-1.jpg)
+![新届理事合照](https://img.yphsalumni.org/i/2025/11/28/qryfft.jpg)
 
 柔佛州华校校友联合会日前举办第 20 届理事就职典礼与 2025 年 “林赛花教育基金” 柔佛州中学生现场写作比赛颁奖典礼，由马来西亚华校校友会联合总会会长萧成兴担任监誓人。
 

content/news/20251001-official-web-launch.md

@@ -4,14 +4,13 @@ date: "2025-10-01"
 updated: "2025-10-01"
 author: "麦祖奕学长"
 description: "永中校友会官网正式上线，为校友提供最新资讯、活动报名及互动交流平台。"
-cover: "/news/20251001-official-web-launch/Screenshot.png"
+cover: "https://img.yphsalumni.org/i/2025/11/28/qqc3ft.png"
 tags: ["活动", "公告", "产品更新"]
 category: "通知"
 highlight: true
 seoTitle: "永中校友会官网上线 | 最新活动与资讯平台"
 seoDescription: "永中校友会官网正式上线，校友可在平台获取最新资讯、报名活动及参与互动。"
-ogImage: "/images/og/news-launch.jpg"
+ogImage: "https://img.yphsalumni.org/i/2025/11/28/qqc3ft.png"
-slug: "/news/20251001-official-web-launch"
 ---
 永中校友会官网正式上线啦！🎉
 

nuxt.config.ts

@@ -51,7 +51,7 @@ export default defineNuxtConfig({
         { property: "og:url", content: "https://yphsalumni.org" }, // ✅ 换成你网站的真实域名
         {
           property: "og:image",
-          content: "https://yphsalumni.org/hero-image-2.jpg?v=2",
+          content: "https://img.yphsalumni.org/i/2025/11/28/qk9fe8.png",
         }, // ✅ 上传一张封面图
 
         // Twitter Card
@@ -63,7 +63,7 @@ export default defineNuxtConfig({
         },
         {
           name: "twitter:image",
-          content: "https://yphsalumni.org/hero-image-2.jpg?v=2",
+          content: "https://img.yphsalumni.org/i/2025/11/28/qk9fe8.png",
         },
       ],
     },