From 8090ba2b9ebf2b1e241b0bf0aef9c53960b39013 Mon Sep 17 00:00:00 2001
From: zhangxiang <zhangxiang@novalon.cn>
Date: Mon, 31 Aug 2026 21:46:59 +0800
Subject: [PATCH] refactor(admin): tokenize remaining admin pages for dark mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 8 个 admin 页面(users/roles/zones/media/notifications/page/content×2)全部 gray→token
- 深色面板 bg-gray-900/800 → bg-dark-bg / bg-dark-bg-secondary(两模式保持深色)
- 深色面板上的文字保留 text-white(固定亮色,两模式可读)
- 遮罩 bg-black/50 → bg-overlay/50(独立 token,不随反色)
- border-t-gray-900 → border-t-border-dark 单独处理
- 验证: type-check 0 / lint 0 / Tailwind 生成确认 token 类产出 / 无 gray- 残留
---
 .../content/[modelCode]/[itemId]/page.tsx     |  94 +++++++--------
 src/app/admin/content/[modelCode]/page.tsx    |  56 ++++-----
 src/app/admin/media/page.tsx                  |  36 +++---
 src/app/admin/notifications/page.tsx          |  52 ++++-----
 src/app/admin/page.tsx                        |  76 ++++++------
 src/app/admin/roles/page.tsx                  |  60 +++++-----
 src/app/admin/users/page.tsx                  | 108 +++++++++---------
 src/app/admin/zones/page.tsx                  |  30 ++---
 8 files changed, 256 insertions(+), 256 deletions(-)

