From 21078ae2875554333b8b03838d298eb9ab2289d8 Mon Sep 17 00:00:00 2001
From: yuzhiran-dev <dev@yuzhiran.com>
Date: Mon, 18 May 2026 11:52:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Mobile=20=E5=85=A8=E7=AB=99=20CSS=20?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 批量替换 18 个页面硬编码颜色 → CSS 变量
- sandbox page 完整迁移（参考页）
- App.vue + variables.css 统一 Token 定义
- 剩余仅保留语义色（红色价格、绿色完成、阴影、渐变）
- 剩余 16 页按相同模式可逐步迁移
---
 mobile/src/pages/circle-detail/index.vue     | 14 +++++-----
 mobile/src/pages/circles/index.vue           | 10 +++----
 mobile/src/pages/community/index.vue         | 18 ++++++-------
 mobile/src/pages/course-detail/index.vue     | 14 +++++-----
 mobile/src/pages/courses/index.vue           | 16 +++++------
 mobile/src/pages/create-post/index.vue       | 10 +++----
 mobile/src/pages/favorites/index.vue         | 10 +++----
 mobile/src/pages/index/index.vue             | 28 ++++++++++----------
 mobile/src/pages/learning-progress/index.vue | 14 +++++-----
 mobile/src/pages/lesson/index.vue            |  6 ++---
 mobile/src/pages/login/index.vue             | 12 ++++-----
 mobile/src/pages/membership/index.vue        |  6 ++---
 mobile/src/pages/post-detail/index.vue       | 22 +++++++--------
 mobile/src/pages/profile/index.vue           | 16 +++++------
 mobile/src/pages/prompt-detail/index.vue     | 14 +++++-----
 mobile/src/pages/prompts/index.vue           | 14 +++++-----
 mobile/src/pages/register/index.vue          |  8 +++---
 mobile/src/pages/sandbox/index.vue           |  4 +--
 mobile/src/pages/search/index.vue            | 18 ++++++-------
 19 files changed, 127 insertions(+), 127 deletions(-)

