diff --git a/apps/miniprogram/src/pages/ai-report/detail/index.tsx b/apps/miniprogram/src/pages/ai-report/detail/index.tsx
index a041574..db899e4 100644
--- a/apps/miniprogram/src/pages/ai-report/detail/index.tsx
+++ b/apps/miniprogram/src/pages/ai-report/detail/index.tsx
@@ -3,6 +3,7 @@ import { View, Text, RichText } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import { getAiAnalysisDetail, type AiAnalysisItem } from '@/services/ai-analysis';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const TYPE_LABELS: Record<string, string> = {
@@ -44,6 +45,7 @@ function markdownToHtml(md: string): string {
 }
 
 export default function AiReportDetail() {
+  const modeClass = useElderClass();
   const router = useRouter();
   const id = router.params.id || '';
 
@@ -63,7 +65,7 @@ export default function AiReportDetail() {
 
   if (!analysis) {
     return (
-      <View className='detail-page'>
+      <View className={`detail-page ${modeClass}`}>
         <Text className='empty-text'>报告不存在</Text>
       </View>
     );
@@ -77,7 +79,7 @@ export default function AiReportDetail() {
   const isAutoAnalysis = (analysis.result_metadata as Record<string, unknown>)?.auto_analysis === true;
 
   return (
-    <View className='detail-page'>
+    <View className={`detail-page ${modeClass}`}>
       <View className='detail-card'>
         <Text className='detail-type'>{TYPE_LABELS[analysis.analysis_type] || analysis.analysis_type}</Text>
         <View className='detail-meta'>
diff --git a/apps/miniprogram/src/pages/ai-report/list/index.tsx b/apps/miniprogram/src/pages/ai-report/list/index.tsx
index d31140e..f412a15 100644
--- a/apps/miniprogram/src/pages/ai-report/list/index.tsx
+++ b/apps/miniprogram/src/pages/ai-report/list/index.tsx
@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro';
 import { listAiAnalysis, type AiAnalysisItem } from '@/services/ai-analysis';
 import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const TYPE_LABELS: Record<string, string> = {
@@ -21,6 +22,7 @@ const STATUS_MAP: Record<string, { text: string; className: string }> = {
 };
 
 export default function AiReportList() {
+  const modeClass = useElderClass();
   const [list, setList] = useState<AiAnalysisItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(1);
@@ -60,14 +62,14 @@ export default function AiReportList() {
 
   if (list.length === 0) {
     return (
-      <View className='ai-report-page'>
+      <View className={`ai-report-page ${modeClass}`}>
         <EmptyState text='暂无 AI 分析报告' />
       </View>
     );
   }
 
   return (
-    <View className='ai-report-page'>
+    <View className={`ai-report-page ${modeClass}`}>
       <View className='page-title'>AI 分析报告</View>
       <ScrollView scrollY className='report-scroll' onScrollToLower={loadMore}>
         {list.map((item) => {
diff --git a/apps/miniprogram/src/pages/article/detail/index.tsx b/apps/miniprogram/src/pages/article/detail/index.tsx
index c219c17..6243768 100644
--- a/apps/miniprogram/src/pages/article/detail/index.tsx
+++ b/apps/miniprogram/src/pages/article/detail/index.tsx
@@ -3,9 +3,11 @@ import { View, Text, RichText } from '@tarojs/components';
 import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro';
 import { getArticleDetail, Article } from '../../../services/article';
 import { trackEvent } from '@/services/analytics';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 export default function ArticleDetail() {
+  const modeClass = useElderClass();
   const router = useRouter();
   const id = router.params.id || '';
 
@@ -31,7 +33,7 @@ export default function ArticleDetail() {
 
   if (loading) {
     return (
-      <View className='article-detail-page'>
+      <View className={`article-detail-page ${modeClass}`}>
         <View className='loading-state'>
           <Text className='loading-text'>加载中...</Text>
         </View>
@@ -41,7 +43,7 @@ export default function ArticleDetail() {
 
   if (!article) {
     return (
-      <View className='article-detail-page'>
+      <View className={`article-detail-page ${modeClass}`}>
         <View className='empty-state'>
           <Text className='empty-text'>文章不存在</Text>
         </View>
@@ -50,7 +52,7 @@ export default function ArticleDetail() {
   }
 
   return (
-    <View className='article-detail-page'>
+    <View className={`article-detail-page ${modeClass}`}>
       {/* 文章头部 */}
       <View className='article-header'>
         <Text className='article-title'>{article.title}</Text>
diff --git a/apps/miniprogram/src/pages/article/index.tsx b/apps/miniprogram/src/pages/article/index.tsx
index ee376c6..3c3c28e 100644
--- a/apps/miniprogram/src/pages/article/index.tsx
+++ b/apps/miniprogram/src/pages/article/index.tsx
@@ -4,9 +4,11 @@ import Taro, { useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/ta
 import { listArticles, listCategories, Article, ArticleCategory } from '../../services/article';
 import EmptyState from '../../components/EmptyState';
 import Loading from '../../components/Loading';
+import { useElderClass } from '../../hooks/useElderClass';
 import './index.scss';
 
 export default function ArticleList() {
+  const modeClass = useElderClass();
   const [articles, setArticles] = useState<Article[]>([]);
   const [page, setPage] = useState(1);
   const [total, setTotal] = useState(0);
@@ -72,7 +74,7 @@ export default function ArticleList() {
   };
 
   return (
-    <View className='article-page'>
+    <View className={`article-page ${modeClass}`}>
       {/* 分类筛选 */}
       {categories.length > 0 && (
         <ScrollView scrollX className='article-categories'>
diff --git a/apps/miniprogram/src/pages/device-sync/index.tsx b/apps/miniprogram/src/pages/device-sync/index.tsx
index cdb522f..2604406 100644
--- a/apps/miniprogram/src/pages/device-sync/index.tsx
+++ b/apps/miniprogram/src/pages/device-sync/index.tsx
@@ -10,6 +10,7 @@ import { DataSyncScheduler } from '@/services/ble/DataSyncScheduler';
 import { uploadReadings } from '@/services/device-sync';
 import { useAuthStore } from '@/stores/auth';
 import type { BLEDevice, NormalizedReading } from '@/services/ble/types';
+import { useElderClass } from '../../hooks/useElderClass';
 import './index.scss';
 
 const bleManager = new BLEManager({ scanTimeout: 10000, retryCount: 3 });
@@ -21,6 +22,7 @@ bleManager.registerAdapter(CustomBandAdapter);
 type PageState = 'idle' | 'scanning' | 'connecting' | 'connected' | 'syncing' | 'done' | 'error';
 
 export default function DeviceSync() {
+  const modeClass = useElderClass();
   const { currentPatient } = useAuthStore();
   const router = useRouter();
   const returnTo = router.params.returnTo || '';
@@ -271,7 +273,7 @@ export default function DeviceSync() {
   );
 
   return (
-    <View className="device-sync-page">
+    <View className={`device-sync-page ${modeClass}`}>
       <View className="sync-header">
         <Text className="sync-header-title">设备同步</Text>
       </View>
diff --git a/apps/miniprogram/src/pages/doctor/action-inbox/index.tsx b/apps/miniprogram/src/pages/doctor/action-inbox/index.tsx
index a7f5330..81d9dfd 100644
--- a/apps/miniprogram/src/pages/doctor/action-inbox/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/action-inbox/index.tsx
@@ -8,6 +8,7 @@ import {
   type ThreadResponse,
 } from '@/services/action-inbox';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../hooks/useElderClass';
 import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag';
 import './index.scss';
 
@@ -33,6 +34,7 @@ const STATUS_TABS = [
 ];
 
 export default function ActionInboxPage() {
+  const modeClass = useElderClass();
   const [items, setItems] = useState<ActionItem[]>([]);
   const [total, setTotal] = useState(0);
   const [_page, setPage] = useState(1);
@@ -118,7 +120,7 @@ export default function ActionInboxPage() {
   };
 
   return (
-    <View className="action-inbox-page">
+    <View className={`action-inbox-page ${modeClass}`}>
       <View className="inbox-tabs">
         {STATUS_TABS.map((tab) => (
           <View
diff --git a/apps/miniprogram/src/pages/doctor/alerts/detail/index.tsx b/apps/miniprogram/src/pages/doctor/alerts/detail/index.tsx
index ecaec99..3f9441b 100644
--- a/apps/miniprogram/src/pages/doctor/alerts/detail/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/alerts/detail/index.tsx
@@ -3,6 +3,7 @@ import { View, Text, ScrollView, Button } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../../hooks/useElderClass';
 import './index.scss';
 
 const SEVERITY_MAP: Record<string, { label: string; className: string }> = {
@@ -20,6 +21,7 @@ const STATUS_MAP: Record<string, { label: string; className: string }> = {
 };
 
 export default function AlertDetail() {
+  const modeClass = useElderClass();
   const [alert, setAlert] = useState<doctorApi.Alert | null>(null);
   const [loading, setLoading] = useState(true);
   const [actionLoading, setActionLoading] = useState(false);
@@ -93,7 +95,7 @@ export default function AlertDetail() {
   if (loading) return <Loading />;
   if (!alert) {
     return (
-      <View className='alert-detail-page'>
+      <View className={`alert-detail-page ${modeClass}`}>
         <Text>告警不存在</Text>
       </View>
     );
@@ -105,7 +107,7 @@ export default function AlertDetail() {
   const isAcknowledged = alert.status === 'acknowledged';
 
   return (
-    <ScrollView scrollY className='alert-detail-page'>
+    <ScrollView scrollY className={`alert-detail-page ${modeClass}`}>
       {/* 顶部状态 */}
       <View className='alert-detail-header'>
         <View className='alert-detail-header__tags'>
diff --git a/apps/miniprogram/src/pages/doctor/alerts/index.tsx b/apps/miniprogram/src/pages/doctor/alerts/index.tsx
index 53b1e94..58c0588 100644
--- a/apps/miniprogram/src/pages/doctor/alerts/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/alerts/index.tsx
@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const SEVERITY_MAP: Record<string, { label: string; className: string }> = {
@@ -28,6 +29,7 @@ const STATUS_TABS = [
 ];
 
 export default function AlertList() {
+  const modeClass = useElderClass();
   const [alerts, setAlerts] = useState<doctorApi.Alert[]>([]);
   const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState('');
@@ -81,7 +83,7 @@ export default function AlertList() {
   if (loading && alerts.length === 0) return <Loading />;
 
   return (
-    <ScrollView scrollY className='alert-list-page'>
+    <ScrollView scrollY className={`alert-list-page ${modeClass}`}>
       <View className='alert-list-header'>
         <Text className='alert-list-title'>告警列表</Text>
         <Text className='alert-list-count'>共 {total} 条</Text>
diff --git a/apps/miniprogram/src/pages/doctor/consultation/detail/index.tsx b/apps/miniprogram/src/pages/doctor/consultation/detail/index.tsx
index 61a57e5..0e49d2e 100644
--- a/apps/miniprogram/src/pages/doctor/consultation/detail/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/consultation/detail/index.tsx
@@ -3,56 +3,47 @@ import { View, Text, Input, ScrollView } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../../hooks/useElderClass';
 import './index.scss';
 
-const POLL_INTERVAL = 8000;
-
 export default function ConsultationDetail() {
   const router = useRouter();
   const sessionId = router.params.id || '';
+  const modeClass = useElderClass();
   const [session, setSession] = useState<doctorApi.ConsultationSession | null>(null);
   const [messages, setMessages] = useState<doctorApi.ConsultationMessage[]>([]);
   const [inputText, setInputText] = useState('');
   const [sending, setSending] = useState(false);
   const [loading, setLoading] = useState(true);
   const scrollViewRef = useRef('');
-  const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const pollingRef = useRef(false);
 
   useEffect(() => {
     if (sessionId) {
       loadData();
       markRead();
-      startPolling();
+      startLongPolling();
     }
-    return () => stopPolling();
+    return () => { pollingRef.current = false; };
   }, [sessionId]);
 
-  const startPolling = () => {
-    stopPolling();
-    pollTimerRef.current = setInterval(pollNewMessages, POLL_INTERVAL);
+  useEffect(() => {
+    if (session?.status === 'closed') {
+      pollingRef.current = false;
+    }
+  }, [session?.status]);
+
+  const startLongPolling = () => {
+    pollingRef.current = true;
+    longPoll();
   };
 
-  const stopPolling = () => {
-    if (pollTimerRef.current) {
-      clearInterval(pollTimerRef.current);
-      pollTimerRef.current = null;
-    }
-  };
-
-  const pollNewMessages = async () => {
-    if (!session || session.status === 'closed') {
-      stopPolling();
-      return;
-    }
+  const longPoll = async () => {
+    if (!pollingRef.current) return;
     try {
       const lastId = messages.length > 0 ? messages[messages.length - 1].id : undefined;
-      const m = await doctorApi.listMessages(sessionId, {
-        page: 1,
-        page_size: 50,
-        after_id: lastId,
-      });
-      const newMsgs = m.data || [];
-      if (newMsgs.length > 0) {
+      const newMsgs = await doctorApi.pollMessages(sessionId, lastId);
+      if (newMsgs && newMsgs.length > 0) {
         setMessages((prev) => {
           const existing = new Set(prev.map((msg) => msg.id));
           const fresh = newMsgs.filter((msg) => !existing.has(msg.id));
@@ -60,7 +51,12 @@ export default function ConsultationDetail() {
         });
         scrollViewRef.current = `msg-${messages.length + newMsgs.length}`;
       }
-    } catch { /* 轮询失败静默忽略 */ }
+    } catch {
+      // 超时或网络错误，静默重试
+    }
+    if (pollingRef.current) {
+      longPoll();
+    }
   };
 
   const loadData = async () => {
@@ -73,7 +69,7 @@ export default function ConsultationDetail() {
       setSession(s);
       setMessages(m.data || []);
       scrollViewRef.current = `msg-${(m.data || []).length}`;
-      if (s.status === 'closed') stopPolling();
+      if (s.status === 'closed') pollingRef.current = false;
     } catch {
       Taro.showToast({ title: '加载失败', icon: 'none' });
     } finally {
@@ -132,7 +128,7 @@ export default function ConsultationDetail() {
   const isOpen = session?.status !== 'closed';
 
   return (
-    <View className='chat-page'>
+    <View className={`chat-page ${modeClass}`}>
       {/* Header */}
       <View className='chat-header'>
         <Text className='chat-header__title'>{session?.subject || '在线咨询'}</Text>
diff --git a/apps/miniprogram/src/pages/doctor/consultation/index.tsx b/apps/miniprogram/src/pages/doctor/consultation/index.tsx
index b76c2e3..07f2c33 100644
--- a/apps/miniprogram/src/pages/doctor/consultation/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/consultation/index.tsx
@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
+import { useElderClass } from '../../../hooks/useElderClass';
 import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag';
 import { formatDateTime } from '@/utils/date';
 import './index.scss';
@@ -16,6 +17,7 @@ const TABS = [
 ];
 
 export default function ConsultationList() {
+  const modeClass = useElderClass();
   const [sessions, setSessions] = useState<doctorApi.ConsultationSession[]>([]);
   const [activeTab, setActiveTab] = useState('');
   const [loading, setLoading] = useState(true);
@@ -58,7 +60,7 @@ export default function ConsultationList() {
   if (loading && sessions.length === 0) return <Loading />;
 
   return (
-    <ScrollView scrollY className='consultation-page'>
+    <ScrollView scrollY className={`consultation-page ${modeClass}`}>
       <View className='tabs'>
         {TABS.map((t) => (
           <View
diff --git a/apps/miniprogram/src/pages/doctor/dialysis/create/index.tsx b/apps/miniprogram/src/pages/doctor/dialysis/create/index.tsx
index dfd6f87..f6d8971 100644
--- a/apps/miniprogram/src/pages/doctor/dialysis/create/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/dialysis/create/index.tsx
@@ -3,6 +3,7 @@ import { View, Text, Input, Textarea, Picker, ScrollView } from '@tarojs/compone
 import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../../hooks/useElderClass';
 import './index.scss';
 
 const DIALYSIS_TYPES = ['HD', 'HDF', 'HF'];
@@ -55,6 +56,7 @@ export default function DialysisCreate() {
   const version = router.params.version ? Number(router.params.version) : 0;
   const patientIdFromRoute = router.params.patientId || '';
   const isEdit = !!id;
+  const modeClass = useElderClass();
 
   const [form, setForm] = useState<FormState>({ ...initialForm, patient_id: patientIdFromRoute });
   const [loading, setLoading] = useState(isEdit);
@@ -167,7 +169,7 @@ export default function DialysisCreate() {
   );
 
   return (
-    <ScrollView scrollY className='create-page'>
+    <ScrollView scrollY className={`create-page ${modeClass}`}>
       <View className='section'>
         <Text className='section-title'>基本信息</Text>
         <View className='form-row'>
diff --git a/apps/miniprogram/src/pages/doctor/dialysis/detail/index.tsx b/apps/miniprogram/src/pages/doctor/dialysis/detail/index.tsx
index 8a1889f..94d9ca8 100644
--- a/apps/miniprogram/src/pages/doctor/dialysis/detail/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/dialysis/detail/index.tsx
@@ -3,11 +3,13 @@ import { View, Text, ScrollView } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../../hooks/useElderClass';
 import './index.scss';
 
 export default function DialysisDetail() {
   const router = useRouter();
   const id = router.params.id || '';
+  const modeClass = useElderClass();
   const [record, setRecord] = useState<doctorApi.DialysisRecord | null>(null);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
@@ -85,13 +87,13 @@ export default function DialysisDetail() {
   };
 
   if (loading) return <Loading />;
-  if (!record) return <View className='error-text'><Text>记录加载失败</Text></View>;
+  if (!record) return <View className={`error-text ${modeClass}`}><Text>记录加载失败</Text></View>;
 
   const canComplete = record.status === 'draft';
   const canReview = record.status === 'completed';
 
   return (
-    <ScrollView scrollY className='dialysis-detail'>
+    <ScrollView scrollY className={`dialysis-detail ${modeClass}`}>
       {/* 状态头部 */}
       <View className='section'>
         <View className='record-header'>
diff --git a/apps/miniprogram/src/pages/doctor/dialysis/index.tsx b/apps/miniprogram/src/pages/doctor/dialysis/index.tsx
index 095e5a8..dc292b7 100644
--- a/apps/miniprogram/src/pages/doctor/dialysis/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/dialysis/index.tsx
@@ -4,6 +4,7 @@ import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const TABS = [
@@ -18,6 +19,7 @@ const TYPE_MAP: Record<string, string> = { HD: 'HD', HDF: 'HDF', HF: 'HF' };
 export default function DialysisList() {
   const router = useRouter();
   const patientId = router.params.patientId || '';
+  const modeClass = useElderClass();
   const [searchPatient, setSearchPatient] = useState('');
   const [currentPatientId, setCurrentPatientId] = useState(patientId);
   const [activeTab, setActiveTab] = useState('');
@@ -72,7 +74,7 @@ export default function DialysisList() {
   if (loading && records.length === 0) return <Loading />;
 
   return (
-    <ScrollView scrollY className='dialysis-page'>
+    <ScrollView scrollY className={`dialysis-page ${modeClass}`}>
       {!patientId && (
         <View className='search-bar'>
           <Input
diff --git a/apps/miniprogram/src/pages/doctor/followup/detail/index.tsx b/apps/miniprogram/src/pages/doctor/followup/detail/index.tsx
index a2130cb..591e305 100644
--- a/apps/miniprogram/src/pages/doctor/followup/detail/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/followup/detail/index.tsx
@@ -3,6 +3,7 @@ import { View, Text, Textarea, ScrollView } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../../hooks/useElderClass';
 import './index.scss';
 
 const STATUS_LABELS: Record<string, string> = {
@@ -16,6 +17,7 @@ const STATUS_LABELS: Record<string, string> = {
 export default function FollowUpDetail() {
   const router = useRouter();
   const taskId = router.params.id || '';
+  const modeClass = useElderClass();
   const [task, setTask] = useState<doctorApi.FollowUpTask | null>(null);
   const [records, setRecords] = useState<doctorApi.FollowUpRecord[]>([]);
   const [loading, setLoading] = useState(true);
@@ -87,12 +89,12 @@ export default function FollowUpDetail() {
   const formatDate = (d: string) => new Date(d).toLocaleDateString('zh-CN');
 
   if (loading) return <Loading />;
-  if (!task) return <View className='error-text'><Text>任务加载失败</Text></View>;
+  if (!task) return <View className={`error-text ${modeClass}`}><Text>任务加载失败</Text></View>;
 
   const canSubmit = task.status === 'in_progress' || task.status === 'pending' || task.status === 'overdue';
 
   return (
-    <ScrollView scrollY className='followup-detail'>
+    <ScrollView scrollY className={`followup-detail ${modeClass}`}>
       <View className='section'>
         <View className='task-header'>
           <Text className='task-header__title'>随访详情</Text>
diff --git a/apps/miniprogram/src/pages/doctor/followup/index.tsx b/apps/miniprogram/src/pages/doctor/followup/index.tsx
index f647e85..5048e12 100644
--- a/apps/miniprogram/src/pages/doctor/followup/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/followup/index.tsx
@@ -4,6 +4,7 @@ import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
+import { useElderClass } from '../../../hooks/useElderClass';
 import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag';
 import './index.scss';
 
@@ -18,6 +19,7 @@ const TABS = [
 export default function FollowUpList() {
   const router = useRouter();
   const patientId = router.params.patientId || '';
+  const modeClass = useElderClass();
   const [tasks, setTasks] = useState<doctorApi.FollowUpTask[]>([]);
   const [activeTab, setActiveTab] = useState('');
   const [loading, setLoading] = useState(true);
@@ -62,7 +64,7 @@ export default function FollowUpList() {
   if (loading && tasks.length === 0) return <Loading />;
 
   return (
-    <ScrollView scrollY className='followup-page'>
+    <ScrollView scrollY className={`followup-page ${modeClass}`}>
       <View className='tabs'>
         {TABS.map((t) => (
           <View
diff --git a/apps/miniprogram/src/pages/doctor/index.tsx b/apps/miniprogram/src/pages/doctor/index.tsx
index 6420dea..e3ef55c 100644
--- a/apps/miniprogram/src/pages/doctor/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/index.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from 'react';
 import { View, Text, Input, ScrollView } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import { useAuthStore } from '@/stores/auth';
+import { useElderClass } from '../../hooks/useElderClass';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
 import './index.scss';
@@ -53,6 +54,7 @@ const ROLE_LABELS: Record<string, string> = {
 
 export default function DoctorHome() {
   const { user, logout, roles } = useAuthStore();
+  const modeClass = useElderClass();
   const [dashboard, setDashboard] = useState<doctorApi.DoctorDashboard | null>(null);
   const [alertCount, setAlertCount] = useState(0);
   const [loading, setLoading] = useState(true);
@@ -105,7 +107,7 @@ export default function DoctorHome() {
   if (loading) return <Loading />;
 
   return (
-    <ScrollView scrollY className='doctor-home'>
+    <ScrollView scrollY className={`doctor-home ${modeClass}`}>
       <View className='doctor-home__header'>
         <Text className='doctor-home__title'>医护工作台</Text>
         <Text className='doctor-home__greeting'>
diff --git a/apps/miniprogram/src/pages/doctor/patients/detail/index.tsx b/apps/miniprogram/src/pages/doctor/patients/detail/index.tsx
index 5c97c1d..b4d3565 100644
--- a/apps/miniprogram/src/pages/doctor/patients/detail/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/patients/detail/index.tsx
@@ -3,11 +3,13 @@ import { View, Text, ScrollView } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../../hooks/useElderClass';
 import './index.scss';
 
 export default function PatientDetail() {
   const router = useRouter();
   const patientId = router.params.id || '';
+  const modeClass = useElderClass();
   const [patient, setPatient] = useState<doctorApi.PatientDetail | null>(null);
   const [summary, setSummary] = useState<doctorApi.HealthSummary | null>(null);
   const [loading, setLoading] = useState(true);
@@ -40,10 +42,10 @@ export default function PatientDetail() {
   };
 
   if (loading) return <Loading />;
-  if (!patient) return <View className='error-text'><Text>患者信息加载失败</Text></View>;
+  if (!patient) return <View className={`error-text ${modeClass}`}><Text>患者信息加载失败</Text></View>;
 
   return (
-    <ScrollView scrollY className='patient-detail'>
+    <ScrollView scrollY className={`patient-detail ${modeClass}`}>
       {/* 基本信息 */}
       <View className='section'>
         <View className='section-header'>
diff --git a/apps/miniprogram/src/pages/doctor/patients/index.tsx b/apps/miniprogram/src/pages/doctor/patients/index.tsx
index ce9dd3b..4efaf89 100644
--- a/apps/miniprogram/src/pages/doctor/patients/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/patients/index.tsx
@@ -4,9 +4,11 @@ import Taro, { usePullDownRefresh, useReachBottom } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 export default function PatientList() {
+  const modeClass = useElderClass();
   const [patients, setPatients] = useState<doctorApi.PatientItem[]>([]);
   const [tags, setTags] = useState<doctorApi.PatientTag[]>([]);
   const [activeTag, setActiveTag] = useState<string>('');
@@ -98,7 +100,7 @@ export default function PatientList() {
   if (loading && patients.length === 0) return <Loading />;
 
   return (
-    <ScrollView scrollY className='patient-list-page'>
+    <ScrollView scrollY className={`patient-list-page ${modeClass}`}>
       <View className='search-bar'>
         <Input
           className='search-input'
diff --git a/apps/miniprogram/src/pages/doctor/prescription/create/index.tsx b/apps/miniprogram/src/pages/doctor/prescription/create/index.tsx
index cd35df4..24f24e3 100644
--- a/apps/miniprogram/src/pages/doctor/prescription/create/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/prescription/create/index.tsx
@@ -3,6 +3,7 @@ import { View, Text, Input, Textarea, Picker, ScrollView } from '@tarojs/compone
 import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../../hooks/useElderClass';
 import './index.scss';
 
 interface FormState {
@@ -50,6 +51,7 @@ const initialForm: FormState = {
 export default function PrescriptionCreate() {
   const router = useRouter();
   const patientId = router.params.patientId || '';
+  const modeClass = useElderClass();
   const [form, setForm] = useState<FormState>(initialForm);
   const [submitting, setSubmitting] = useState(false);
 
@@ -114,7 +116,7 @@ export default function PrescriptionCreate() {
   );
 
   return (
-    <ScrollView scrollY className='create-page'>
+    <ScrollView scrollY className={`create-page ${modeClass}`}>
       {/* 透析器 */}
       <View className='section'>
         <Text className='section-title'>透析器</Text>
diff --git a/apps/miniprogram/src/pages/doctor/prescription/detail/index.tsx b/apps/miniprogram/src/pages/doctor/prescription/detail/index.tsx
index d9be155..d61a85a 100644
--- a/apps/miniprogram/src/pages/doctor/prescription/detail/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/prescription/detail/index.tsx
@@ -3,11 +3,13 @@ import { View, Text, ScrollView } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../../hooks/useElderClass';
 import './index.scss';
 
 export default function PrescriptionDetail() {
   const router = useRouter();
   const id = router.params.id || '';
+  const modeClass = useElderClass();
   const [rx, setRx] = useState<doctorApi.DialysisPrescription | null>(null);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
@@ -76,10 +78,10 @@ export default function PrescriptionDetail() {
   };
 
   if (loading) return <Loading />;
-  if (!rx) return <View className='error-text'><Text>处方加载失败</Text></View>;
+  if (!rx) return <View className={`error-text ${modeClass}`}><Text>处方加载失败</Text></View>;
 
   return (
-    <ScrollView scrollY className='prescription-detail'>
+    <ScrollView scrollY className={`prescription-detail ${modeClass}`}>
       {/* 状态头部 */}
       <View className='section'>
         <View className='rx-header'>
diff --git a/apps/miniprogram/src/pages/doctor/prescription/index.tsx b/apps/miniprogram/src/pages/doctor/prescription/index.tsx
index 3378959..36fb6f3 100644
--- a/apps/miniprogram/src/pages/doctor/prescription/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/prescription/index.tsx
@@ -4,6 +4,7 @@ import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const TABS = [
@@ -15,6 +16,7 @@ const TABS = [
 export default function PrescriptionList() {
   const router = useRouter();
   const patientId = router.params.patientId || '';
+  const modeClass = useElderClass();
   const [searchPatient, setSearchPatient] = useState('');
   const [currentPatientId, setCurrentPatientId] = useState(patientId);
   const [activeTab, setActiveTab] = useState('');
@@ -66,7 +68,7 @@ export default function PrescriptionList() {
   if (loading && prescriptions.length === 0) return <Loading />;
 
   return (
-    <ScrollView scrollY className='prescription-page'>
+    <ScrollView scrollY className={`prescription-page ${modeClass}`}>
       {!patientId && (
         <View className='search-bar'>
           <Input
diff --git a/apps/miniprogram/src/pages/doctor/report/detail/index.tsx b/apps/miniprogram/src/pages/doctor/report/detail/index.tsx
index 7cfe163..eedab5e 100644
--- a/apps/miniprogram/src/pages/doctor/report/detail/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/report/detail/index.tsx
@@ -3,12 +3,14 @@ import { View, Text, Textarea, ScrollView } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../../hooks/useElderClass';
 import './index.scss';
 
 export default function ReportDetail() {
   const router = useRouter();
   const patientId = router.params.patientId || '';
   const reportId = router.params.id || '';
+  const modeClass = useElderClass();
   const [report, setReport] = useState<doctorApi.LabReportDetail | null>(null);
   const [loading, setLoading] = useState(true);
   const [doctorNotes, setDoctorNotes] = useState('');
@@ -51,10 +53,10 @@ export default function ReportDetail() {
   const formatDate = (d: string) => new Date(d).toLocaleDateString('zh-CN');
 
   if (loading) return <Loading />;
-  if (!report) return <View className='error-text'><Text>报告加载失败</Text></View>;
+  if (!report) return <View className={`error-text ${modeClass}`}><Text>报告加载失败</Text></View>;
 
   return (
-    <ScrollView scrollY className='report-detail'>
+    <ScrollView scrollY className={`report-detail ${modeClass}`}>
       {/* 基本信息 */}
       <View className='section'>
         <View className='report-header'>
diff --git a/apps/miniprogram/src/pages/doctor/report/index.tsx b/apps/miniprogram/src/pages/doctor/report/index.tsx
index 3ea916c..2a561c1 100644
--- a/apps/miniprogram/src/pages/doctor/report/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/report/index.tsx
@@ -4,11 +4,13 @@ import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 export default function ReportList() {
   const router = useRouter();
   const patientId = router.params.patientId || '';
+  const modeClass = useElderClass();
   const [searchPatient, setSearchPatient] = useState('');
   const [currentPatientId, setCurrentPatientId] = useState(patientId);
   const [reports, setReports] = useState<doctorApi.LabReportItem[]>([]);
@@ -55,7 +57,7 @@ export default function ReportList() {
   if (loading && reports.length === 0) return <Loading />;
 
   return (
-    <ScrollView scrollY className='report-page'>
+    <ScrollView scrollY className={`report-page ${modeClass}`}>
       {!patientId && (
         <View className='search-bar'>
           <Input
diff --git a/apps/miniprogram/src/pages/events/index.tsx b/apps/miniprogram/src/pages/events/index.tsx
index 241f69d..cd75e17 100644
--- a/apps/miniprogram/src/pages/events/index.tsx
+++ b/apps/miniprogram/src/pages/events/index.tsx
@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro';
 import * as pointsApi from '@/services/points';
 import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
+import { useElderClass } from '../../hooks/useElderClass';
 import './index.scss';
 
 const STATUS_MAP: Record<string, { label: string; className: string }> = {
@@ -14,6 +15,7 @@ const STATUS_MAP: Record<string, { label: string; className: string }> = {
 };
 
 export default function EventsPage() {
+  const modeClass = useElderClass();
   const [events, setEvents] = useState<pointsApi.OfflineEvent[]>([]);
   const [loading, setLoading] = useState(true);
   const [registering, setRegistering] = useState<string | null>(null);
@@ -59,7 +61,7 @@ export default function EventsPage() {
   if (loading) return <Loading />;
 
   return (
-    <ScrollView scrollY className='events-page'>
+    <ScrollView scrollY className={`events-page ${modeClass}`}>
       <View className='events-header'>
         <Text className='events-header__title'>线下活动</Text>
         <Text className='events-header__subtitle'>参加活动赢取积分</Text>
diff --git a/apps/miniprogram/src/pages/followup/detail/index.tsx b/apps/miniprogram/src/pages/followup/detail/index.tsx
index dbd885f..07836e3 100644
--- a/apps/miniprogram/src/pages/followup/detail/index.tsx
+++ b/apps/miniprogram/src/pages/followup/detail/index.tsx
@@ -7,9 +7,11 @@ import { TEMPLATE_IDS } from '@/services/wechat-templates';
 import { trackEvent } from '@/services/analytics';
 import Loading from '../../../components/Loading';
 import ErrorState from '../../../components/ErrorState';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 export default function FollowUpDetail() {
+  const modeClass = useElderClass();
   const router = useRouter();
   const id = router.params.id || '';
 
@@ -82,7 +84,7 @@ export default function FollowUpDetail() {
 
   if (loading) {
     return (
-      <View className='detail-page'>
+      <View className={`detail-page ${modeClass}`}>
         <Loading />
       </View>
     );
@@ -90,7 +92,7 @@ export default function FollowUpDetail() {
 
   if (error || !task) {
     return (
-      <View className='detail-page'>
+      <View className={`detail-page ${modeClass}`}>
         <ErrorState text='任务不存在' />
       </View>
     );
@@ -99,7 +101,7 @@ export default function FollowUpDetail() {
   const isCompleted = task.status === 'completed';
 
   return (
-    <View className='detail-page'>
+    <View className={`detail-page ${modeClass}`}>
       <View className='detail-card'>
         <Text className='detail-title'>{task.follow_up_type}</Text>
         <View className='detail-row'>
diff --git a/apps/miniprogram/src/pages/login/index.tsx b/apps/miniprogram/src/pages/login/index.tsx
index df9e265..b580ad9 100644
--- a/apps/miniprogram/src/pages/login/index.tsx
+++ b/apps/miniprogram/src/pages/login/index.tsx
@@ -2,9 +2,11 @@ import { useState } from 'react';
 import { View, Text, Button, ScrollView } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import { useAuthStore } from '../../stores/auth';
+import { useElderClass } from '../../hooks/useElderClass';
 import './index.scss';
 
 export default function Login() {
+  const modeClass = useElderClass();
   const [needBind, setNeedBind] = useState(false);
   const [agreed, setAgreed] = useState(false);
   const { login, bindPhone, loading, isMedicalStaff } = useAuthStore();
@@ -56,7 +58,7 @@ export default function Login() {
   };
 
   return (
-    <ScrollView scrollY className='login-scroll'>
+    <ScrollView scrollY className={`login-scroll ${modeClass}`}>
       <View className='login-page'>
         {/* 品牌区 */}
         <View className='login-brand'>
diff --git a/apps/miniprogram/src/pages/pkg-mall/detail/index.tsx b/apps/miniprogram/src/pages/pkg-mall/detail/index.tsx
index a51b7d5..d632bc3 100644
--- a/apps/miniprogram/src/pages/pkg-mall/detail/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-mall/detail/index.tsx
@@ -6,6 +6,7 @@ import type { PointsTransaction } from '../../../services/points';
 import { usePointsStore } from '../../../stores/points';
 import EmptyState from '../../../components/EmptyState';
 import Loading from '../../../components/Loading';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const TYPE_TABS = [
@@ -15,6 +16,7 @@ const TYPE_TABS = [
 ];
 
 export default function PointsDetail() {
+  const modeClass = useElderClass();
   const { account, refresh: refreshPoints } = usePointsStore();
   const [transactions, setTransactions] = useState<PointsTransaction[]>([]);
   const [activeTab, setActiveTab] = useState('');
@@ -112,7 +114,7 @@ export default function PointsDetail() {
   const balance = account?.balance ?? 0;
 
   return (
-    <View className='detail-page'>
+    <View className={`detail-page ${modeClass}`}>
       {/* 余额卡片 */}
       <View className='balance-card'>
         <Text className='balance-label'>当前积分</Text>
diff --git a/apps/miniprogram/src/pages/pkg-mall/exchange/index.tsx b/apps/miniprogram/src/pages/pkg-mall/exchange/index.tsx
index e594e33..b2de909 100644
--- a/apps/miniprogram/src/pages/pkg-mall/exchange/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-mall/exchange/index.tsx
@@ -8,6 +8,7 @@ import {
 import type { PointsProduct } from '../../../services/points';
 import { usePointsStore } from '../../../stores/points';
 import Loading from '../../../components/Loading';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const TYPE_INITIAL: Record<string, string> = {
@@ -29,6 +30,7 @@ const TYPE_COLOR: Record<string, string> = {
 };
 
 export default function ExchangeConfirm() {
+  const modeClass = useElderClass();
   const [product, setProduct] = useState<PointsProduct | null>(null);
   const { account, refresh: refreshPoints } = usePointsStore();
   const [loading, setLoading] = useState(true);
@@ -119,7 +121,7 @@ export default function ExchangeConfirm() {
 
   if (loading) {
     return (
-      <View className='exchange-page'>
+      <View className={`exchange-page ${modeClass}`}>
         <Loading />
       </View>
     );
@@ -131,7 +133,7 @@ export default function ExchangeConfirm() {
   const typeColor = TYPE_COLOR[productType] || '#C4623A';
 
   return (
-    <View className='exchange-page'>
+    <View className={`exchange-page ${modeClass}`}>
       {/* 商品预览卡片 */}
       <View className='product-card'>
         <View
diff --git a/apps/miniprogram/src/pages/pkg-mall/orders/index.tsx b/apps/miniprogram/src/pages/pkg-mall/orders/index.tsx
index ebf4db4..c3ec9ec 100644
--- a/apps/miniprogram/src/pages/pkg-mall/orders/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-mall/orders/index.tsx
@@ -5,6 +5,7 @@ import { listMyOrders } from '../../../services/points';
 import type { PointsOrder } from '../../../services/points';
 import EmptyState from '../../../components/EmptyState';
 import Loading from '../../../components/Loading';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const STATUS_TABS = [
@@ -22,6 +23,7 @@ const STATUS_CONFIG: Record<string, { label: string; tagBg: string; tagColor: st
 };
 
 export default function MallOrders() {
+  const modeClass = useElderClass();
   const [orders, setOrders] = useState<PointsOrder[]>([]);
   const [activeTab, setActiveTab] = useState('');
   const [page, setPage] = useState(1);
@@ -110,7 +112,7 @@ export default function MallOrders() {
   };
 
   return (
-    <View className='orders-page'>
+    <View className={`orders-page ${modeClass}`}>
       {/* 状态筛选标签 */}
       <View className='status-tabs'>
         {STATUS_TABS.map((tab) => (
diff --git a/apps/miniprogram/src/pages/pkg-profile/consents/index.tsx b/apps/miniprogram/src/pages/pkg-profile/consents/index.tsx
index 359cef5..22da0b2 100644
--- a/apps/miniprogram/src/pages/pkg-profile/consents/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/consents/index.tsx
@@ -5,6 +5,7 @@ import { listConsents, revokeConsent } from '@/services/consent';
 import type { Consent } from '@/services/consent';
 import EmptyState from '@/components/EmptyState';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const CONSENT_TYPE_MAP: Record<string, string> = {
@@ -22,6 +23,7 @@ const STATUS_MAP: Record<string, { label: string; cls: string }> = {
 };
 
 export default function ConsentList() {
+  const modeClass = useElderClass();
   const [consents, setConsents] = useState<Consent[]>([]);
   const [page, setPage] = useState(1);
   const [total, setTotal] = useState(0);
@@ -79,7 +81,7 @@ export default function ConsentList() {
   };
 
   return (
-    <View className='consents-page'>
+    <View className={`consents-page ${modeClass}`}>
       <Text className='page-title'>知情同意</Text>
 
       <View className='consent-list'>
diff --git a/apps/miniprogram/src/pages/pkg-profile/diagnoses/index.tsx b/apps/miniprogram/src/pages/pkg-profile/diagnoses/index.tsx
index d270e14..7147e3d 100644
--- a/apps/miniprogram/src/pages/pkg-profile/diagnoses/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/diagnoses/index.tsx
@@ -4,6 +4,7 @@ import Taro, { useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/ta
 import { listDiagnoses, Diagnosis } from '../../../services/health-record';
 import EmptyState from '../../../components/EmptyState';
 import Loading from '../../../components/Loading';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const TYPE_MAP: Record<string, { label: string; cls: string }> = {
@@ -19,6 +20,7 @@ const STATUS_MAP: Record<string, { label: string; cls: string }> = {
 };
 
 export default function Diagnoses() {
+  const modeClass = useElderClass();
   const [records, setRecords] = useState<Diagnosis[]>([]);
   const [page, setPage] = useState(1);
   const [total, setTotal] = useState(0);
@@ -61,7 +63,7 @@ export default function Diagnoses() {
   });
 
   return (
-    <View className='diagnoses-page'>
+    <View className={`diagnoses-page ${modeClass}`}>
       <Text className='page-title'>诊断记录</Text>
 
       <View className='diagnosis-list'>
diff --git a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.tsx b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.tsx
index 920e5ee..141a7ec 100644
--- a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.tsx
@@ -4,6 +4,7 @@ import Taro, { useRouter } from '@tarojs/taro';
 import { getDialysisPrescription } from '@/services/dialysis';
 import type { DialysisPrescription } from '@/services/dialysis';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../../hooks/useElderClass';
 import './index.scss';
 
 const STATUS_MAP: Record<string, { label: string; cls: string }> = {
@@ -13,6 +14,7 @@ const STATUS_MAP: Record<string, { label: string; cls: string }> = {
 };
 
 export default function DialysisPrescriptionDetail() {
+  const modeClass = useElderClass();
   const router = useRouter();
   const id = router.params.id || '';
   const [rx, setRx] = useState<DialysisPrescription | null>(null);
@@ -27,8 +29,8 @@ export default function DialysisPrescriptionDetail() {
       .finally(() => setLoading(false));
   }, [id]);
 
-  if (loading) return <View className='detail-page'><Loading /></View>;
-  if (!rx) return <View className='detail-page'><View className='empty-state'><Text className='empty-text'>处方不存在</Text></View></View>;
+  if (loading) return <View className={`detail-page ${modeClass}`}><Loading /></View>;
+  if (!rx) return <View className={`detail-page ${modeClass}`}><View className='empty-state'><Text className='empty-text'>处方不存在</Text></View></View>;
 
   const si = STATUS_MAP[rx.status] || { label: rx.status, cls: '' };
 
@@ -43,7 +45,7 @@ export default function DialysisPrescriptionDetail() {
   };
 
   return (
-    <View className='detail-page'>
+    <View className={`detail-page ${modeClass}`}>
       {/* 状态头部 */}
       <View className='detail-card header-card'>
         <View className='header-row'>
diff --git a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.tsx b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.tsx
index 65a9d87..6d23b86 100644
--- a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.tsx
@@ -5,6 +5,7 @@ import { listDialysisPrescriptions } from '@/services/dialysis';
 import type { DialysisPrescription } from '@/services/dialysis';
 import EmptyState from '@/components/EmptyState';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const STATUS_MAP: Record<string, { label: string; cls: string }> = {
@@ -14,6 +15,7 @@ const STATUS_MAP: Record<string, { label: string; cls: string }> = {
 };
 
 export default function DialysisPrescriptionList() {
+  const modeClass = useElderClass();
   const [prescriptions, setPrescriptions] = useState<DialysisPrescription[]>([]);
   const [page, setPage] = useState(1);
   const [total, setTotal] = useState(0);
@@ -54,7 +56,7 @@ export default function DialysisPrescriptionList() {
   const statusInfo = (s: string) => STATUS_MAP[s] || { label: s, cls: '' };
 
   return (
-    <View className='dialysis-prescriptions-page'>
+    <View className={`dialysis-prescriptions-page ${modeClass}`}>
       <Text className='page-title'>透析处方</Text>
 
       <View className='prescription-list'>
diff --git a/apps/miniprogram/src/pages/pkg-profile/dialysis-records/detail/index.tsx b/apps/miniprogram/src/pages/pkg-profile/dialysis-records/detail/index.tsx
index 0b09697..ac7bc0c 100644
--- a/apps/miniprogram/src/pages/pkg-profile/dialysis-records/detail/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-records/detail/index.tsx
@@ -4,6 +4,7 @@ import Taro, { useRouter } from '@tarojs/taro';
 import { getDialysisRecord } from '@/services/dialysis';
 import type { DialysisRecord } from '@/services/dialysis';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../../hooks/useElderClass';
 import './index.scss';
 
 const STATUS_MAP: Record<string, { label: string; cls: string }> = {
@@ -19,6 +20,7 @@ const TYPE_MAP: Record<string, string> = {
 };
 
 export default function DialysisRecordDetail() {
+  const modeClass = useElderClass();
   const router = useRouter();
   const id = router.params.id || '';
   const [record, setRecord] = useState<DialysisRecord | null>(null);
@@ -33,13 +35,13 @@ export default function DialysisRecordDetail() {
       .finally(() => setLoading(false));
   }, [id]);
 
-  if (loading) return <View className='detail-page'><Loading /></View>;
-  if (!record) return <View className='detail-page'><View className='empty-state'><Text className='empty-text'>记录不存在</Text></View></View>;
+  if (loading) return <View className={`detail-page ${modeClass}`}><Loading /></View>;
+  if (!record) return <View className={`detail-page ${modeClass}`}><View className='empty-state'><Text className='empty-text'>记录不存在</Text></View></View>;
 
   const si = STATUS_MAP[record.status] || { label: record.status, cls: '' };
 
   return (
-    <View className='detail-page'>
+    <View className={`detail-page ${modeClass}`}>
       {/* 状态头部 */}
       <View className='detail-card header-card'>
         <View className='header-row'>
diff --git a/apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.tsx b/apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.tsx
index 6d5ebbd..802e9c4 100644
--- a/apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.tsx
@@ -5,6 +5,7 @@ import { listDialysisRecords } from '@/services/dialysis';
 import type { DialysisRecord } from '@/services/dialysis';
 import EmptyState from '@/components/EmptyState';
 import Loading from '@/components/Loading';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const TYPE_MAP: Record<string, { label: string; cls: string }> = {
@@ -20,6 +21,7 @@ const STATUS_MAP: Record<string, { label: string; cls: string }> = {
 };
 
 export default function DialysisRecordList() {
+  const modeClass = useElderClass();
   const [records, setRecords] = useState<DialysisRecord[]>([]);
   const [page, setPage] = useState(1);
   const [total, setTotal] = useState(0);
@@ -61,7 +63,7 @@ export default function DialysisRecordList() {
   const statusInfo = (s: string) => STATUS_MAP[s] || { label: s, cls: '' };
 
   return (
-    <View className='dialysis-records-page'>
+    <View className={`dialysis-records-page ${modeClass}`}>
       <Text className='page-title'>透析记录</Text>
 
       <View className='record-list'>
diff --git a/apps/miniprogram/src/pages/pkg-profile/family-add/index.tsx b/apps/miniprogram/src/pages/pkg-profile/family-add/index.tsx
index e8a80b7..f12e98c 100644
--- a/apps/miniprogram/src/pages/pkg-profile/family-add/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/family-add/index.tsx
@@ -2,12 +2,14 @@ import React, { useState, useEffect } from 'react';
 import { View, Text, Input, Picker } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import { createPatient, updatePatient, Patient } from '../../../services/patient';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 const RELATION_OPTIONS = ['本人', '配偶', '父母', '子女', '其他'];
 const GENDER_OPTIONS = ['男', '女'];
 
 export default function FamilyAdd() {
+  const modeClass = useElderClass();
   const router = useRouter();
   const editId = router.params.id || '';
   const editData = Taro.getStorageSync('edit_patient') as Patient | null;
@@ -58,7 +60,7 @@ export default function FamilyAdd() {
   };
 
   return (
-    <View className='family-add-page'>
+    <View className={`family-add-page ${modeClass}`}>
       <Text className='page-title'>{editId ? '编辑就诊人' : '添加就诊人'}</Text>
 
       <View className='form-card'>
diff --git a/apps/miniprogram/src/pages/report/detail/index.tsx b/apps/miniprogram/src/pages/report/detail/index.tsx
index cbe2022..3082edb 100644
--- a/apps/miniprogram/src/pages/report/detail/index.tsx
+++ b/apps/miniprogram/src/pages/report/detail/index.tsx
@@ -3,6 +3,7 @@ import { View, Text } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import { getReportDetail, LabReport } from '../../../services/report';
 import Loading from '../../../components/Loading';
+import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
 interface IndicatorItem {
@@ -15,6 +16,7 @@ interface IndicatorItem {
 }
 
 export default function ReportDetail() {
+  const modeClass = useElderClass();
   const router = useRouter();
   const id = router.params.id || '';
   const patientId = Taro.getStorageSync('current_patient_id') || '';
@@ -51,7 +53,7 @@ export default function ReportDetail() {
 
   if (loading) {
     return (
-      <View className='detail-page'>
+      <View className={`detail-page ${modeClass}`}>
         <Loading />
       </View>
     );
@@ -59,7 +61,7 @@ export default function ReportDetail() {
 
   if (!report) {
     return (
-      <View className='detail-page'>
+      <View className={`detail-page ${modeClass}`}>
         <View className='empty-state'>
           <Text className='empty-text'>报告不存在</Text>
         </View>
@@ -68,7 +70,7 @@ export default function ReportDetail() {
   }
 
   return (
-    <View className='detail-page'>
+    <View className={`detail-page ${modeClass}`}>
       {/* 基本信息 */}
       <View className='detail-card'>
         <Text className='detail-title'>{report.report_type}</Text>