diff --git a/src/app/admin/content/[modelCode]/[itemId]/page.tsx b/src/app/admin/content/[modelCode]/[itemId]/page.tsx
index 6498c95..d5a38e8 100644
--- a/src/app/admin/content/[modelCode]/[itemId]/page.tsx
+++ b/src/app/admin/content/[modelCode]/[itemId]/page.tsx
@@ -105,8 +105,8 @@ function JsonEditor({
         onChange={(e) => handleChange(e.target.value)}
         placeholder={placeholder || '输入 JSON 数据'}
         rows={10}
-        className={`w-full px-3 py-2 border rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-y ${
-          error || parseError ? 'border-red-300 bg-red-50' : 'border-gray-300'
+        className={`w-full px-3 py-2 border rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent resize-y ${
+          error || parseError ? 'border-red-300 bg-red-50' : 'border-border-secondary'
         }`}
         spellCheck={false}
       />
@@ -420,12 +420,12 @@ export default function ContentEditorPage() {
       case 'text':
         return (
           <div key={key}>
-            <label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
               {field.label}
               {field.required && <span className="text-red-500 ml-1">*</span>}
             </label>
             {field.description && (
-              <p className="text-xs text-gray-400 mb-1.5">{field.description}</p>
+              <p className="text-xs text-text-muted mb-1.5">{field.description}</p>
             )}
             <input
               id={key}
@@ -434,8 +434,8 @@ export default function ContentEditorPage() {
               onChange={(e) => handleFieldChange(field.name, e.target.value)}
               onBlur={() => handleFieldBlur(field.name)}
               placeholder={field.placeholder}
-              className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent ${
-                error ? 'border-red-300 bg-red-50' : 'border-gray-300'
+              className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent ${
+                error ? 'border-red-300 bg-red-50' : 'border-border-secondary'
               }`}
             />
             <FieldError error={error} />
@@ -445,12 +445,12 @@ export default function ContentEditorPage() {
       case 'textarea':
         return (
           <div key={key}>
-            <label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
               {field.label}
               {field.required && <span className="text-red-500 ml-1">*</span>}
             </label>
             {field.description && (
-              <p className="text-xs text-gray-400 mb-1.5">{field.description}</p>
+              <p className="text-xs text-text-muted mb-1.5">{field.description}</p>
             )}
             <textarea
               id={key}
@@ -459,8 +459,8 @@ export default function ContentEditorPage() {
               onBlur={() => handleFieldBlur(field.name)}
               placeholder={field.placeholder}
               rows={4}
-              className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-y ${
-                error ? 'border-red-300 bg-red-50' : 'border-gray-300'
+              className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent resize-y ${
+                error ? 'border-red-300 bg-red-50' : 'border-border-secondary'
               }`}
             />
             <FieldError error={error} />
@@ -470,7 +470,7 @@ export default function ContentEditorPage() {
       case 'number':
         return (
           <div key={key}>
-            <label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
               {field.label}
               {field.required && <span className="text-red-500 ml-1">*</span>}
             </label>
@@ -479,8 +479,8 @@ export default function ContentEditorPage() {
               type="number"
               value={(value as number) ?? ''}
               onChange={(e) => handleFieldChange(field.name, parseFloat(e.target.value) || 0)}
-              className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent ${
-                error ? 'border-red-300 bg-red-50' : 'border-gray-300'
+              className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent ${
+                error ? 'border-red-300 bg-red-50' : 'border-border-secondary'
               }`}
             />
             <FieldError error={error} />
@@ -495,11 +495,11 @@ export default function ContentEditorPage() {
               type="checkbox"
               checked={!!value}
               onChange={(e) => handleFieldChange(field.name, e.target.checked)}
-              className="w-4 h-4 rounded border-gray-300 text-gray-900 focus:ring-gray-900"
+              className="w-4 h-4 rounded border-border-secondary text-text-primary focus:ring-border-dark"
             />
-            <label htmlFor={key} className="text-sm font-medium text-gray-700">{field.label}</label>
+            <label htmlFor={key} className="text-sm font-medium text-text-secondary">{field.label}</label>
             {field.description && (
-              <span className="text-xs text-gray-400">{field.description}</span>
+              <span className="text-xs text-text-muted">{field.description}</span>
             )}
           </div>
         );
@@ -508,14 +508,14 @@ export default function ContentEditorPage() {
       case 'dropdown':
         return (
           <div key={key}>
-            <label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
               {field.label}
             </label>
             <select
               id={key}
               value={(value as string) || ''}
               onChange={(e) => handleFieldChange(field.name, e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent"
+              className="w-full px-3 py-2 border border-border-secondary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent"
             >
               <option value="">请选择</option>
               {field.options?.map((opt) => (
@@ -530,12 +530,12 @@ export default function ContentEditorPage() {
       case 'json':
         return (
           <div key={key}>
-            <label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
               {field.label}
               {field.required && <span className="text-red-500 ml-1">*</span>}
             </label>
             {field.description && (
-              <p className="text-xs text-gray-400 mb-1.5">{field.description}</p>
+              <p className="text-xs text-text-muted mb-1.5">{field.description}</p>
             )}
             <JsonEditor
               id={key}
@@ -550,7 +550,7 @@ export default function ContentEditorPage() {
       case 'image':
         return (
           <div key={key}>
-            <label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
               {field.label}
             </label>
             <input
@@ -559,13 +559,13 @@ export default function ContentEditorPage() {
               value={(value as string) || ''}
               onChange={(e) => handleFieldChange(field.name, e.target.value)}
               placeholder="输入图片 URL 或从媒体库选择"
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent"
+              className="w-full px-3 py-2 border border-border-secondary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent"
             />
             {!!value && (
               <img
                 src={String(value)}
                 alt="预览"
-                className="mt-2 max-h-32 rounded border border-gray-200"
+                className="mt-2 max-h-32 rounded border border-border-primary"
               />
             )}
           </div>
@@ -574,8 +574,8 @@ export default function ContentEditorPage() {
       case 'array':
       case 'object':
         return (
-          <fieldset key={key} className="border border-gray-200 rounded-lg p-4">
-            <legend className="text-sm font-medium text-gray-700 mb-3 px-1">
+          <fieldset key={key} className="border border-border-primary rounded-lg p-4">
+            <legend className="text-sm font-medium text-text-secondary mb-3 px-1">
               {field.label}
             </legend>
             {field.fields?.map((subField) => renderField(subField, `${field.name}.`))}
@@ -585,7 +585,7 @@ export default function ContentEditorPage() {
       default:
         return (
           <div key={key}>
-            <label htmlFor={key} className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor={key} className="block text-sm font-medium text-text-secondary mb-1">
               {field.label}
             </label>
             <input
@@ -593,7 +593,7 @@ export default function ContentEditorPage() {
               type="text"
               value={(value as string) || ''}
               onChange={(e) => handleFieldChange(field.name, e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent"
+              className="w-full px-3 py-2 border border-border-secondary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent"
             />
           </div>
         );
@@ -603,7 +603,7 @@ export default function ContentEditorPage() {
   if (authLoading || loading) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="animate-spin w-8 h-8 border-2 border-gray-900 border-t-transparent rounded-full" />
+        <div className="animate-spin w-8 h-8 border-2 border-border-dark border-t-transparent rounded-full" />
       </div>
     );
   }
@@ -620,15 +620,15 @@ export default function ContentEditorPage() {
               }
               router.push(`/admin/content/${modelCode}`);
             }}
-            className="p-2 rounded hover:bg-gray-100 transition-colors"
+            className="p-2 rounded hover:bg-bg-hover transition-colors"
           >
             <ArrowLeft className="w-5 h-5" />
           </button>
           <div>
-            <h1 className="text-xl font-bold text-gray-900">
+            <h1 className="text-xl font-bold text-text-primary">
               {isNew ? `新增${modelLabel}` : `编辑${modelLabel}`}
             </h1>
-            <p className="text-sm text-gray-500 mt-1">{model?.name}</p>
+            <p className="text-sm text-text-muted mt-1">{model?.name}</p>
           </div>
         </div>
         <div className="flex items-center gap-3">
@@ -646,7 +646,7 @@ export default function ContentEditorPage() {
                   <CheckCircle className="w-3 h-3" />
                   已保存
                   {lastSaved && (
-                    <span className="text-gray-400">
+                    <span className="text-text-muted">
                       {lastSaved.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}
                     </span>
                   )}
@@ -659,7 +659,7 @@ export default function ContentEditorPage() {
                 </span>
               )}
               {autoSaveStatus === 'idle' && (
-                <span className="text-gray-400 flex items-center gap-1">
+                <span className="text-text-muted flex items-center gap-1">
                   <Cloud className="w-3 h-3" />
                 </span>
               )}
@@ -671,7 +671,7 @@ export default function ContentEditorPage() {
             <button
               onClick={handleSaveOnly}
               disabled={saving}
-              className="flex items-center gap-2 px-3 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 disabled:opacity-50 transition-colors"
+              className="flex items-center gap-2 px-3 py-2 border border-border-secondary text-text-secondary rounded-lg text-sm font-medium hover:bg-bg-secondary disabled:opacity-50 transition-colors"
             >
               <Save className="w-4 h-4" />
               保存
@@ -698,7 +698,7 @@ export default function ContentEditorPage() {
           <button
             onClick={handleSaveAndBack}
             disabled={saving}
-            className="flex items-center gap-2 bg-gray-900 text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-gray-800 disabled:opacity-50 transition-colors"
+            className="flex items-center gap-2 bg-dark-bg text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-bg-secondary disabled:opacity-50 transition-colors"
           >
             <Save className="w-4 h-4" />
             {saving ? '保存中...' : isNew ? '创建' : '保存并返回'}
@@ -728,10 +728,10 @@ export default function ContentEditorPage() {
       )}
 
       {/* Form */}
-      <div className="bg-white rounded-lg border border-gray-200 p-6 space-y-5">
+      <div className="bg-bg-primary rounded-lg border border-border-primary p-6 space-y-5">
         {/* 标题 */}
         <div>
-          <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+          <label htmlFor="title" className="block text-sm font-medium text-text-secondary mb-1">
             标题 <span className="text-red-500">*</span>
           </label>
           <input
@@ -752,8 +752,8 @@ export default function ContentEditorPage() {
               }
             }}
             placeholder="请输入标题"
-            className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent ${
-              validationErrors.title ? 'border-red-300 bg-red-50' : 'border-gray-300'
+            className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent ${
+              validationErrors.title ? 'border-red-300 bg-red-50' : 'border-border-secondary'
             }`}
           />
           <FieldError error={validationErrors.title} />
@@ -761,7 +761,7 @@ export default function ContentEditorPage() {
 
         {/* Slug */}
         <div>
-          <label htmlFor="slug" className="block text-sm font-medium text-gray-700 mb-1">Slug</label>
+          <label htmlFor="slug" className="block text-sm font-medium text-text-secondary mb-1">Slug</label>
           <input
             id="slug"
             type="text"
@@ -783,8 +783,8 @@ export default function ContentEditorPage() {
               }
             }}
             placeholder="URL 友好标识（留空自动生成）"
-            className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent ${
-              validationErrors.slug ? 'border-red-300 bg-red-50' : 'border-gray-300'
+            className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent ${
+              validationErrors.slug ? 'border-red-300 bg-red-50' : 'border-border-secondary'
             }`}
           />
           <FieldError error={validationErrors.slug} />
@@ -792,12 +792,12 @@ export default function ContentEditorPage() {
 
         {/* 状态 */}
         <div>
-          <label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">状态</label>
+          <label htmlFor="status" className="block text-sm font-medium text-text-secondary mb-1">状态</label>
           <select
             id="status"
             value={status}
             onChange={(e) => setStatus(e.target.value)}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent"
+            className="w-full px-3 py-2 border border-border-secondary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent"
           >
             <option value="draft">草稿</option>
             <option value="published">已发布</option>
@@ -811,7 +811,7 @@ export default function ContentEditorPage() {
 
       {/* Bottom actions */}
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2 text-xs text-gray-400">
+        <div className="flex items-center gap-2 text-xs text-text-muted">
           <FileText className="w-3.5 h-3.5" />
           {modelCode} / {isNew ? '新建' : itemId}
         </div>
@@ -821,7 +821,7 @@ export default function ContentEditorPage() {
             <button
               onClick={handleSaveOnly}
               disabled={saving}
-              className="flex items-center gap-2 px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 disabled:opacity-50 transition-colors"
+              className="flex items-center gap-2 px-4 py-2.5 border border-border-secondary text-text-secondary rounded-lg text-sm font-medium hover:bg-bg-secondary disabled:opacity-50 transition-colors"
             >
               <Save className="w-4 h-4" />
               保存
@@ -832,7 +832,7 @@ export default function ContentEditorPage() {
           <button
             onClick={handleSaveAndBack}
             disabled={saving}
-            className="flex items-center gap-2 bg-gray-900 text-white rounded-lg px-6 py-2.5 text-sm font-medium hover:bg-gray-800 disabled:opacity-50 transition-colors"
+            className="flex items-center gap-2 bg-dark-bg text-white rounded-lg px-6 py-2.5 text-sm font-medium hover:bg-dark-bg-secondary disabled:opacity-50 transition-colors"
           >
             <Save className="w-4 h-4" />
             {saving ? '保存中...' : isNew ? '创建' : '保存并返回'}
diff --git a/src/app/admin/content/[modelCode]/page.tsx b/src/app/admin/content/[modelCode]/page.tsx
index 485ee61..3d0e1e7 100644
--- a/src/app/admin/content/[modelCode]/page.tsx
+++ b/src/app/admin/content/[modelCode]/page.tsx
@@ -109,7 +109,7 @@ export default function ContentListPage() {
   if (authLoading || (!user && typeof window !== 'undefined')) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="animate-spin w-8 h-8 border-2 border-gray-900 border-t-transparent rounded-full" />
+        <div className="animate-spin w-8 h-8 border-2 border-border-dark border-t-transparent rounded-full" />
       </div>
     );
   }
@@ -119,12 +119,12 @@ export default function ContentListPage() {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-xl font-bold text-gray-900">{modelLabel}</h1>
-          <p className="text-sm text-gray-500 mt-1">共 {total} 条内容</p>
+          <h1 className="text-xl font-bold text-text-primary">{modelLabel}</h1>
+          <p className="text-sm text-text-muted mt-1">共 {total} 条内容</p>
         </div>
         <button
           onClick={() => router.push(`/admin/content/${modelCode}/new`)}
-          className="flex items-center gap-2 bg-gray-900 text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-gray-800 transition-colors"
+          className="flex items-center gap-2 bg-dark-bg text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-bg-secondary transition-colors"
         >
           <Plus className="w-4 h-4" />
           新增
@@ -134,13 +134,13 @@ export default function ContentListPage() {
       {/* Search */}
       <div className="flex gap-3">
         <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
           <input
             type="text"
             value={search}
             onChange={(e) => { setSearch(e.target.value); setPage(1); }}
             placeholder={`搜索${modelLabel}...`}
-            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent"
+            className="w-full pl-10 pr-4 py-2 border border-border-secondary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent"
           />
         </div>
       </div>
@@ -153,41 +153,41 @@ export default function ContentListPage() {
       )}
 
       {/* Table */}
-      <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+      <div className="bg-bg-primary rounded-lg border border-border-primary overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full">
             <thead>
-              <tr className="border-b border-gray-200 bg-gray-50">
-                <th className="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">标题</th>
-                <th className="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">Slug</th>
-                <th className="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">状态</th>
-                <th className="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">更新时间</th>
-                <th className="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase">操作</th>
+              <tr className="border-b border-border-primary bg-bg-secondary">
+                <th className="text-left px-4 py-3 text-xs font-medium text-text-muted uppercase">标题</th>
+                <th className="text-left px-4 py-3 text-xs font-medium text-text-muted uppercase">Slug</th>
+                <th className="text-left px-4 py-3 text-xs font-medium text-text-muted uppercase">状态</th>
+                <th className="text-left px-4 py-3 text-xs font-medium text-text-muted uppercase">更新时间</th>
+                <th className="text-right px-4 py-3 text-xs font-medium text-text-muted uppercase">操作</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100">
+            <tbody className="divide-y divide-border-light">
               {loading ? (
                 <tr>
-                  <td colSpan={5} className="px-4 py-12 text-center text-gray-400">
+                  <td colSpan={5} className="px-4 py-12 text-center text-text-muted">
                     <div className="flex justify-center">
-                      <div className="animate-spin w-6 h-6 border-2 border-gray-300 border-t-gray-900 rounded-full" />
+                      <div className="animate-spin w-6 h-6 border-2 border-border-secondary border-t-border-dark rounded-full" />
                     </div>
                   </td>
                 </tr>
               ) : items.length === 0 ? (
                 <tr>
-                  <td colSpan={5} className="px-4 py-12 text-center text-gray-400">
+                  <td colSpan={5} className="px-4 py-12 text-center text-text-muted">
                     暂无数据
                   </td>
                 </tr>
               ) : (
                 items.map((item) => (
-                  <tr key={item.id} className="hover:bg-gray-50 transition-colors">
+                  <tr key={item.id} className="hover:bg-bg-secondary transition-colors">
                     <td className="px-4 py-3">
-                      <span className="text-sm font-medium text-gray-900">{item.title}</span>
+                      <span className="text-sm font-medium text-text-primary">{item.title}</span>
                     </td>
                     <td className="px-4 py-3">
-                      <code className="text-xs text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded">
+                      <code className="text-xs text-text-muted bg-bg-hover px-1.5 py-0.5 rounded">
                         {item.slug || '-'}
                       </code>
                     </td>
@@ -198,27 +198,27 @@ export default function ContentListPage() {
                             ? 'bg-green-50 text-green-700'
                             : item.status === 'draft'
                             ? 'bg-yellow-50 text-yellow-700'
-                            : 'bg-gray-100 text-gray-600'
+                            : 'bg-bg-hover text-text-tertiary'
                         }`}
                       >
                         {item.status === 'published' ? '已发布' : item.status === 'draft' ? '草稿' : '已归档'}
                       </span>
                     </td>
-                    <td className="px-4 py-3 text-sm text-gray-500">
+                    <td className="px-4 py-3 text-sm text-text-muted">
                       {item.updatedAt ? new Date(item.updatedAt).toLocaleDateString('zh-CN') : '-'}
                     </td>
                     <td className="px-4 py-3">
                       <div className="flex items-center justify-end gap-2">
                         <button
                           onClick={() => router.push(`/admin/content/${modelCode}/${item.id}`)}
-                          className="p-1.5 rounded hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors"
+                          className="p-1.5 rounded hover:bg-bg-hover text-text-muted hover:text-text-tertiary transition-colors"
                           title="编辑"
                         >
                           <Edit className="w-4 h-4" />
                         </button>
                         <button
                           onClick={() => openDeleteDialog(item.id)}
-                          className="p-1.5 rounded hover:bg-red-50 text-gray-400 hover:text-red-500 transition-colors"
+                          className="p-1.5 rounded hover:bg-red-50 text-text-muted hover:text-red-500 transition-colors"
                           title="删除"
                         >
                           <Trash2 className="w-4 h-4" />
@@ -234,22 +234,22 @@ export default function ContentListPage() {
 
         {/* Pagination */}
         {totalPages > 1 && (
-          <div className="flex items-center justify-between px-4 py-3 border-t border-gray-200">
-            <span className="text-sm text-gray-500">
+          <div className="flex items-center justify-between px-4 py-3 border-t border-border-primary">
+            <span className="text-sm text-text-muted">
               第 {page} / {totalPages} 页
             </span>
             <div className="flex items-center gap-1">
               <button
                 onClick={() => setPage((p) => Math.max(1, p - 1))}
                 disabled={page <= 1}
-                className="p-1.5 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed"
+                className="p-1.5 rounded hover:bg-bg-hover disabled:opacity-30 disabled:cursor-not-allowed"
               >
                 <ChevronLeft className="w-4 h-4" />
               </button>
               <button
                 onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                 disabled={page >= totalPages}
-                className="p-1.5 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed"
+                className="p-1.5 rounded hover:bg-bg-hover disabled:opacity-30 disabled:cursor-not-allowed"
               >
                 <ChevronRight className="w-4 h-4" />
               </button>
diff --git a/src/app/admin/media/page.tsx b/src/app/admin/media/page.tsx
index e42db17..c0c6727 100644
--- a/src/app/admin/media/page.tsx
+++ b/src/app/admin/media/page.tsx
@@ -113,7 +113,7 @@ export default function MediaPage() {
   if (authLoading || loading) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="animate-spin w-8 h-8 border-2 border-gray-900 border-t-transparent rounded-full" />
+        <div className="animate-spin w-8 h-8 border-2 border-border-dark border-t-transparent rounded-full" />
       </div>
     );
   }
@@ -122,10 +122,10 @@ export default function MediaPage() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-xl font-bold text-gray-900">媒体库</h1>
-          <p className="text-sm text-gray-500 mt-1">共 {items.length} 个文件</p>
+          <h1 className="text-xl font-bold text-text-primary">媒体库</h1>
+          <p className="text-sm text-text-muted mt-1">共 {items.length} 个文件</p>
         </div>
-        <label className="flex items-center gap-2 bg-gray-900 text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-gray-800 cursor-pointer transition-colors">
+        <label className="flex items-center gap-2 bg-dark-bg text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-bg-secondary cursor-pointer transition-colors">
           <Upload className="w-4 h-4" />
           {uploading ? '上传中...' : '上传文件'}
           <input
@@ -142,10 +142,10 @@ export default function MediaPage() {
         {items.map((item) => (
           <div
             key={item.id}
-            className="bg-white rounded-lg border border-gray-200 overflow-hidden group hover:shadow-md transition-shadow"
+            className="bg-bg-primary rounded-lg border border-border-primary overflow-hidden group hover:shadow-md transition-shadow"
           >
             {isImage(item.mimeType) ? (
-              <div className="aspect-square bg-gray-100 flex items-center justify-center overflow-hidden">
+              <div className="aspect-square bg-bg-hover flex items-center justify-center overflow-hidden">
                 <img
                   src={item.url}
                   alt={item.name}
@@ -153,22 +153,22 @@ export default function MediaPage() {
                 />
               </div>
             ) : (
-              <div className="aspect-square bg-gray-100 flex items-center justify-center">
-                <File className="w-8 h-8 text-gray-400" />
+              <div className="aspect-square bg-bg-hover flex items-center justify-center">
+                <File className="w-8 h-8 text-text-muted" />
               </div>
             )}
 
             <div className="p-2">
-              <p className="text-xs text-gray-700 truncate" title={item.name}>
+              <p className="text-xs text-text-secondary truncate" title={item.name}>
                 {item.name}
               </p>
-              <p className="text-xs text-gray-400 mt-0.5">{formatSize(item.size)}</p>
+              <p className="text-xs text-text-muted mt-0.5">{formatSize(item.size)}</p>
             </div>
 
-            <div className="flex border-t border-gray-100">
+            <div className="flex border-t border-border-light">
               <button
                 onClick={() => handleCopyUrl(item.url, item.id)}
-                className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-gray-500 hover:bg-gray-50 transition-colors"
+                className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-text-muted hover:bg-bg-secondary transition-colors"
                 title="复制链接"
               >
                 {copiedId === item.id ? (
@@ -180,7 +180,7 @@ export default function MediaPage() {
               </button>
               <button
                 onClick={() => openDeleteDialog(item.id)}
-                className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-gray-500 hover:bg-red-50 hover:text-red-500 transition-colors"
+                className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs text-text-muted hover:bg-red-50 hover:text-red-500 transition-colors"
                 title="删除"
               >
                 <Trash2 className="w-3 h-3" />
@@ -192,12 +192,12 @@ export default function MediaPage() {
       </div>
 
       {items.length === 0 && !loading && (
-        <div className="text-center py-16 bg-white rounded-lg border border-dashed border-gray-300">
+        <div className="text-center py-16 bg-bg-primary rounded-lg border border-dashed border-border-secondary">
           {/* eslint-disable-next-line jsx-a11y/alt-text -- lucide Image 图标（装饰性 SVG，非 <img>），aria-hidden 表明装饰意图 */}
-          <Image aria-hidden="true" className="w-12 h-12 mx-auto mb-4 text-gray-300" />
-          <h3 className="text-sm font-medium text-gray-900 mb-1">暂无媒体文件</h3>
-          <p className="text-sm text-gray-500 mb-4">上传图片、文档等资源，即可在内容编辑中使用</p>
-          <label className="inline-flex items-center gap-2 bg-gray-900 text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-gray-800 cursor-pointer transition-colors">
+          <Image aria-hidden="true" className="w-12 h-12 mx-auto mb-4 text-text-muted" />
+          <h3 className="text-sm font-medium text-text-primary mb-1">暂无媒体文件</h3>
+          <p className="text-sm text-text-muted mb-4">上传图片、文档等资源，即可在内容编辑中使用</p>
+          <label className="inline-flex items-center gap-2 bg-dark-bg text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-bg-secondary cursor-pointer transition-colors">
             <Upload className="w-4 h-4" />
             上传文件
             <input
diff --git a/src/app/admin/notifications/page.tsx b/src/app/admin/notifications/page.tsx
index 1927ed1..df01631 100644
--- a/src/app/admin/notifications/page.tsx
+++ b/src/app/admin/notifications/page.tsx
@@ -41,14 +41,14 @@ const NOTIFICATION_TYPE_ICONS: Record<string, React.ReactNode> = {
   review_pending: <AlertCircle className="w-4 h-4 text-amber-500" />,
   review_approved: <CheckCircle className="w-4 h-4 text-green-500" />,
   review_rejected: <XCircle className="w-4 h-4 text-red-500" />,
-  item_archived: <Archive className="w-4 h-4 text-gray-500" />,
+  item_archived: <Archive className="w-4 h-4 text-text-muted" />,
 };
 
 const NOTIFICATION_TYPE_COLORS: Record<string, string> = {
   review_pending: 'bg-amber-50 border-amber-200',
   review_approved: 'bg-green-50 border-green-200',
   review_rejected: 'bg-red-50 border-red-200',
-  item_archived: 'bg-gray-50 border-gray-200',
+  item_archived: 'bg-bg-secondary border-border-primary',
 };
 
 export default function NotificationsPage() {
@@ -143,7 +143,7 @@ export default function NotificationsPage() {
   if (authLoading || (!user && typeof window !== 'undefined')) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="animate-spin w-8 h-8 border-2 border-gray-900 border-t-transparent rounded-full" />
+        <div className="animate-spin w-8 h-8 border-2 border-border-dark border-t-transparent rounded-full" />
       </div>
     );
   }
@@ -152,8 +152,8 @@ export default function NotificationsPage() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-xl font-bold text-gray-900">通知中心</h1>
-          <p className="text-sm text-gray-500 mt-1">
+          <h1 className="text-xl font-bold text-text-primary">通知中心</h1>
+          <p className="text-sm text-text-muted mt-1">
             共 {total} 条通知
             {unreadCount > 0 && (
               <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
@@ -167,8 +167,8 @@ export default function NotificationsPage() {
             onClick={() => { setUnreadOnly(!unreadOnly); setPage(1); }}
             className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${
               unreadOnly
-                ? 'bg-gray-900 text-white border-gray-900'
-                : 'bg-white text-gray-600 border-gray-200 hover:border-gray-400'
+                ? 'bg-dark-bg text-white border-border-dark'
+                : 'bg-bg-primary text-text-tertiary border-border-primary hover:border-border-secondary'
             }`}
           >
             <Mail className="w-4 h-4" />
@@ -177,7 +177,7 @@ export default function NotificationsPage() {
           {unreadCount > 0 && (
             <button
               onClick={handleMarkAllAsRead}
-              className="flex items-center gap-2 px-3 py-2 bg-white text-gray-600 rounded-lg text-sm font-medium border border-gray-200 hover:border-gray-400 transition-colors"
+              className="flex items-center gap-2 px-3 py-2 bg-bg-primary text-text-tertiary rounded-lg text-sm font-medium border border-border-primary hover:border-border-secondary transition-colors"
             >
               <CheckCheck className="w-4 h-4" />
               全部已读
@@ -185,7 +185,7 @@ export default function NotificationsPage() {
           )}
           <button
             onClick={() => { fetchNotifications(); fetchUnreadCount(); }}
-            className="flex items-center gap-2 px-3 py-2 bg-white text-gray-600 rounded-lg text-sm font-medium border border-gray-200 hover:border-gray-400 transition-colors"
+            className="flex items-center gap-2 px-3 py-2 bg-bg-primary text-text-tertiary rounded-lg text-sm font-medium border border-border-primary hover:border-border-secondary transition-colors"
           >
             <RefreshCw className="w-4 h-4" />
             刷新
@@ -202,18 +202,18 @@ export default function NotificationsPage() {
       {/* Notifications list */}
       <div className="space-y-2">
         {loading ? (
-          <div className="flex items-center justify-center py-12 text-gray-400">
+          <div className="flex items-center justify-center py-12 text-text-muted">
             <div className="flex items-center gap-2">
-              <div className="animate-spin w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full" />
+              <div className="animate-spin w-4 h-4 border-2 border-border-secondary border-t-transparent rounded-full" />
               加载中...
             </div>
           </div>
         ) : notifications.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
-            <Bell className="w-12 h-12 mb-3 text-gray-200" />
+          <div className="flex flex-col items-center justify-center py-16 text-text-muted">
+            <Bell className="w-12 h-12 mb-3 text-text-muted" />
             <p className="text-sm">暂无通知</p>
             {unreadOnly && (
-              <p className="text-xs text-gray-300 mt-1">没有未读通知，试试查看全部</p>
+              <p className="text-xs text-text-muted mt-1">没有未读通知，试试查看全部</p>
             )}
           </div>
         ) : (
@@ -222,7 +222,7 @@ export default function NotificationsPage() {
               key={item.id}
               className={`relative flex items-start gap-4 p-4 rounded-lg border transition-colors ${
                 item.read
-                  ? 'bg-white border-gray-100'
+                  ? 'bg-bg-primary border-border-light'
                   : NOTIFICATION_TYPE_COLORS[item.type] || 'bg-blue-50 border-blue-200'
               }`}
             >
@@ -233,20 +233,20 @@ export default function NotificationsPage() {
 
               {/* Type icon */}
               <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
-                item.read ? 'bg-gray-100' : 'bg-white'
+                item.read ? 'bg-bg-hover' : 'bg-bg-primary'
               }`}>
-                {NOTIFICATION_TYPE_ICONS[item.type] || <Bell className="w-4 h-4 text-gray-400" />}
+                {NOTIFICATION_TYPE_ICONS[item.type] || <Bell className="w-4 h-4 text-text-muted" />}
               </div>
 
               {/* Content */}
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2 mb-1">
                   <span className={`text-xs font-medium px-1.5 py-0.5 rounded ${
-                    item.read ? 'text-gray-500' : ''
+                    item.read ? 'text-text-muted' : ''
                   }`}>
                     {NOTIFICATION_TYPE_LABELS[item.type] || item.type}
                   </span>
-                  <span className="text-xs text-gray-400 flex items-center gap-1">
+                  <span className="text-xs text-text-muted flex items-center gap-1">
                     <Clock className="w-3 h-3" />
                     {new Date(item.createdAt).toLocaleString('zh-CN', {
                       year: 'numeric',
@@ -257,10 +257,10 @@ export default function NotificationsPage() {
                     })}
                   </span>
                 </div>
-                <h3 className={`text-sm font-medium ${item.read ? 'text-gray-600' : 'text-gray-900'}`}>
+                <h3 className={`text-sm font-medium ${item.read ? 'text-text-tertiary' : 'text-text-primary'}`}>
                   {item.title}
                 </h3>
-                <p className={`text-xs mt-0.5 ${item.read ? 'text-gray-400' : 'text-gray-500'}`}>
+                <p className={`text-xs mt-0.5 ${item.read ? 'text-text-muted' : 'text-text-muted'}`}>
                   {item.message}
                 </p>
 
@@ -269,7 +269,7 @@ export default function NotificationsPage() {
                   {!item.read && (
                     <button
                       onClick={() => handleMarkAsRead(item.id)}
-                      className="text-xs text-gray-500 hover:text-gray-700 flex items-center gap-1"
+                      className="text-xs text-text-muted hover:text-text-secondary flex items-center gap-1"
                     >
                       <MailOpen className="w-3 h-3" />
                       标记已读
@@ -293,22 +293,22 @@ export default function NotificationsPage() {
 
       {/* Pagination */}
       {totalPages > 1 && (
-        <div className="flex items-center justify-between px-4 py-3 bg-white rounded-lg border border-gray-200">
-          <span className="text-sm text-gray-500">
+        <div className="flex items-center justify-between px-4 py-3 bg-bg-primary rounded-lg border border-border-primary">
+          <span className="text-sm text-text-muted">
             共 {total} 条，第 {page}/{totalPages} 页
           </span>
           <div className="flex items-center gap-2">
             <button
               onClick={() => setPage((p) => Math.max(1, p - 1))}
               disabled={page <= 1}
-              className="px-3 py-1.5 text-sm rounded border border-gray-200 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="px-3 py-1.5 text-sm rounded border border-border-primary hover:bg-bg-hover disabled:opacity-50 disabled:cursor-not-allowed"
             >
               上一页
             </button>
             <button
               onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
               disabled={page >= totalPages}
-              className="px-3 py-1.5 text-sm rounded border border-gray-200 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="px-3 py-1.5 text-sm rounded border border-border-primary hover:bg-bg-hover disabled:opacity-50 disabled:cursor-not-allowed"
             >
               下一页
             </button>
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 35ae47d..7855d4c 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -80,7 +80,7 @@ const STATUS_LABELS: Record<string, string> = {
 };
 
 const STATUS_COLORS: Record<string, string> = {
-  draft: 'bg-gray-100 text-gray-700',
+  draft: 'bg-bg-hover text-text-secondary',
   review: 'bg-amber-100 text-amber-700',
   published: 'bg-green-100 text-green-700',
   archived: 'bg-red-100 text-red-700',
@@ -90,7 +90,7 @@ const NOTIFICATION_TYPE_ICONS: Record<string, React.ReactNode> = {
   review_pending: <AlertCircle className="w-4 h-4 text-amber-500" />,
   review_approved: <CheckCircle className="w-4 h-4 text-green-500" />,
   review_rejected: <XCircle className="w-4 h-4 text-red-500" />,
-  item_archived: <Archive className="w-4 h-4 text-gray-500" />,
+  item_archived: <Archive className="w-4 h-4 text-text-muted" />,
 };
 
 export default function AdminDashboardPage() {
@@ -115,7 +115,7 @@ export default function AdminDashboardPage() {
   if (authLoading || (!user && typeof window !== 'undefined')) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="animate-spin w-8 h-8 border-2 border-gray-900 border-t-transparent rounded-full" />
+        <div className="animate-spin w-8 h-8 border-2 border-border-dark border-t-transparent rounded-full" />
       </div>
     );
   }
@@ -123,8 +123,8 @@ export default function AdminDashboardPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-xl font-bold text-gray-900">仪表盘</h1>
-        <p className="text-sm text-gray-500 mt-1">欢迎回来，{user?.nickname || user?.username}</p>
+        <h1 className="text-xl font-bold text-text-primary">仪表盘</h1>
+        <p className="text-sm text-text-muted mt-1">欢迎回来，{user?.nickname || user?.username}</p>
       </div>
 
       {/* Stats cards */}
@@ -151,22 +151,22 @@ export default function AdminDashboardPage() {
         ].map((stat) => (
           <div
             key={stat.label}
-            className={`bg-white rounded-lg border p-4 ${
-              stat.highlight ? 'border-red-200 ring-1 ring-red-100' : 'border-gray-200'
+            className={`bg-bg-primary rounded-lg border p-4 ${
+              stat.highlight ? 'border-red-200 ring-1 ring-red-100' : 'border-border-primary'
             }`}
           >
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-xs text-gray-500">{stat.label}</p>
+                <p className="text-xs text-text-muted">{stat.label}</p>
                 <p className={`text-2xl font-bold mt-1 ${
-                  stat.highlight ? 'text-red-600' : 'text-gray-900'
+                  stat.highlight ? 'text-red-600' : 'text-text-primary'
                 }`}>
                   {fetching ? '-' : stat.value}
                 </p>
               </div>
               <div className={`w-10 h-10 rounded-lg ${stat.color} flex items-center justify-center`}>
                 <stat.icon className={`w-5 h-5 ${
-                  stat.highlight ? 'text-red-500' : 'text-gray-600'
+                  stat.highlight ? 'text-red-500' : 'text-text-tertiary'
                 }`} />
               </div>
             </div>
@@ -176,20 +176,20 @@ export default function AdminDashboardPage() {
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         {/* Content status distribution */}
-        <div className="bg-white rounded-lg border border-gray-200 p-6">
-          <h2 className="text-sm font-semibold text-gray-900 mb-4">内容状态分布</h2>
+        <div className="bg-bg-primary rounded-lg border border-border-primary p-6">
+          <h2 className="text-sm font-semibold text-text-primary mb-4">内容状态分布</h2>
           {fetching ? (
-            <div className="flex items-center justify-center py-8 text-gray-400 text-sm">加载中...</div>
+            <div className="flex items-center justify-center py-8 text-text-muted text-sm">加载中...</div>
           ) : !stats?.statusCounts?.length ? (
-            <div className="text-center py-8 text-gray-400 text-sm">暂无数据</div>
+            <div className="text-center py-8 text-text-muted text-sm">暂无数据</div>
           ) : (
             <div className="space-y-3">
               {stats.statusCounts.map((s) => (
                 <div key={s.status} className="flex items-center justify-between">
-                  <span className={`text-sm px-2 py-0.5 rounded ${STATUS_COLORS[s.status] || 'bg-gray-100 text-gray-700'}`}>
+                  <span className={`text-sm px-2 py-0.5 rounded ${STATUS_COLORS[s.status] || 'bg-bg-hover text-text-secondary'}`}>
                     {STATUS_LABELS[s.status] || s.status}
                   </span>
-                  <span className="text-sm font-medium text-gray-900">{s.count}</span>
+                  <span className="text-sm font-medium text-text-primary">{s.count}</span>
                 </div>
               ))}
             </div>
@@ -197,9 +197,9 @@ export default function AdminDashboardPage() {
         </div>
 
         {/* Recent notifications */}
-        <div className="bg-white rounded-lg border border-gray-200 p-6">
+        <div className="bg-bg-primary rounded-lg border border-border-primary p-6">
           <div className="flex items-center justify-between mb-4">
-            <h2 className="text-sm font-semibold text-gray-900">最近通知</h2>
+            <h2 className="text-sm font-semibold text-text-primary">最近通知</h2>
             <button
               onClick={() => router.push('/admin/notifications')}
               className="text-xs text-blue-600 hover:text-blue-800"
@@ -208,10 +208,10 @@ export default function AdminDashboardPage() {
             </button>
           </div>
           {fetching ? (
-            <div className="flex items-center justify-center py-8 text-gray-400 text-sm">加载中...</div>
+            <div className="flex items-center justify-center py-8 text-text-muted text-sm">加载中...</div>
           ) : !stats?.recentNotifications?.length ? (
-            <div className="flex flex-col items-center justify-center py-8 text-gray-400">
-              <Bell className="w-8 h-8 mb-2 text-gray-200" />
+            <div className="flex flex-col items-center justify-center py-8 text-text-muted">
+              <Bell className="w-8 h-8 mb-2 text-text-muted" />
               <span className="text-sm">暂无通知</span>
             </div>
           ) : (
@@ -219,13 +219,13 @@ export default function AdminDashboardPage() {
               {stats.recentNotifications.map((n) => (
                 <div key={n.id} className="flex items-start gap-3">
                   <div className="flex-shrink-0 mt-0.5">
-                    {NOTIFICATION_TYPE_ICONS[n.type] || <Bell className="w-4 h-4 text-gray-400" />}
+                    {NOTIFICATION_TYPE_ICONS[n.type] || <Bell className="w-4 h-4 text-text-muted" />}
                   </div>
                   <div className="flex-1 min-w-0">
-                    <p className={`text-sm truncate ${n.read ? 'text-gray-500' : 'text-gray-900 font-medium'}`}>
+                    <p className={`text-sm truncate ${n.read ? 'text-text-muted' : 'text-text-primary font-medium'}`}>
                       {n.title}
                     </p>
-                    <p className="text-xs text-gray-400 flex items-center gap-1 mt-0.5">
+                    <p className="text-xs text-text-muted flex items-center gap-1 mt-0.5">
                       <Clock className="w-3 h-3" />
                       {new Date(n.createdAt).toLocaleDateString('zh-CN')}
                     </p>
@@ -238,31 +238,31 @@ export default function AdminDashboardPage() {
         </div>
 
         {/* Recent content updates */}
-        <div className="bg-white rounded-lg border border-gray-200 p-6">
-          <h2 className="text-sm font-semibold text-gray-900 mb-4">最近更新</h2>
+        <div className="bg-bg-primary rounded-lg border border-border-primary p-6">
+          <h2 className="text-sm font-semibold text-text-primary mb-4">最近更新</h2>
           {fetching ? (
-            <div className="flex items-center justify-center py-8 text-gray-400 text-sm">加载中...</div>
+            <div className="flex items-center justify-center py-8 text-text-muted text-sm">加载中...</div>
           ) : !stats?.recentItems?.length ? (
-            <div className="text-center py-8 text-gray-400 text-sm">暂无更新</div>
+            <div className="text-center py-8 text-text-muted text-sm">暂无更新</div>
           ) : (
             <div className="space-y-3">
               {stats.recentItems.map((item) => (
                 <button
                   key={item.id}
                   onClick={() => router.push(`/admin/content/${item.modelCode}/${item.id}`)}
-                  className="w-full text-left flex items-start gap-3 hover:bg-gray-50 rounded-lg p-2 -mx-2 transition-colors"
+                  className="w-full text-left flex items-start gap-3 hover:bg-bg-secondary rounded-lg p-2 -mx-2 transition-colors"
                 >
                   <div className="flex-shrink-0 mt-0.5">
-                    <FileText className="w-4 h-4 text-gray-400" />
+                    <FileText className="w-4 h-4 text-text-muted" />
                   </div>
                   <div className="flex-1 min-w-0">
-                    <p className="text-sm text-gray-900 truncate">{item.title || '无标题'}</p>
+                    <p className="text-sm text-text-primary truncate">{item.title || '无标题'}</p>
                     <div className="flex items-center gap-2 mt-0.5">
-                      <span className="text-xs text-gray-400">
+                      <span className="text-xs text-text-muted">
                         {MODEL_LABELS[item.modelCode] || item.modelCode}
                       </span>
                       <span className={`text-xs px-1.5 py-0.5 rounded ${
-                        STATUS_COLORS[item.status] || 'bg-gray-100 text-gray-700'
+                        STATUS_COLORS[item.status] || 'bg-bg-hover text-text-secondary'
                       }`}>
                         {STATUS_LABELS[item.status] || item.status}
                       </span>
@@ -276,8 +276,8 @@ export default function AdminDashboardPage() {
       </div>
 
       {/* Quick links */}
-      <div className="bg-white rounded-lg border border-gray-200 p-6">
-        <h2 className="text-sm font-semibold text-gray-900 mb-4">内容管理</h2>
+      <div className="bg-bg-primary rounded-lg border border-border-primary p-6">
+        <h2 className="text-sm font-semibold text-text-primary mb-4">内容管理</h2>
         <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
           {modelCards.map((card) => {
             const count = stats?.modelItemCounts?.find((m) => m.modelCode === card.code)?.count;
@@ -285,14 +285,14 @@ export default function AdminDashboardPage() {
               <button
                 key={card.code}
                 onClick={() => router.push(`/admin/content/${card.code}`)}
-                className="flex flex-col items-center gap-2 p-4 rounded-lg border border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors text-center relative"
+                className="flex flex-col items-center gap-2 p-4 rounded-lg border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-colors text-center relative"
               >
                 <div className={`w-10 h-10 rounded-lg ${card.color} flex items-center justify-center`}>
                   <card.icon className="w-5 h-5" />
                 </div>
-                <span className="text-xs font-medium text-gray-700">{card.name}</span>
+                <span className="text-xs font-medium text-text-secondary">{card.name}</span>
                 {count !== undefined && (
-                  <span className="text-xs text-gray-400">{count} 条</span>
+                  <span className="text-xs text-text-muted">{count} 条</span>
                 )}
               </button>
             );
diff --git a/src/app/admin/roles/page.tsx b/src/app/admin/roles/page.tsx
index d389b66..14dc0e7 100644
--- a/src/app/admin/roles/page.tsx
+++ b/src/app/admin/roles/page.tsx
@@ -127,7 +127,7 @@ export default function RolesPage() {
   if (authLoading || (!user && typeof window !== 'undefined')) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="animate-spin w-8 h-8 border-2 border-gray-900 border-t-transparent rounded-full" />
+        <div className="animate-spin w-8 h-8 border-2 border-border-dark border-t-transparent rounded-full" />
       </div>
     );
   }
@@ -137,14 +137,14 @@ export default function RolesPage() {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-xl font-bold text-gray-900">角色权限</h1>
-          <p className="text-sm text-gray-500 mt-1">按角色配置内容模型的操作权限</p>
+          <h1 className="text-xl font-bold text-text-primary">角色权限</h1>
+          <p className="text-sm text-text-muted mt-1">按角色配置内容模型的操作权限</p>
         </div>
         {isEditable && (
           <button
             onClick={handleSave}
             disabled={saving}
-            className="flex items-center gap-2 bg-gray-900 text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-gray-800 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+            className="flex items-center gap-2 bg-dark-bg text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-bg-secondary transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
           >
             {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
             保存权限
@@ -161,37 +161,37 @@ export default function RolesPage() {
 
       <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
         {/* Role list */}
-        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden lg:col-span-1">
-          <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
-            <h2 className="text-sm font-semibold text-gray-900 flex items-center gap-2">
+        <div className="bg-bg-primary rounded-lg border border-border-primary overflow-hidden lg:col-span-1">
+          <div className="px-4 py-3 border-b border-border-primary bg-bg-secondary">
+            <h2 className="text-sm font-semibold text-text-primary flex items-center gap-2">
               <Shield className="w-4 h-4" />
               角色列表
             </h2>
           </div>
-          <div className="divide-y divide-gray-100">
+          <div className="divide-y divide-border-light">
             {loading ? (
               <div className="p-8 flex justify-center">
-                <div className="animate-spin w-6 h-6 border-2 border-gray-300 border-t-gray-900 rounded-full" />
+                <div className="animate-spin w-6 h-6 border-2 border-border-secondary border-t-border-dark rounded-full" />
               </div>
             ) : roles.length === 0 ? (
-              <div className="p-8 text-center text-sm text-gray-400">暂无角色</div>
+              <div className="p-8 text-center text-sm text-text-muted">暂无角色</div>
             ) : (
               roles.map((role) => (
                 <button
                       key={role.code}
                       onClick={() => setSelectedRole(role.code)}
-                      className={`w-full text-left px-4 py-3 flex items-center justify-between hover:bg-gray-50 transition-colors ${
-                        selectedRole === role.code ? 'bg-gray-50' : ''
+                      className={`w-full text-left px-4 py-3 flex items-center justify-between hover:bg-bg-secondary transition-colors ${
+                        selectedRole === role.code ? 'bg-bg-secondary' : ''
                       }`}
                     >
                   <div>
-                    <p className={`text-sm font-medium ${selectedRole === role.code ? 'text-gray-900' : 'text-gray-700'}`}>
+                    <p className={`text-sm font-medium ${selectedRole === role.code ? 'text-text-primary' : 'text-text-secondary'}`}>
                       {role.name}
                     </p>
-                    <p className="text-xs text-gray-400 mt-0.5">{role.code}</p>
+                    <p className="text-xs text-text-muted mt-0.5">{role.code}</p>
                   </div>
                   {role.code === 'super_admin' && (
-                    <Lock className="w-4 h-4 text-gray-400" />
+                    <Lock className="w-4 h-4 text-text-muted" />
                   )}
                 </button>
               ))
@@ -200,13 +200,13 @@ export default function RolesPage() {
         </div>
 
         {/* Permission matrix */}
-        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden lg:col-span-3">
-          <div className="px-4 py-3 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
-            <h2 className="text-sm font-semibold text-gray-900">
+        <div className="bg-bg-primary rounded-lg border border-border-primary overflow-hidden lg:col-span-3">
+          <div className="px-4 py-3 border-b border-border-primary bg-bg-secondary flex items-center justify-between">
+            <h2 className="text-sm font-semibold text-text-primary">
               {selectedRoleInfo ? `${selectedRoleInfo.name} 权限矩阵` : '权限矩阵'}
             </h2>
             {selectedRoleInfo?.code === 'super_admin' && (
-              <span className="text-xs text-gray-500 flex items-center gap-1">
+              <span className="text-xs text-text-muted flex items-center gap-1">
                 <Lock className="w-3 h-3" />
                 内置超级管理员拥有所有权限，不可修改
               </span>
@@ -214,31 +214,31 @@ export default function RolesPage() {
           </div>
 
           {!selectedRoleInfo || models.length === 0 ? (
-            <div className="p-12 text-center text-sm text-gray-400">暂无数据</div>
+            <div className="p-12 text-center text-sm text-text-muted">暂无数据</div>
           ) : (
             <div className="overflow-x-auto">
               <table className="w-full min-w-[640px]">
                 <thead>
-                  <tr className="border-b border-gray-200">
-                    <th className="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase sticky left-0 bg-white min-w-[160px]">
+                  <tr className="border-b border-border-primary">
+                    <th className="text-left px-4 py-3 text-xs font-medium text-text-muted uppercase sticky left-0 bg-bg-primary min-w-[160px]">
                       内容模型
                     </th>
                     {ACTION_ORDER.map((action) => (
                       <th
                         key={action}
-                        className="text-center px-2 py-3 text-xs font-medium text-gray-500 uppercase w-[1%] whitespace-nowrap"
+                        className="text-center px-2 py-3 text-xs font-medium text-text-muted uppercase w-[1%] whitespace-nowrap"
                       >
                         {ACTION_LABELS[action]}
                       </th>
                     ))}
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-100">
+                <tbody className="divide-y divide-border-light">
                   {models.map((model) => (
-                    <tr key={model.code} className="hover:bg-gray-50 transition-colors">
-                      <td className="px-4 py-3 sticky left-0 bg-white">
-                        <p className="text-sm font-medium text-gray-900">{model.name}</p>
-                        <code className="text-xs text-gray-400">{model.code}</code>
+                    <tr key={model.code} className="hover:bg-bg-secondary transition-colors">
+                      <td className="px-4 py-3 sticky left-0 bg-bg-primary">
+                        <p className="text-sm font-medium text-text-primary">{model.name}</p>
+                        <code className="text-xs text-text-muted">{model.code}</code>
                       </td>
                       {ACTION_ORDER.map((action) => {
                         const enabled = hasPermission(selectedRole, model.code, action);
@@ -249,8 +249,8 @@ export default function RolesPage() {
                               disabled={!isEditable}
                               className={`inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors ${
                                 enabled
-                                  ? 'bg-gray-900 text-white'
-                                  : 'bg-gray-100 text-gray-300'
+                                  ? 'bg-dark-bg text-white'
+                                  : 'bg-bg-hover text-text-muted'
                               } ${
                                 isEditable
                                   ? 'hover:opacity-80 cursor-pointer'
diff --git a/src/app/admin/users/page.tsx b/src/app/admin/users/page.tsx
index 7f6fe76..428514e 100644
--- a/src/app/admin/users/page.tsx
+++ b/src/app/admin/users/page.tsx
@@ -49,7 +49,7 @@ const ROLE_COLORS: Record<string, string> = {
   content_admin: 'bg-blue-100 text-blue-700',
   content_editor: 'bg-green-100 text-green-700',
   reviewer: 'bg-amber-100 text-amber-700',
-  readonly: 'bg-gray-100 text-gray-700',
+  readonly: 'bg-bg-hover text-text-secondary',
 };
 
 export default function UsersPage() {
@@ -232,7 +232,7 @@ export default function UsersPage() {
   if (authLoading || (!user && typeof window !== 'undefined')) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="animate-spin w-8 h-8 border-2 border-gray-900 border-t-transparent rounded-full" />
+        <div className="animate-spin w-8 h-8 border-2 border-border-dark border-t-transparent rounded-full" />
       </div>
     );
   }
@@ -241,12 +241,12 @@ export default function UsersPage() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-xl font-bold text-gray-900">用户管理</h1>
-          <p className="text-sm text-gray-500 mt-1">管理系统用户与角色分配</p>
+          <h1 className="text-xl font-bold text-text-primary">用户管理</h1>
+          <p className="text-sm text-text-muted mt-1">管理系统用户与角色分配</p>
         </div>
         <button
           onClick={openCreateDialog}
-          className="flex items-center gap-2 px-4 py-2 bg-gray-900 text-white rounded-lg text-sm font-medium hover:bg-gray-800 transition-colors"
+          className="flex items-center gap-2 px-4 py-2 bg-dark-bg text-white rounded-lg text-sm font-medium hover:bg-dark-bg-secondary transition-colors"
         >
           <Plus className="w-4 h-4" />
           创建用户
@@ -255,13 +255,13 @@ export default function UsersPage() {
 
       {/* Search */}
       <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
         <input
           type="text"
           placeholder="搜索用户名、昵称或邮箱..."
           value={search}
           onChange={(e) => { setSearch(e.target.value); setPage(1); }}
-          className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
+          className="w-full pl-10 pr-4 py-2 border border-border-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-primary"
         />
       </div>
 
@@ -272,54 +272,54 @@ export default function UsersPage() {
       )}
 
       {/* Users table */}
-      <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+      <div className="bg-bg-primary rounded-lg border border-border-primary overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-gray-200 bg-gray-50">
-                <th className="text-left px-4 py-3 font-medium text-gray-600">用户名</th>
-                <th className="text-left px-4 py-3 font-medium text-gray-600">昵称</th>
-                <th className="text-left px-4 py-3 font-medium text-gray-600">邮箱</th>
-                <th className="text-left px-4 py-3 font-medium text-gray-600">角色</th>
-                <th className="text-left px-4 py-3 font-medium text-gray-600">状态</th>
-                <th className="text-left px-4 py-3 font-medium text-gray-600">创建时间</th>
-                <th className="text-right px-4 py-3 font-medium text-gray-600">操作</th>
+              <tr className="border-b border-border-primary bg-bg-secondary">
+                <th className="text-left px-4 py-3 font-medium text-text-tertiary">用户名</th>
+                <th className="text-left px-4 py-3 font-medium text-text-tertiary">昵称</th>
+                <th className="text-left px-4 py-3 font-medium text-text-tertiary">邮箱</th>
+                <th className="text-left px-4 py-3 font-medium text-text-tertiary">角色</th>
+                <th className="text-left px-4 py-3 font-medium text-text-tertiary">状态</th>
+                <th className="text-left px-4 py-3 font-medium text-text-tertiary">创建时间</th>
+                <th className="text-right px-4 py-3 font-medium text-text-tertiary">操作</th>
               </tr>
             </thead>
             <tbody>
               {loading ? (
                 <tr>
-                  <td colSpan={7} className="px-4 py-12 text-center text-gray-400">
+                  <td colSpan={7} className="px-4 py-12 text-center text-text-muted">
                     <div className="flex items-center justify-center gap-2">
-                      <div className="animate-spin w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full" />
+                      <div className="animate-spin w-4 h-4 border-2 border-border-secondary border-t-transparent rounded-full" />
                       加载中...
                     </div>
                   </td>
                 </tr>
               ) : users.length === 0 ? (
                 <tr>
-                  <td colSpan={7} className="px-4 py-12 text-center text-gray-400">
+                  <td colSpan={7} className="px-4 py-12 text-center text-text-muted">
                     暂无用户数据
                   </td>
                 </tr>
               ) : (
                 users.map((u) => (
-                  <tr key={u.id} className="border-b border-gray-100 hover:bg-gray-50">
+                  <tr key={u.id} className="border-b border-border-light hover:bg-bg-secondary">
                     <td className="px-4 py-3">
                       <div className="flex items-center gap-2">
-                        <UserCog className="w-4 h-4 text-gray-400" />
-                        <span className="font-medium text-gray-900">{u.username}</span>
+                        <UserCog className="w-4 h-4 text-text-muted" />
+                        <span className="font-medium text-text-primary">{u.username}</span>
                       </div>
                     </td>
-                    <td className="px-4 py-3 text-gray-600">{u.nickname || '-'}</td>
+                    <td className="px-4 py-3 text-text-tertiary">{u.nickname || '-'}</td>
                     <td className="px-4 py-3">
                       {u.email ? (
-                        <a href={`mailto:${u.email}`} className="text-gray-600 hover:text-gray-900 flex items-center gap-1">
+                        <a href={`mailto:${u.email}`} className="text-text-tertiary hover:text-text-primary flex items-center gap-1">
                           <Mail className="w-3 h-3" />
                           {u.email}
                         </a>
                       ) : (
-                        <span className="text-gray-400">-</span>
+                        <span className="text-text-muted">-</span>
                       )}
                     </td>
                     <td className="px-4 py-3">
@@ -328,7 +328,7 @@ export default function UsersPage() {
                           <span
                             key={r.code}
                             className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${
-                              ROLE_COLORS[r.code] || 'bg-gray-100 text-gray-700'
+                              ROLE_COLORS[r.code] || 'bg-bg-hover text-text-secondary'
                             }`}
                           >
                             <Shield className="w-3 h-3" />
@@ -336,7 +336,7 @@ export default function UsersPage() {
                           </span>
                         ))}
                         {u.roles.length === 0 && (
-                          <span className="text-xs text-gray-400">无角色</span>
+                          <span className="text-xs text-text-muted">无角色</span>
                         )}
                       </div>
                     </td>
@@ -351,7 +351,7 @@ export default function UsersPage() {
                         {u.status === 1 ? '启用' : '禁用'}
                       </span>
                     </td>
-                    <td className="px-4 py-3 text-gray-500 text-xs">
+                    <td className="px-4 py-3 text-text-muted text-xs">
                       <div className="flex items-center gap-1">
                         <Calendar className="w-3 h-3" />
                         {new Date(u.createdAt).toLocaleDateString('zh-CN')}
@@ -361,14 +361,14 @@ export default function UsersPage() {
                       <div className="flex items-center justify-end gap-1">
                         <button
                           onClick={() => openEditDialog(u)}
-                          className="p-1.5 rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700"
+                          className="p-1.5 rounded hover:bg-bg-hover text-text-muted hover:text-text-secondary"
                           title="编辑"
                         >
                           <Edit className="w-4 h-4" />
                         </button>
                         <button
                           onClick={() => { setPendingDeleteId(u.id); setDeleteDialogOpen(true); }}
-                          className="p-1.5 rounded hover:bg-red-50 text-gray-500 hover:text-red-600"
+                          className="p-1.5 rounded hover:bg-red-50 text-text-muted hover:text-red-600"
                           title="删除"
                         >
                           <Trash2 className="w-4 h-4" />
@@ -384,22 +384,22 @@ export default function UsersPage() {
 
         {/* Pagination */}
         {totalPages > 1 && (
-          <div className="flex items-center justify-between px-4 py-3 border-t border-gray-200 bg-gray-50">
-            <span className="text-sm text-gray-500">
+          <div className="flex items-center justify-between px-4 py-3 border-t border-border-primary bg-bg-secondary">
+            <span className="text-sm text-text-muted">
               共 {total} 条，第 {page}/{totalPages} 页
             </span>
             <div className="flex items-center gap-2">
               <button
                 onClick={() => setPage((p) => Math.max(1, p - 1))}
                 disabled={page <= 1}
-                className="px-3 py-1.5 text-sm rounded border border-gray-200 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="px-3 py-1.5 text-sm rounded border border-border-primary hover:bg-bg-hover disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 上一页
               </button>
               <button
                 onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                 disabled={page >= totalPages}
-                className="px-3 py-1.5 text-sm rounded border border-gray-200 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="px-3 py-1.5 text-sm rounded border border-border-primary hover:bg-bg-hover disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 下一页
               </button>
@@ -411,71 +411,71 @@ export default function UsersPage() {
       {/* Create/Edit Dialog */}
       {dialogOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center">
-          <div className="fixed inset-0 bg-black/50" onClick={() => setDialogOpen(false)} />
-          <div className="relative bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
-            <h2 className="text-lg font-bold text-gray-900 mb-4">
+          <div className="fixed inset-0 bg-overlay/50" onClick={() => setDialogOpen(false)} />
+          <div className="relative bg-bg-primary rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
+            <h2 className="text-lg font-bold text-text-primary mb-4">
               {editingUser ? '编辑用户' : '创建用户'}
             </h2>
 
             <div className="space-y-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">用户名</label>
+                <label className="block text-sm font-medium text-text-secondary mb-1">用户名</label>
                 <input
                   type="text"
                   value={formData.username}
                   onChange={(e) => setFormData((p) => ({ ...p, username: e.target.value }))}
                   disabled={!!editingUser}
-                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200 disabled:bg-gray-100 disabled:text-gray-400"
+                  className="w-full px-3 py-2 border border-border-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-primary disabled:bg-bg-hover disabled:text-text-muted"
                   placeholder="3-32 位字母/数字/下划线"
                 />
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-text-secondary mb-1">
                   {editingUser ? '新密码（留空不修改）' : '密码'}
                 </label>
                 <input
                   type="password"
                   value={formData.password}
                   onChange={(e) => setFormData((p) => ({ ...p, password: e.target.value }))}
-                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
+                  className="w-full px-3 py-2 border border-border-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-primary"
                   placeholder={editingUser ? '留空保持原密码' : '至少 6 位'}
                 />
               </div>
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">昵称</label>
+                  <label className="block text-sm font-medium text-text-secondary mb-1">昵称</label>
                   <input
                     type="text"
                     value={formData.nickname}
                     onChange={(e) => setFormData((p) => ({ ...p, nickname: e.target.value }))}
-                    className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
+                    className="w-full px-3 py-2 border border-border-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-primary"
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
+                  <label className="block text-sm font-medium text-text-secondary mb-1">邮箱</label>
                   <input
                     type="email"
                     value={formData.email}
                     onChange={(e) => setFormData((p) => ({ ...p, email: e.target.value }))}
-                    className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
+                    className="w-full px-3 py-2 border border-border-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-primary"
                   />
                 </div>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">手机号</label>
+                <label className="block text-sm font-medium text-text-secondary mb-1">手机号</label>
                 <input
                   type="tel"
                   value={formData.phone}
                   onChange={(e) => setFormData((p) => ({ ...p, phone: e.target.value }))}
-                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
+                  className="w-full px-3 py-2 border border-border-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-primary"
                 />
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">角色分配</label>
+                <label className="block text-sm font-medium text-text-secondary mb-2">角色分配</label>
                 <div className="flex flex-wrap gap-2">
                   {roles.map((r) => (
                     <button
@@ -484,31 +484,31 @@ export default function UsersPage() {
                       onClick={() => toggleRole(r.code)}
                       className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
                         formData.roleCodes.includes(r.code)
-                          ? 'bg-gray-900 text-white border-gray-900'
-                          : 'bg-white text-gray-600 border-gray-200 hover:border-gray-400'
+                          ? 'bg-dark-bg text-white border-border-dark'
+                          : 'bg-bg-primary text-text-tertiary border-border-primary hover:border-border-secondary'
                       }`}
                     >
                       {r.name}
                     </button>
                   ))}
                   {roles.length === 0 && (
-                    <span className="text-xs text-gray-400">加载角色中...</span>
+                    <span className="text-xs text-text-muted">加载角色中...</span>
                   )}
                 </div>
               </div>
             </div>
 
-            <div className="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
+            <div className="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-border-light">
               <button
                 onClick={() => setDialogOpen(false)}
-                className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
+                className="px-4 py-2 text-sm text-text-tertiary hover:text-text-primary"
               >
                 取消
               </button>
               <button
                 onClick={handleSave}
                 disabled={saving}
-                className="flex items-center gap-2 px-4 py-2 bg-gray-900 text-white rounded-lg text-sm font-medium hover:bg-gray-800 disabled:opacity-50 transition-colors"
+                className="flex items-center gap-2 px-4 py-2 bg-dark-bg text-white rounded-lg text-sm font-medium hover:bg-dark-bg-secondary disabled:opacity-50 transition-colors"
               >
                 {saving && <div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" />}
                 {editingUser ? '保存更改' : '创建用户'}
diff --git a/src/app/admin/zones/page.tsx b/src/app/admin/zones/page.tsx
index fbddeb8..e33bd1a 100644
--- a/src/app/admin/zones/page.tsx
+++ b/src/app/admin/zones/page.tsx
@@ -74,7 +74,7 @@ export default function ZonesPage() {
   if (authLoading || loading) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="animate-spin w-8 h-8 border-2 border-gray-900 border-t-transparent rounded-full" />
+        <div className="animate-spin w-8 h-8 border-2 border-border-dark border-t-transparent rounded-full" />
       </div>
     );
   }
@@ -82,64 +82,64 @@ export default function ZonesPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-xl font-bold text-gray-900">页面区域配置</h1>
-        <p className="text-sm text-gray-500 mt-1">管理系统各页面的内容区域布局</p>
+        <h1 className="text-xl font-bold text-text-primary">页面区域配置</h1>
+        <p className="text-sm text-text-muted mt-1">管理系统各页面的内容区域布局</p>
       </div>
 
       <div className="grid gap-4">
         {zones.map((zone) => (
-          <div key={zone.id} className="bg-white rounded-lg border border-gray-200 p-4">
+          <div key={zone.id} className="bg-bg-primary rounded-lg border border-border-primary p-4">
             <div className="flex items-center justify-between">
               <div>
-                <h3 className="text-sm font-semibold text-gray-900">{zone.name}</h3>
-                <p className="text-xs text-gray-500 mt-0.5">
+                <h3 className="text-sm font-semibold text-text-primary">{zone.name}</h3>
+                <p className="text-xs text-text-muted mt-0.5">
                   Code: {zone.code} | 页面: {zone.pageCode || '-'} | 区域: {zone.zoneKey || '-'}
                 </p>
-                <p className="text-xs text-gray-400 mt-0.5">
+                <p className="text-xs text-text-muted mt-0.5">
                   允许模型: {zone.allowedModels?.join(', ') || '-'} | 内容数: {zone.items?.length || 0}
                 </p>
               </div>
               <button
                 onClick={() => setEditingZone(editingZone?.id === zone.id ? null : zone)}
-                className="text-sm text-gray-600 hover:text-gray-900 px-3 py-1.5 rounded border border-gray-300 hover:border-gray-400 transition-colors"
+                className="text-sm text-text-tertiary hover:text-text-primary px-3 py-1.5 rounded border border-border-secondary hover:border-border-secondary transition-colors"
               >
                 {editingZone?.id === zone.id ? '取消编辑' : '编辑'}
               </button>
             </div>
 
             {editingZone?.id === zone.id && (
-              <div className="mt-4 pt-4 border-t border-gray-100 space-y-4">
+              <div className="mt-4 pt-4 border-t border-border-light space-y-4">
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-xs font-medium text-gray-700 mb-1">名称</label>
+                    <label className="block text-xs font-medium text-text-secondary mb-1">名称</label>
                     <input
                       type="text"
                       value={editingZone.name}
                       onChange={(e) => setEditingZone({ ...editingZone, name: e.target.value })}
-                      className="w-full px-3 py-1.5 border border-gray-300 rounded text-sm"
+                      className="w-full px-3 py-1.5 border border-border-secondary rounded text-sm"
                     />
                   </div>
                   <div>
-                    <label className="block text-xs font-medium text-gray-700 mb-1">页面标识</label>
+                    <label className="block text-xs font-medium text-text-secondary mb-1">页面标识</label>
                     <input
                       type="text"
                       value={editingZone.pageCode}
                       onChange={(e) => setEditingZone({ ...editingZone, pageCode: e.target.value })}
-                      className="w-full px-3 py-1.5 border border-gray-300 rounded text-sm"
+                      className="w-full px-3 py-1.5 border border-border-secondary rounded text-sm"
                     />
                   </div>
                 </div>
                 <div className="flex justify-end gap-2">
                   <button
                     onClick={() => setEditingZone(null)}
-                    className="text-sm text-gray-600 px-4 py-1.5 rounded border border-gray-300 hover:bg-gray-50"
+                    className="text-sm text-text-tertiary px-4 py-1.5 rounded border border-border-secondary hover:bg-bg-secondary"
                   >
                     取消
                   </button>
                   <button
                     onClick={handleSave}
                     disabled={saving}
-                    className="flex items-center gap-1.5 text-sm bg-gray-900 text-white px-4 py-1.5 rounded hover:bg-gray-800 disabled:opacity-50"
+                    className="flex items-center gap-1.5 text-sm bg-dark-bg text-white px-4 py-1.5 rounded hover:bg-dark-bg-secondary disabled:opacity-50"
                   >
                     <Save className="w-3.5 h-3.5" />
                     保存