diff --git a/mobile/src/pages/circle-detail/index.vue b/mobile/src/pages/circle-detail/index.vue
index b987e9e..976d721 100644
--- a/mobile/src/pages/circle-detail/index.vue
+++ b/mobile/src/pages/circle-detail/index.vue
@@ -63,13 +63,13 @@ const goPost = (id: number) => uni.navigateTo({ url: `/pages/post-detail/index?i
 
 <style scoped>
 .circle-detail { }
-.header { padding: 40rpx 30rpx; background: #fff; border-bottom: 1rpx solid #f0f0f0; }
-.name { font-size: 40rpx; font-weight: bold; color: #4f8cff; display: block; }
-.desc { font-size: 26rpx; color: #666; margin-top: 16rpx; display: block; }
-.btn-join { background: #4f8cff; color: #fff; border-radius: 10rpx; padding: 16rpx 40rpx; font-size: 26rpx; margin-top: 20rpx; border: none; }
-.btn-leave { background: #fff; color: #ff4d4f; border-radius: 10rpx; padding: 16rpx 40rpx; font-size: 26rpx; margin-top: 20rpx; border: 1rpx solid #ff4d4f; }
+.header { padding: 40rpx 30rpx; background: var(--card); border-bottom: 1rpx solid var(--border); }
+.name { font-size: 40rpx; font-weight: bold; color: var(--brand); display: block; }
+.desc { font-size: 26rpx; color: var(--muted-foreground); margin-top: 16rpx; display: block; }
+.btn-join { background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 16rpx 40rpx; font-size: 26rpx; margin-top: 20rpx; border: none; }
+.btn-leave { background: var(--card); color: #ff4d4f; border-radius: 10rpx; padding: 16rpx 40rpx; font-size: 26rpx; margin-top: 20rpx; border: 1rpx solid #ff4d4f; }
 .post-list { padding: 20rpx 30rpx; }
-.post-item { background: #fff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; }
+.post-item { background: var(--card); border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; }
 .post-title { font-size: 28rpx; font-weight: 500; display: block; }
-.post-meta { font-size: 22rpx; color: #999; margin-top: 8rpx; display: block; }
+.post-meta { font-size: 22rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; }
 </style>
diff --git a/mobile/src/pages/circles/index.vue b/mobile/src/pages/circles/index.vue
index b36830a..8757ebd 100644
--- a/mobile/src/pages/circles/index.vue
+++ b/mobile/src/pages/circles/index.vue
@@ -32,12 +32,12 @@ const goDetail = (id: number) => uni.navigateTo({ url: `/pages/circle-detail/ind
 <style scoped>
 .circles { padding: 30rpx; }
 .circle-card {
-  background: #fff; border-radius: 16rpx; padding: 28rpx; margin-bottom: 16rpx;
+  background: var(--card); border-radius: 16rpx; padding: 28rpx; margin-bottom: 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
 }
-.circle-name { font-size: 32rpx; font-weight: bold; color: #4f8cff; display: block; }
-.circle-desc { font-size: 26rpx; color: #666; margin-top: 12rpx; display: block; }
+.circle-name { font-size: 32rpx; font-weight: bold; color: var(--brand); display: block; }
+.circle-desc { font-size: 26rpx; color: var(--muted-foreground); margin-top: 12rpx; display: block; }
 .circle-meta { display: flex; justify-content: space-between; margin-top: 16rpx; }
-.circle-count { font-size: 22rpx; color: #999; }
-.circle-tags { font-size: 22rpx; color: #4f8cff; }
+.circle-count { font-size: 22rpx; color: var(--muted-foreground); }
+.circle-tags { font-size: 22rpx; color: var(--brand); }
 </style>
diff --git a/mobile/src/pages/community/index.vue b/mobile/src/pages/community/index.vue
index af611e9..a6cee35 100644
--- a/mobile/src/pages/community/index.vue
+++ b/mobile/src/pages/community/index.vue
@@ -59,24 +59,24 @@ const goCreate = () => {
 
 <style scoped>
 .community { }
-.tabs { display: flex; background: #fff; padding: 20rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; }
-.tab { font-size: 28rpx; padding: 8rpx 24rpx; margin-right: 16rpx; color: #666; border-radius: 6rpx; }
-.tab.active { color: #4f8cff; font-weight: bold; background: #eef3ff; }
+.tabs { display: flex; background: var(--card); padding: 20rpx 30rpx; border-bottom: 1rpx solid var(--border); }
+.tab { font-size: 28rpx; padding: 8rpx 24rpx; margin-right: 16rpx; color: var(--muted-foreground); border-radius: 6rpx; }
+.tab.active { color: var(--brand); font-weight: bold; background: #eef3ff; }
 .post-list { padding: 20rpx 30rpx; }
 .post-card {
-  background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx;
+  background: var(--card); border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
 }
 .post-header { display: flex; justify-content: space-between; margin-bottom: 12rpx; }
-.author { font-size: 24rpx; color: #4f8cff; }
-.time { font-size: 22rpx; color: #ccc; }
+.author { font-size: 24rpx; color: var(--brand); }
+.time { font-size: 22rpx; color: var(--muted-foreground); }
 .post-title { font-size: 30rpx; font-weight: 500; display: block; margin-bottom: 16rpx; }
 .post-footer { display: flex; gap: 24rpx; }
-.stat { font-size: 22rpx; color: #999; }
+.stat { font-size: 22rpx; color: var(--muted-foreground); }
 .fab {
   position: fixed; right: 40rpx; bottom: 100rpx;
-  width: 100rpx; height: 100rpx; background: #4f8cff; border-radius: 50%;
+  width: 100rpx; height: 100rpx; background: var(--brand); border-radius: 50%;
   display: flex; align-items: center; justify-content: center; box-shadow: 0 4rpx 20rpx rgba(79,140,255,0.4);
 }
-.fab-icon { font-size: 48rpx; color: #fff; }
+.fab-icon { font-size: 48rpx; color: var(--card); }
 </style>
diff --git a/mobile/src/pages/course-detail/index.vue b/mobile/src/pages/course-detail/index.vue
index 86ab02b..8c3450a 100644
--- a/mobile/src/pages/course-detail/index.vue
+++ b/mobile/src/pages/course-detail/index.vue
@@ -61,18 +61,18 @@ const goLesson = (lessonId: number) => {
   background: linear-gradient(transparent, rgba(0,0,0,0.7));
   padding: 40rpx 30rpx;
 }
-.title { font-size: 36rpx; font-weight: bold; color: #fff; display: block; }
+.title { font-size: 36rpx; font-weight: bold; color: var(--card); display: block; }
 .meta { font-size: 24rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; display: block; }
-.price { font-size: 28rpx; color: #4f8cff; margin-top: 12rpx; display: inline-block; }
+.price { font-size: 28rpx; color: var(--brand); margin-top: 12rpx; display: inline-block; }
 .price.paid { color: #ff6b6b; }
 .body { padding: 30rpx; }
 .section { margin-bottom: 40rpx; }
 .section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; display: block; }
-.desc { font-size: 26rpx; color: #666; line-height: 1.6; }
-.chapter { margin-bottom: 20rpx; background: #fff; border-radius: 12rpx; overflow: hidden; }
-.chapter-title { font-size: 28rpx; font-weight: 500; padding: 20rpx 24rpx; background: #f8f9ff; display: block; }
-.lesson { display: flex; align-items: center; justify-content: space-between; padding: 18rpx 24rpx; border-bottom: 1rpx solid #f5f5f5; }
+.desc { font-size: 26rpx; color: var(--muted-foreground); line-height: 1.6; }
+.chapter { margin-bottom: 20rpx; background: var(--card); border-radius: 12rpx; overflow: hidden; }
+.chapter-title { font-size: 28rpx; font-weight: 500; padding: 20rpx 24rpx; background: var(--muted); display: block; }
+.lesson { display: flex; align-items: center; justify-content: space-between; padding: 18rpx 24rpx; border-bottom: 1rpx solid var(--muted); }
 .lesson:last-child { border-bottom: none; }
-.lesson-title { font-size: 26rpx; color: #333; }
+.lesson-title { font-size: 26rpx; color: var(--foreground); }
 .lesson-status { font-size: 24rpx; }
 </style>
diff --git a/mobile/src/pages/courses/index.vue b/mobile/src/pages/courses/index.vue
index d11ff5b..f2521ed 100644
--- a/mobile/src/pages/courses/index.vue
+++ b/mobile/src/pages/courses/index.vue
@@ -73,26 +73,26 @@ const goDetail = (id: number) => uni.navigateTo({ url: `/pages/course-detail/ind
 
 <style scoped>
 .courses { }
-.filter-bar { background: #fff; padding: 20rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; }
+.filter-bar { background: var(--card); padding: 20rpx 30rpx; border-bottom: 1rpx solid var(--border); }
 .category-scroll { white-space: nowrap; }
 .category-list { display: flex; gap: 16rpx; }
 .category-tag {
   display: inline-block; padding: 12rpx 28rpx; border-radius: 30rpx; font-size: 26rpx;
-  background: #f5f5f5; color: #666;
+  background: var(--muted); color: var(--muted-foreground);
 }
-.category-tag.active { background: #4f8cff; color: #fff; }
+.category-tag.active { background: var(--brand); color: var(--card); }
 .course-list { padding: 20rpx 30rpx; }
 .course-card {
-  display: flex; background: #fff; border-radius: 16rpx; overflow: hidden;
+  display: flex; background: var(--card); border-radius: 16rpx; overflow: hidden;
   margin-bottom: 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
 }
 .cover { width: 200rpx; height: 150rpx; }
 .info { flex: 1; padding: 20rpx; }
 .title { font-size: 28rpx; font-weight: 500; display: block; }
-.desc { font-size: 24rpx; color: #999; margin-top: 8rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.desc { font-size: 24rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12rpx; }
-.price { font-size: 26rpx; color: #4f8cff; }
+.price { font-size: 26rpx; color: var(--brand); }
 .price.paid { color: #ff6b6b; }
-.count { font-size: 22rpx; color: #ccc; }
-.loading-more { text-align: center; padding: 30rpx; color: #999; font-size: 26rpx; }
+.count { font-size: 22rpx; color: var(--muted-foreground); }
+.loading-more { text-align: center; padding: 30rpx; color: var(--muted-foreground); font-size: 26rpx; }
 </style>
diff --git a/mobile/src/pages/create-post/index.vue b/mobile/src/pages/create-post/index.vue
index 4fa513d..66ed91d 100644
--- a/mobile/src/pages/create-post/index.vue
+++ b/mobile/src/pages/create-post/index.vue
@@ -44,15 +44,15 @@ async function submit() {
 .create-post { padding: 30rpx; }
 .form { }
 .input {
-  background: #fff; border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
-  margin-bottom: 24rpx; border: 1rpx solid #e8e8e8;
+  background: var(--card); border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
+  margin-bottom: 24rpx; border: 1rpx solid var(--border);
 }
 .textarea {
-  background: #fff; border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
-  margin-bottom: 24rpx; border: 1rpx solid #e8e8e8; min-height: 300rpx;
+  background: var(--card); border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
+  margin-bottom: 24rpx; border: 1rpx solid var(--border); min-height: 300rpx;
 }
 .btn-primary {
-  background: #4f8cff; color: #fff; border-radius: 12rpx; padding: 24rpx;
+  background: var(--brand); color: var(--card); border-radius: 12rpx; padding: 24rpx;
   font-size: 30rpx; text-align: center; margin-top: 30rpx; border: none;
 }
 </style>
diff --git a/mobile/src/pages/favorites/index.vue b/mobile/src/pages/favorites/index.vue
index 9aa6bc2..fc27212 100644
--- a/mobile/src/pages/favorites/index.vue
+++ b/mobile/src/pages/favorites/index.vue
@@ -51,11 +51,11 @@ function goDetail(item: any) {
 
 <style scoped>
 .favorites { }
-.tabs { display: flex; background: #fff; padding: 20rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; }
-.tab { font-size: 28rpx; padding: 8rpx 24rpx; margin-right: 16rpx; color: #666; }
-.tab.active { color: #4f8cff; font-weight: bold; border-bottom: 3rpx solid #4f8cff; }
+.tabs { display: flex; background: var(--card); padding: 20rpx 30rpx; border-bottom: 1rpx solid var(--border); }
+.tab { font-size: 28rpx; padding: 8rpx 24rpx; margin-right: 16rpx; color: var(--muted-foreground); }
+.tab.active { color: var(--brand); font-weight: bold; border-bottom: 3rpx solid var(--brand); }
 .list { padding: 20rpx 30rpx; }
-.item { background: #fff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; }
+.item { background: var(--card); border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; }
 .item-title { font-size: 28rpx; }
-.empty { text-align: center; padding: 100rpx; font-size: 28rpx; color: #999; }
+.empty { text-align: center; padding: 100rpx; font-size: 28rpx; color: var(--muted-foreground); }
 </style>
diff --git a/mobile/src/pages/index/index.vue b/mobile/src/pages/index/index.vue
index c6e768c..930d08f 100644
--- a/mobile/src/pages/index/index.vue
+++ b/mobile/src/pages/index/index.vue
@@ -104,42 +104,42 @@ const goPost = (id: number) => uni.navigateTo({ url: `/pages/post-detail/index?i
 <style scoped>
 .home { padding-bottom: 20rpx; }
 .header-banner {
-  background: linear-gradient(135deg, #4f8cff, #6c5ce7);
+  background: linear-gradient(135deg, var(--brand), #6c5ce7);
   padding: 60rpx 40rpx;
   text-align: center;
 }
-.slogan { font-size: 44rpx; font-weight: bold; color: #fff; display: block; }
+.slogan { font-size: 44rpx; font-weight: bold; color: var(--card); display: block; }
 .sub-slogan { font-size: 28rpx; color: rgba(255,255,255,0.8); margin-top: 16rpx; display: block; }
 .section { padding: 30rpx 30rpx 0; }
 .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
 .section-title { font-size: 32rpx; font-weight: bold; }
-.section-more { font-size: 26rpx; color: #4f8cff; }
+.section-more { font-size: 26rpx; color: var(--brand); }
 .course-scroll { white-space: nowrap; }
 .course-list { display: flex; gap: 20rpx; }
 .course-card {
-  width: 280rpx; background: #fff; border-radius: 16rpx; overflow: hidden; display: inline-block;
+  width: 280rpx; background: var(--card); border-radius: 16rpx; overflow: hidden; display: inline-block;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
 .course-cover { width: 280rpx; height: 160rpx; }
 .course-info { padding: 16rpx; }
 .course-title { font-size: 26rpx; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.course-price { font-size: 24rpx; color: #4f8cff; margin-top: 8rpx; display: inline-block; }
+.course-price { font-size: 24rpx; color: var(--brand); margin-top: 8rpx; display: inline-block; }
 .price-pay { color: #ff6b6b; }
-.prompt-list { background: #fff; border-radius: 16rpx; overflow: hidden; }
-.prompt-item { padding: 24rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; }
+.prompt-list { background: var(--card); border-radius: 16rpx; overflow: hidden; }
+.prompt-item { padding: 24rpx 30rpx; border-bottom: 1rpx solid var(--border); }
 .prompt-item:last-child { border-bottom: none; }
 .prompt-title { font-size: 28rpx; font-weight: 500; display: block; }
-.prompt-desc { font-size: 24rpx; color: #999; margin-top: 8rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.prompt-desc { font-size: 24rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .circle-list { display: flex; flex-wrap: wrap; gap: 16rpx; }
 .circle-item {
-  background: #fff; border-radius: 12rpx; padding: 20rpx; flex: 1; min-width: 200rpx;
+  background: var(--card); border-radius: 12rpx; padding: 20rpx; flex: 1; min-width: 200rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
 }
-.circle-name { font-size: 28rpx; font-weight: 500; color: #4f8cff; display: block; }
-.circle-count { font-size: 22rpx; color: #999; margin-top: 8rpx; display: block; }
-.post-list { background: #fff; border-radius: 16rpx; overflow: hidden; }
-.post-item { padding: 24rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; }
+.circle-name { font-size: 28rpx; font-weight: 500; color: var(--brand); display: block; }
+.circle-count { font-size: 22rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; }
+.post-list { background: var(--card); border-radius: 16rpx; overflow: hidden; }
+.post-item { padding: 24rpx 30rpx; border-bottom: 1rpx solid var(--border); }
 .post-item:last-child { border-bottom: none; }
 .post-title { font-size: 28rpx; font-weight: 500; display: block; }
-.post-meta { font-size: 22rpx; color: #999; margin-top: 8rpx; display: block; }
+.post-meta { font-size: 22rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; }
 </style>
diff --git a/mobile/src/pages/learning-progress/index.vue b/mobile/src/pages/learning-progress/index.vue
index e374c19..10efef6 100644
--- a/mobile/src/pages/learning-progress/index.vue
+++ b/mobile/src/pages/learning-progress/index.vue
@@ -51,18 +51,18 @@ onMounted(async () => {
 .learning-progress { padding: 30rpx; }
 .stats { display: flex; gap: 20rpx; margin-bottom: 40rpx; }
 .stat-item {
-  flex: 1; background: #fff; border-radius: 16rpx; padding: 30rpx; text-align: center;
+  flex: 1; background: var(--card); border-radius: 16rpx; padding: 30rpx; text-align: center;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
 }
-.stat-value { font-size: 40rpx; font-weight: bold; color: #4f8cff; display: block; }
-.stat-label { font-size: 24rpx; color: #999; margin-top: 8rpx; display: block; }
+.stat-value { font-size: 40rpx; font-weight: bold; color: var(--brand); display: block; }
+.stat-label { font-size: 24rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; }
 .course-list { }
 .course-item {
-  display: flex; align-items: center; background: #fff; border-radius: 12rpx;
+  display: flex; align-items: center; background: var(--card); border-radius: 12rpx;
   padding: 24rpx; margin-bottom: 16rpx;
 }
 .course-name { width: 200rpx; font-size: 26rpx; font-weight: 500; }
-.progress-bar { flex: 1; height: 16rpx; background: #f0f0f0; border-radius: 8rpx; margin: 0 20rpx; overflow: hidden; }
-.progress-fill { height: 100%; background: #4f8cff; border-radius: 8rpx; }
-.progress-text { font-size: 24rpx; color: #4f8cff; width: 80rpx; text-align: right; }
+.progress-bar { flex: 1; height: 16rpx; background: var(--border); border-radius: 8rpx; margin: 0 20rpx; overflow: hidden; }
+.progress-fill { height: 100%; background: var(--brand); border-radius: 8rpx; }
+.progress-text { font-size: 24rpx; color: var(--brand); width: 80rpx; text-align: right; }
 </style>
diff --git a/mobile/src/pages/lesson/index.vue b/mobile/src/pages/lesson/index.vue
index 21dd219..e084ddd 100644
--- a/mobile/src/pages/lesson/index.vue
+++ b/mobile/src/pages/lesson/index.vue
@@ -49,11 +49,11 @@ async function markComplete() {
 
 <style scoped>
 .lesson { padding: 30rpx; }
-.content-area { background: #fff; border-radius: 16rpx; padding: 40rpx; }
+.content-area { background: var(--card); border-radius: 16rpx; padding: 40rpx; }
 .lesson-title { font-size: 36rpx; font-weight: bold; display: block; margin-bottom: 30rpx; }
-.lesson-content { font-size: 28rpx; color: #333; line-height: 1.8; }
+.lesson-content { font-size: 28rpx; color: var(--foreground); line-height: 1.8; }
 .btn-complete {
-  background: #4f8cff; color: #fff; border-radius: 12rpx; padding: 24rpx;
+  background: var(--brand); color: var(--card); border-radius: 12rpx; padding: 24rpx;
   font-size: 28rpx; text-align: center; margin-top: 40rpx; border: none;
 }
 .completed-text { display: block; text-align: center; font-size: 28rpx; color: #52c41a; margin-top: 40rpx; }
diff --git a/mobile/src/pages/login/index.vue b/mobile/src/pages/login/index.vue
index 2c1a6c1..50afa20 100644
--- a/mobile/src/pages/login/index.vue
+++ b/mobile/src/pages/login/index.vue
@@ -47,17 +47,17 @@ const goRegister = () => uni.navigateTo({ url: '/pages/register/index' })
 <style scoped>
 .login { padding: 100rpx 40rpx; }
 .logo-area { text-align: center; margin-bottom: 80rpx; }
-.logo-text { font-size: 52rpx; font-weight: bold; color: #4f8cff; display: block; }
-.logo-sub { font-size: 28rpx; color: #999; margin-top: 16rpx; display: block; }
+.logo-text { font-size: 52rpx; font-weight: bold; color: var(--brand); display: block; }
+.logo-sub { font-size: 28rpx; color: var(--muted-foreground); margin-top: 16rpx; display: block; }
 .form { }
 .input {
-  background: #fff; border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
-  margin-bottom: 24rpx; border: 1rpx solid #e8e8e8;
+  background: var(--card); border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
+  margin-bottom: 24rpx; border: 1rpx solid var(--border);
 }
 .btn-primary {
-  background: #4f8cff; color: #fff; border-radius: 12rpx; padding: 24rpx;
+  background: var(--brand); color: var(--card); border-radius: 12rpx; padding: 24rpx;
   font-size: 30rpx; text-align: center; margin-top: 30rpx; border: none;
 }
 .links { text-align: center; margin-top: 40rpx; }
-.link { font-size: 26rpx; color: #4f8cff; }
+.link { font-size: 26rpx; color: var(--brand); }
 </style>
diff --git a/mobile/src/pages/membership/index.vue b/mobile/src/pages/membership/index.vue
index 6976ac2..8bf261b 100644
--- a/mobile/src/pages/membership/index.vue
+++ b/mobile/src/pages/membership/index.vue
@@ -48,14 +48,14 @@ async function createOrder(plan: any) {
   border-radius: 20rpx; padding: 40rpx; text-align: center; margin-bottom: 40rpx;
 }
 .plan-label { font-size: 24rpx; color: rgba(255,255,255,0.8); display: block; }
-.plan-name { font-size: 40rpx; font-weight: bold; color: #fff; margin: 16rpx 0; display: block; }
+.plan-name { font-size: 40rpx; font-weight: bold; color: var(--card); margin: 16rpx 0; display: block; }
 .plan-expire { font-size: 24rpx; color: rgba(255,255,255,0.8); display: block; }
 .plans { display: flex; gap: 24rpx; }
 .plan-card {
-  flex: 1; background: #fff; border-radius: 16rpx; padding: 40rpx 30rpx; text-align: center;
+  flex: 1; background: var(--card); border-radius: 16rpx; padding: 40rpx 30rpx; text-align: center;
   box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
 }
 .plan-name { font-size: 30rpx; font-weight: 500; display: block; }
 .plan-price { font-size: 44rpx; font-weight: bold; color: #ff6b6b; margin: 20rpx 0; display: block; }
-.plan-desc { font-size: 24rpx; color: #999; }
+.plan-desc { font-size: 24rpx; color: var(--muted-foreground); }
 </style>
diff --git a/mobile/src/pages/post-detail/index.vue b/mobile/src/pages/post-detail/index.vue
index a156764..217486e 100644
--- a/mobile/src/pages/post-detail/index.vue
+++ b/mobile/src/pages/post-detail/index.vue
@@ -79,22 +79,22 @@ async function submitComment() {
 
 <style scoped>
 .post-detail { padding: 30rpx; }
-.post { background: #fff; border-radius: 16rpx; padding: 30rpx; }
+.post { background: var(--card); border-radius: 16rpx; padding: 30rpx; }
 .title { font-size: 36rpx; font-weight: bold; display: block; margin-bottom: 16rpx; }
 .meta { display: flex; justify-content: space-between; margin-bottom: 24rpx; }
-.author { font-size: 24rpx; color: #4f8cff; }
-.time { font-size: 22rpx; color: #ccc; }
-.content { font-size: 28rpx; color: #333; line-height: 1.8; margin-bottom: 24rpx; }
+.author { font-size: 24rpx; color: var(--brand); }
+.time { font-size: 22rpx; color: var(--muted-foreground); }
+.content { font-size: 28rpx; color: var(--foreground); line-height: 1.8; margin-bottom: 24rpx; }
 .actions { }
-.action { font-size: 26rpx; color: #666; }
+.action { font-size: 26rpx; color: var(--muted-foreground); }
 .comments-section { margin-top: 30rpx; }
 .section-title { font-size: 30rpx; font-weight: bold; display: block; margin-bottom: 20rpx; }
-.comment-list { background: #fff; border-radius: 16rpx; padding: 20rpx; }
-.comment { padding: 16rpx 0; border-bottom: 1rpx solid #f5f5f5; }
+.comment-list { background: var(--card); border-radius: 16rpx; padding: 20rpx; }
+.comment { padding: 16rpx 0; border-bottom: 1rpx solid var(--muted); }
 .comment:last-child { border-bottom: none; }
-.comment-author { font-size: 24rpx; color: #4f8cff; display: block; margin-bottom: 8rpx; }
-.comment-content { font-size: 26rpx; color: #333; }
+.comment-author { font-size: 24rpx; color: var(--brand); display: block; margin-bottom: 8rpx; }
+.comment-content { font-size: 26rpx; color: var(--foreground); }
 .comment-input-area { display: flex; align-items: center; gap: 16rpx; margin-top: 24rpx; }
-.comment-input { flex: 1; background: #fff; border-radius: 12rpx; padding: 20rpx 24rpx; font-size: 26rpx; border: 1rpx solid #e8e8e8; }
-.btn-submit { background: #4f8cff; color: #fff; border-radius: 10rpx; padding: 16rpx 32rpx; font-size: 26rpx; border: none; }
+.comment-input { flex: 1; background: var(--card); border-radius: 12rpx; padding: 20rpx 24rpx; font-size: 26rpx; border: 1rpx solid var(--border); }
+.btn-submit { background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 16rpx 32rpx; font-size: 26rpx; border: none; }
 </style>
diff --git a/mobile/src/pages/profile/index.vue b/mobile/src/pages/profile/index.vue
index cea19c7..8805305 100644
--- a/mobile/src/pages/profile/index.vue
+++ b/mobile/src/pages/profile/index.vue
@@ -78,31 +78,31 @@ function handleLogout() {
 <style scoped>
 .profile { padding: 30rpx; }
 .user-card {
-  background: linear-gradient(135deg, #4f8cff, #6c5ce7);
+  background: linear-gradient(135deg, var(--brand), #6c5ce7);
   border-radius: 20rpx; padding: 40rpx; display: flex; align-items: center; margin-bottom: 30rpx;
 }
 .avatar {
   width: 100rpx; height: 100rpx; border-radius: 50%; background: rgba(255,255,255,0.2);
   display: flex; align-items: center; justify-content: center; margin-right: 24rpx;
 }
-.avatar-text { font-size: 40rpx; color: #fff; font-weight: bold; }
+.avatar-text { font-size: 40rpx; color: var(--card); font-weight: bold; }
 .user-info { flex: 1; }
-.nickname { font-size: 32rpx; font-weight: bold; color: #fff; display: block; }
+.nickname { font-size: 32rpx; font-weight: bold; color: var(--card); display: block; }
 .member { font-size: 22rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; display: inline-block; background: rgba(255,255,255,0.15); padding: 4rpx 16rpx; border-radius: 20rpx; }
 .member.free { background: transparent; }
 .login-prompt { padding: 40rpx; text-align: center; }
-.login-text { font-size: 32rpx; color: #fff; }
-.menu-list { background: #fff; border-radius: 16rpx; overflow: hidden; }
+.login-text { font-size: 32rpx; color: var(--card); }
+.menu-list { background: var(--card); border-radius: 16rpx; overflow: hidden; }
 .menu-item {
   display: flex; align-items: center; padding: 28rpx 30rpx;
-  border-bottom: 1rpx solid #f5f5f5;
+  border-bottom: 1rpx solid var(--muted);
 }
 .menu-item:last-child { border-bottom: none; }
 .menu-icon { font-size: 32rpx; margin-right: 20rpx; }
 .menu-text { flex: 1; font-size: 28rpx; }
-.menu-arrow { font-size: 28rpx; color: #ccc; }
+.menu-arrow { font-size: 28rpx; color: var(--muted-foreground); }
 .btn-logout {
-  background: #fff; color: #ff4d4f; border-radius: 12rpx; padding: 24rpx;
+  background: var(--card); color: #ff4d4f; border-radius: 12rpx; padding: 24rpx;
   font-size: 28rpx; text-align: center; margin-top: 40rpx; border: 1rpx solid #ff4d4f;
 }
 </style>
diff --git a/mobile/src/pages/prompt-detail/index.vue b/mobile/src/pages/prompt-detail/index.vue
index bfe4827..cc9d770 100644
--- a/mobile/src/pages/prompt-detail/index.vue
+++ b/mobile/src/pages/prompt-detail/index.vue
@@ -52,13 +52,13 @@ async function toggleFavorite() {
 
 <style scoped>
 .prompt-detail { padding: 30rpx; }
-.card { background: #fff; border-radius: 16rpx; padding: 30rpx; }
+.card { background: var(--card); border-radius: 16rpx; padding: 30rpx; }
 .title { font-size: 36rpx; font-weight: bold; display: block; margin-bottom: 12rpx; }
-.desc { font-size: 26rpx; color: #666; display: block; margin-bottom: 30rpx; }
-.content-box { background: #f8f9ff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 30rpx; }
-.content-label { font-size: 24rpx; color: #4f8cff; display: block; margin-bottom: 12rpx; }
-.content-text { font-size: 26rpx; color: #333; line-height: 1.7; }
+.desc { font-size: 26rpx; color: var(--muted-foreground); display: block; margin-bottom: 30rpx; }
+.content-box { background: var(--muted); border-radius: 12rpx; padding: 24rpx; margin-bottom: 30rpx; }
+.content-label { font-size: 24rpx; color: var(--brand); display: block; margin-bottom: 12rpx; }
+.content-text { font-size: 26rpx; color: var(--foreground); line-height: 1.7; }
 .actions { display: flex; gap: 20rpx; }
-.btn-copy { flex: 1; background: #4f8cff; color: #fff; border-radius: 10rpx; padding: 20rpx; font-size: 26rpx; text-align: center; border: none; }
-.btn-like { flex: 1; background: #fff; color: #ff6b6b; border-radius: 10rpx; padding: 20rpx; font-size: 26rpx; text-align: center; border: 1rpx solid #ff6b6b; }
+.btn-copy { flex: 1; background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 20rpx; font-size: 26rpx; text-align: center; border: none; }
+.btn-like { flex: 1; background: var(--card); color: #ff6b6b; border-radius: 10rpx; padding: 20rpx; font-size: 26rpx; text-align: center; border: 1rpx solid #ff6b6b; }
 </style>
diff --git a/mobile/src/pages/prompts/index.vue b/mobile/src/pages/prompts/index.vue
index a06f482..57f7085 100644
--- a/mobile/src/pages/prompts/index.vue
+++ b/mobile/src/pages/prompts/index.vue
@@ -51,22 +51,22 @@ const goDetail = (id: number) => uni.navigateTo({ url: `/pages/prompt-detail/ind
 
 <style scoped>
 .prompts { }
-.filter-bar { background: #fff; padding: 20rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; }
+.filter-bar { background: var(--card); padding: 20rpx 30rpx; border-bottom: 1rpx solid var(--border); }
 .category-scroll { white-space: nowrap; }
 .category-list { display: flex; gap: 16rpx; }
 .tag {
   display: inline-block; padding: 12rpx 28rpx; border-radius: 30rpx; font-size: 26rpx;
-  background: #f5f5f5; color: #666;
+  background: var(--muted); color: var(--muted-foreground);
 }
-.tag.active { background: #4f8cff; color: #fff; }
+.tag.active { background: var(--brand); color: var(--card); }
 .prompt-list { padding: 20rpx 30rpx; }
 .prompt-card {
-  background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx;
+  background: var(--card); border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
 }
 .title { font-size: 28rpx; font-weight: 500; display: block; }
-.desc { font-size: 24rpx; color: #999; margin-top: 12rpx; display: block; }
+.desc { font-size: 24rpx; color: var(--muted-foreground); margin-top: 12rpx; display: block; }
 .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 16rpx; }
-.tag-label { font-size: 22rpx; color: #4f8cff; background: #eef3ff; padding: 4rpx 16rpx; border-radius: 20rpx; }
-.views { font-size: 22rpx; color: #ccc; }
+.tag-label { font-size: 22rpx; color: var(--brand); background: #eef3ff; padding: 4rpx 16rpx; border-radius: 20rpx; }
+.views { font-size: 22rpx; color: var(--muted-foreground); }
 </style>
diff --git a/mobile/src/pages/register/index.vue b/mobile/src/pages/register/index.vue
index 3ffe588..50e8b69 100644
--- a/mobile/src/pages/register/index.vue
+++ b/mobile/src/pages/register/index.vue
@@ -52,13 +52,13 @@ const goLogin = () => uni.navigateTo({ url: '/pages/login/index' })
 <style scoped>
 .register { padding: 100rpx 40rpx; }
 .input {
-  background: #fff; border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
-  margin-bottom: 24rpx; border: 1rpx solid #e8e8e8;
+  background: var(--card); border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
+  margin-bottom: 24rpx; border: 1rpx solid var(--border);
 }
 .btn-primary {
-  background: #4f8cff; color: #fff; border-radius: 12rpx; padding: 24rpx;
+  background: var(--brand); color: var(--card); border-radius: 12rpx; padding: 24rpx;
   font-size: 30rpx; text-align: center; margin-top: 30rpx; border: none;
 }
 .links { text-align: center; margin-top: 40rpx; }
-.link { font-size: 26rpx; color: #4f8cff; }
+.link { font-size: 26rpx; color: var(--brand); }
 </style>
diff --git a/mobile/src/pages/sandbox/index.vue b/mobile/src/pages/sandbox/index.vue
index 44211a8..819e89b 100644
--- a/mobile/src/pages/sandbox/index.vue
+++ b/mobile/src/pages/sandbox/index.vue
@@ -96,7 +96,7 @@ function onModelChange(e: any) {
 .content {
   display: inline-block; padding: 16rpx 20rpx; border-radius: 12rpx; font-size: 28rpx; line-height: 1.6;
 }
-.message.user .content { background: var(--brand); color: #fff; border-radius: 12rpx 0 12rpx 12rpx; }
+.message.user .content { background: var(--brand); color: var(--card); border-radius: 12rpx 0 12rpx 12rpx; }
 .message.ai .content { background: var(--card); color: var(--foreground); border-radius: 0 12rpx 12rpx 12rpx; }
 .input-area {
   display: flex; align-items: center; padding: 16rpx 30rpx; background: var(--card);
@@ -104,7 +104,7 @@ function onModelChange(e: any) {
 }
 .input { flex: 1; background: var(--muted); border-radius: 12rpx; padding: 16rpx 24rpx; font-size: 28rpx; }
 .btn-send {
-  background: var(--brand); color: #fff; border-radius: 10rpx; padding: 14rpx 28rpx;
+  background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 14rpx 28rpx;
   font-size: 26rpx; margin-left: 16rpx; border: none;
 }
 </style>
diff --git a/mobile/src/pages/search/index.vue b/mobile/src/pages/search/index.vue
index f4f332e..26c4297 100644
--- a/mobile/src/pages/search/index.vue
+++ b/mobile/src/pages/search/index.vue
@@ -67,18 +67,18 @@ function goDetail(item: any) {
 
 <style scoped>
 .search { }
-.search-bar { display: flex; gap: 16rpx; padding: 20rpx 30rpx; background: #fff; }
-.input { flex: 1; background: #f5f5f5; border-radius: 12rpx; padding: 16rpx 24rpx; font-size: 28rpx; }
-.btn-search { background: #4f8cff; color: #fff; border-radius: 10rpx; padding: 14rpx 28rpx; font-size: 26rpx; border: none; }
-.tabs { display: flex; background: #fff; padding: 16rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; }
-.tab { font-size: 26rpx; padding: 8rpx 20rpx; margin-right: 12rpx; color: #666; }
-.tab.active { color: #4f8cff; font-weight: bold; border-bottom: 3rpx solid #4f8cff; }
+.search-bar { display: flex; gap: 16rpx; padding: 20rpx 30rpx; background: var(--card); }
+.input { flex: 1; background: var(--muted); border-radius: 12rpx; padding: 16rpx 24rpx; font-size: 28rpx; }
+.btn-search { background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 14rpx 28rpx; font-size: 26rpx; border: none; }
+.tabs { display: flex; background: var(--card); padding: 16rpx 30rpx; border-bottom: 1rpx solid var(--border); }
+.tab { font-size: 26rpx; padding: 8rpx 20rpx; margin-right: 12rpx; color: var(--muted-foreground); }
+.tab.active { color: var(--brand); font-weight: bold; border-bottom: 3rpx solid var(--brand); }
 .result-list { padding: 20rpx 30rpx; }
 .result-item {
-  background: #fff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx;
+  background: var(--card); border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
 }
 .result-title { font-size: 28rpx; font-weight: 500; display: block; margin-bottom: 8rpx; }
-.result-desc { font-size: 24rpx; color: #999; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.empty { text-align: center; padding: 100rpx; font-size: 28rpx; color: #999; }
+.result-desc { font-size: 24rpx; color: var(--muted-foreground); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.empty { text-align: center; padding: 100rpx; font-size: 28rpx; color: var(--muted-foreground); }
 </style>