应用主题测试

entry/src/main/ets/common/AppTheme.ets

@@ -0,0 +1,302 @@
+import { CustomColors, CustomTheme } from '@kit.ArkUI';
+
+// 默认主题色（浅色）
+export class DefaultColors implements CustomColors {
+  brand: ResourceColor = '#ff0a59f7';
+  warning: ResourceColor = '#ffe84026';
+  alert: ResourceColor = '#ffed6f21';
+  confirm: ResourceColor = '#ff64bb5c';
+  fontPrimary: ResourceColor = '#e5000000'; // 黑色
+  fontSecondary: ResourceColor = '#99000000';
+  fontTertiary: ResourceColor = '#66000000';
+  fontFourth: ResourceColor = '#33000000';
+  fontEmphasize: ResourceColor = '#ff0a59f7';
+  fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
+  fontOnSecondary: ResourceColor = '#99ffffff';
+  fontOnTertiary: ResourceColor = '#66ffffff';
+  fontOnFourth: ResourceColor = '#33ffffff';
+  iconPrimary: ResourceColor = '#e5000000';
+  iconSecondary: ResourceColor = '#99000000';
+  iconTertiary: ResourceColor = '#66000000';
+  iconFourth: ResourceColor = '#33000000';
+  iconEmphasize: ResourceColor = '#ff0a59f7';
+  iconSubEmphasize: ResourceColor = '#660a59f7';
+  iconOnPrimary: ResourceColor = '#ffffffff';
+  iconOnSecondary: ResourceColor = '#99ffffff';
+  iconOnTertiary: ResourceColor = '#66ffffff';
+  iconOnFourth: ResourceColor = '#33ffffff';
+  backgroundPrimary: ResourceColor = '#ffffffff';
+  backgroundSecondary: ResourceColor = '#fff1f3f5';
+  backgroundTertiary: ResourceColor = '#ffe5e5ea';
+  backgroundFourth: ResourceColor = '#ffd1d1d6';
+  backgroundEmphasize: ResourceColor = '#ff0a59f7';
+  compForegroundPrimary: ResourceColor = '#ff000000';
+  compBackgroundPrimary: ResourceColor = '#ffffffff';
+  compBackgroundPrimaryTran: ResourceColor = '#ffffffff';
+  compBackgroundPrimaryContrary: ResourceColor = '#ffffffff';
+  compBackgroundGray: ResourceColor = '#fff1f3f5';
+  compBackgroundSecondary: ResourceColor = '#19000000';
+  compBackgroundTertiary: ResourceColor = '#0c000000';
+  compBackgroundEmphasize: ResourceColor = '#ff0a59f7';
+  compBackgroundNeutral: ResourceColor = '#ff000000';
+  compEmphasizeSecondary: ResourceColor = '#330a59f7';
+  compEmphasizeTertiary: ResourceColor = '#190a59f7';
+  compDivider: ResourceColor = '#33000000';
+  compCommonContrary: ResourceColor = '#ffffffff';
+  compBackgroundFocus: ResourceColor = '#fff1f3f5';
+  compFocusedPrimary: ResourceColor = '#e5000000';
+  compFocusedSecondary: ResourceColor = '#99000000';
+  compFocusedTertiary: ResourceColor = '#66000000';
+  interactiveHover: ResourceColor = '#0c000000';
+  interactivePressed: ResourceColor = '#19000000';
+  interactiveFocus: ResourceColor = '#ff0a59f7';
+  interactiveActive: ResourceColor = '#ff0a59f7';
+  interactiveSelect: ResourceColor = '#33000000';
+  interactiveClick: ResourceColor = '#19000000';
+}
+
+// 暮色主题（深色）
+export class TwilightColors implements CustomColors {
+  brand: ResourceColor = '#ff317af7';
+  warning: ResourceColor = '#ffd94838';
+  alert: ResourceColor = '#ffdb6b42';
+  confirm: ResourceColor = '#ff5ba854';
+  fontPrimary: ResourceColor = '#e5ffffff'; // 白色
+  fontSecondary: ResourceColor = '#99ffffff';
+  fontTertiary: ResourceColor = '#66ffffff';
+  fontFourth: ResourceColor = '#33ffffff';
+  fontEmphasize: ResourceColor = '#ff317af7';
+  fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
+  fontOnSecondary: ResourceColor = '#e5000000'; // 深色按钮反色
+  fontOnTertiary: ResourceColor = '#e5000000';
+  fontOnFourth: ResourceColor = '#e5000000';
+  iconPrimary: ResourceColor = '#e5ffffff';
+  iconSecondary: ResourceColor = '#99ffffff';
+  iconTertiary: ResourceColor = '#66ffffff';
+  iconFourth: ResourceColor = '#33ffffff';
+  iconEmphasize: ResourceColor = '#ff317af7';
+  iconSubEmphasize: ResourceColor = '#66317af7';
+  iconOnPrimary: ResourceColor = '#ffffffff';
+  iconOnSecondary: ResourceColor = '#e5000000';
+  iconOnTertiary: ResourceColor = '#e5000000';
+  iconOnFourth: ResourceColor = '#e5000000';
+  backgroundPrimary: ResourceColor = '#ffe5e5e5';
+  backgroundSecondary: ResourceColor = '#ff191a1c';
+  backgroundTertiary: ResourceColor = '#ff202224';
+  backgroundFourth: ResourceColor = '#ff2e3033';
+  backgroundEmphasize: ResourceColor = '#ff317af7';
+  compForegroundPrimary: ResourceColor = '#ffe5e5e5';
+  compBackgroundPrimary: ResourceColor = '#23272e'; // 深色卡片
+  compBackgroundPrimaryTran: ResourceColor = '#33ffffff';
+  compBackgroundPrimaryContrary: ResourceColor = '#ffe5e5e5';
+  compBackgroundGray: ResourceColor = '#ffe5e5ea';
+  compBackgroundSecondary: ResourceColor = '#19ffffff';
+  compBackgroundTertiary: ResourceColor = '#0cffffff';
+  compBackgroundEmphasize: ResourceColor = '#ff317af7';
+  compBackgroundNeutral: ResourceColor = '#23272e';
+  compEmphasizeSecondary: ResourceColor = '#33317af7';
+  compEmphasizeTertiary: ResourceColor = '#19317af7';
+  compDivider: ResourceColor = '#33ffffff';
+  compCommonContrary: ResourceColor = '#ff000000';
+  compBackgroundFocus: ResourceColor = '#ff000000';
+  compFocusedPrimary: ResourceColor = '#e5ffffff';
+  compFocusedSecondary: ResourceColor = '#99ffffff';
+  compFocusedTertiary: ResourceColor = '#66ffffff';
+  interactiveHover: ResourceColor = '#0cffffff';
+  interactivePressed: ResourceColor = '#19ffffff';
+  interactiveFocus: ResourceColor = '#ff317af7';
+  interactiveActive: ResourceColor = '#ff317af7';
+  interactiveSelect: ResourceColor = '#33ffffff';
+  interactiveClick: ResourceColor = '#19ffffff';
+}
+
+// 森林主题（浅色）
+export class ForestColors implements CustomColors {
+  brand: ResourceColor = '#ff64bb5c';
+  warning: ResourceColor = '#ffd94838';
+  alert: ResourceColor = '#ffdb6b42';
+  confirm: ResourceColor = '#ff317af7';
+  fontPrimary: ResourceColor = '#e5000000'; // 黑色
+  fontSecondary: ResourceColor = '#99000000';
+  fontTertiary: ResourceColor = '#66000000';
+  fontFourth: ResourceColor = '#33000000';
+  fontEmphasize: ResourceColor = '#ff64bb5c';
+  fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
+  fontOnSecondary: ResourceColor = '#99ffffff';
+  fontOnTertiary: ResourceColor = '#66ffffff';
+  fontOnFourth: ResourceColor = '#33ffffff';
+  iconPrimary: ResourceColor = '#e5000000';
+  iconSecondary: ResourceColor = '#99000000';
+  iconTertiary: ResourceColor = '#66000000';
+  iconFourth: ResourceColor = '#33000000';
+  iconEmphasize: ResourceColor = '#ff64bb5c';
+  iconSubEmphasize: ResourceColor = '#6664bb5c';
+  iconOnPrimary: ResourceColor = '#ffffffff';
+  iconOnSecondary: ResourceColor = '#99ffffff';
+  iconOnTertiary: ResourceColor = '#66ffffff';
+  iconOnFourth: ResourceColor = '#33ffffff';
+  backgroundPrimary: ResourceColor = '#ffffffff';
+  backgroundSecondary: ResourceColor = '#fff1f3f5';
+  backgroundTertiary: ResourceColor = '#ffe5e5ea';
+  backgroundFourth: ResourceColor = '#ffd1d1d6';
+  backgroundEmphasize: ResourceColor = '#ff64bb5c';
+  compForegroundPrimary: ResourceColor = '#ff000000';
+  compBackgroundPrimary: ResourceColor = '#ffffffff';
+  compBackgroundPrimaryTran: ResourceColor = '#ffffffff';
+  compBackgroundPrimaryContrary: ResourceColor = '#ffffffff';
+  compBackgroundGray: ResourceColor = '#fff1f3f5';
+  compBackgroundSecondary: ResourceColor = '#19000000';
+  compBackgroundTertiary: ResourceColor = '#0c000000';
+  compBackgroundEmphasize: ResourceColor = '#ff64bb5c';
+  compBackgroundNeutral: ResourceColor = '#ff000000';
+  compEmphasizeSecondary: ResourceColor = '#3364bb5c';
+  compEmphasizeTertiary: ResourceColor = '#1964bb5c';
+  compDivider: ResourceColor = '#33000000';
+  compCommonContrary: ResourceColor = '#ffffffff';
+  compBackgroundFocus: ResourceColor = '#fff1f3f5';
+  compFocusedPrimary: ResourceColor = '#e5000000';
+  compFocusedSecondary: ResourceColor = '#99000000';
+  compFocusedTertiary: ResourceColor = '#66000000';
+  interactiveHover: ResourceColor = '#0c000000';
+  interactivePressed: ResourceColor = '#19000000';
+  interactiveFocus: ResourceColor = '#ff64bb5c';
+  interactiveActive: ResourceColor = '#ff64bb5c';
+  interactiveSelect: ResourceColor = '#33000000';
+  interactiveClick: ResourceColor = '#19000000';
+}
+
+// 珊瑚主题（浅色）
+export class CoralColors implements CustomColors {
+  brand: ResourceColor = '#ffed6f21';
+  warning: ResourceColor = '#ffe84026';
+  alert: ResourceColor = '#ff0a59f7';
+  confirm: ResourceColor = '#ff64bb5c';
+  fontPrimary: ResourceColor = '#e5000000'; // 黑色
+  fontSecondary: ResourceColor = '#99000000';
+  fontTertiary: ResourceColor = '#66000000';
+  fontFourth: ResourceColor = '#33000000';
+  fontEmphasize: ResourceColor = '#ffed6f21';
+  fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
+  fontOnSecondary: ResourceColor = '#99ffffff';
+  fontOnTertiary: ResourceColor = '#66ffffff';
+  fontOnFourth: ResourceColor = '#33ffffff';
+  iconPrimary: ResourceColor = '#e5000000';
+  iconSecondary: ResourceColor = '#99000000';
+  iconTertiary: ResourceColor = '#66000000';
+  iconFourth: ResourceColor = '#33000000';
+  iconEmphasize: ResourceColor = '#ffed6f21';
+  iconSubEmphasize: ResourceColor = '#66ed6f21';
+  iconOnPrimary: ResourceColor = '#ffffffff';
+  iconOnSecondary: ResourceColor = '#99ffffff';
+  iconOnTertiary: ResourceColor = '#66ffffff';
+  iconOnFourth: ResourceColor = '#33ffffff';
+  backgroundPrimary: ResourceColor = '#ffffffff';
+  backgroundSecondary: ResourceColor = '#fff1f3f5';
+  backgroundTertiary: ResourceColor = '#ffe5e5ea';
+  backgroundFourth: ResourceColor = '#ffd1d1d6';
+  backgroundEmphasize: ResourceColor = '#ffed6f21';
+  compForegroundPrimary: ResourceColor = '#ff000000';
+  compBackgroundPrimary: ResourceColor = '#ffffffff';
+  compBackgroundPrimaryTran: ResourceColor = '#ffffffff';
+  compBackgroundPrimaryContrary: ResourceColor = '#ffffffff';
+  compBackgroundGray: ResourceColor = '#fff1f3f5';
+  compBackgroundSecondary: ResourceColor = '#19000000';
+  compBackgroundTertiary: ResourceColor = '#0c000000';
+  compBackgroundEmphasize: ResourceColor = '#ffed6f21';
+  compBackgroundNeutral: ResourceColor = '#ff000000';
+  compEmphasizeSecondary: ResourceColor = '#33ed6f21';
+  compEmphasizeTertiary: ResourceColor = '#19ed6f21';
+  compDivider: ResourceColor = '#33000000';
+  compCommonContrary: ResourceColor = '#ffffffff';
+  compBackgroundFocus: ResourceColor = '#fff1f3f5';
+  compFocusedPrimary: ResourceColor = '#e5000000';
+  compFocusedSecondary: ResourceColor = '#99000000';
+  compFocusedTertiary: ResourceColor = '#66000000';
+  interactiveHover: ResourceColor = '#0c000000';
+  interactivePressed: ResourceColor = '#19000000';
+  interactiveFocus: ResourceColor = '#ffed6f21';
+  interactiveActive: ResourceColor = '#ffed6f21';
+  interactiveSelect: ResourceColor = '#33000000';
+  interactiveClick: ResourceColor = '#19000000';
+}
+
+// 极夜主题（深色）
+export class MidnightColors implements CustomColors {
+  brand: ResourceColor = '#ff5ba854';
+  warning: ResourceColor = '#ffd94838';
+  alert: ResourceColor = '#ffdb6b42';
+  confirm: ResourceColor = '#ff317af7';
+  fontPrimary: ResourceColor = '#e5ffffff'; // 白色
+  fontSecondary: ResourceColor = '#99ffffff';
+  fontTertiary: ResourceColor = '#66ffffff';
+  fontFourth: ResourceColor = '#33ffffff';
+  fontEmphasize: ResourceColor = '#ff5ba854';
+  fontOnPrimary: ResourceColor = '#ffffffff'; // 白色
+  fontOnSecondary: ResourceColor = '#e5000000'; // 深色按钮反色
+  fontOnTertiary: ResourceColor = '#e5000000';
+  fontOnFourth: ResourceColor = '#e5000000';
+  iconPrimary: ResourceColor = '#e5ffffff';
+  iconSecondary: ResourceColor = '#99ffffff';
+  iconTertiary: ResourceColor = '#66ffffff';
+  iconFourth: ResourceColor = '#33ffffff';
+  iconEmphasize: ResourceColor = '#ff5ba854';
+  iconSubEmphasize: ResourceColor = '#665ba854';
+  iconOnPrimary: ResourceColor = '#ffffffff';
+  iconOnSecondary: ResourceColor = '#e5000000';
+  iconOnTertiary: ResourceColor = '#e5000000';
+  iconOnFourth: ResourceColor = '#e5000000';
+  backgroundPrimary: ResourceColor = '#ffe5e5e5';
+  backgroundSecondary: ResourceColor = '#ff191a1c';
+  backgroundTertiary: ResourceColor = '#ff202224';
+  backgroundFourth: ResourceColor = '#ff2e3033';
+  backgroundEmphasize: ResourceColor = '#ff5ba854';
+  compForegroundPrimary: ResourceColor = '#ffe5e5e5';
+  compBackgroundPrimary: ResourceColor = '#23272e'; // 深色卡片
+  compBackgroundPrimaryTran: ResourceColor = '#33ffffff';
+  compBackgroundPrimaryContrary: ResourceColor = '#ffe5e5e5';
+  compBackgroundGray: ResourceColor = '#ffe5e5ea';
+  compBackgroundSecondary: ResourceColor = '#19ffffff';
+  compBackgroundTertiary: ResourceColor = '#0cffffff';
+  compBackgroundEmphasize: ResourceColor = '#ff5ba854';
+  compBackgroundNeutral: ResourceColor = '#23272e';
+  compEmphasizeSecondary: ResourceColor = '#335ba854';
+  compEmphasizeTertiary: ResourceColor = '#195ba854';
+  compDivider: ResourceColor = '#33ffffff';
+  compCommonContrary: ResourceColor = '#ff000000';
+  compBackgroundFocus: ResourceColor = '#ff000000';
+  compFocusedPrimary: ResourceColor = '#e5ffffff';
+  compFocusedSecondary: ResourceColor = '#99ffffff';
+  compFocusedTertiary: ResourceColor = '#66ffffff';
+  interactiveHover: ResourceColor = '#0cffffff';
+  interactivePressed: ResourceColor = '#19ffffff';
+  interactiveFocus: ResourceColor = '#ff5ba854';
+  interactiveActive: ResourceColor = '#ff5ba854';
+  interactiveSelect: ResourceColor = '#33ffffff';
+  interactiveClick: ResourceColor = '#19ffffff';
+}
+
+export class DefaultTheme implements CustomTheme {
+  public colors: DefaultColors = new DefaultColors();
+}
+export class TwilightTheme implements CustomTheme {
+  public colors: TwilightColors = new TwilightColors();
+}
+export class ForestTheme implements CustomTheme {
+  public colors: ForestColors = new ForestColors();
+}
+export class CoralTheme implements CustomTheme {
+  public colors: CoralColors = new CoralColors();
+}
+export class MidnightTheme implements CustomTheme {
+  public colors: MidnightColors = new MidnightColors();
+}
+
+export const ThemeList: CustomTheme[] = [
+  new DefaultTheme(),
+  new TwilightTheme(),
+  new ForestTheme(),
+  new CoralTheme(),
+  new MidnightTheme()
+];
+
+export const myTheme:CustomTheme=new MidnightTheme();

entry/src/main/ets/pages/UserCenter.ets

@@ -1,7 +1,4 @@
-import TitleBar from '../view/TitleBar';
-import { router } from '@kit.ArkUI';
-import { CommonConstants } from '../common/constants/CommonConstants';
-import { Utility } from '../common/util/Utility';
+import { router, ThemeControl } from '@kit.ArkUI';
 import { AppUtil, DeviceUtil, DisplayUtil, LogUtil, ToastUtil, PreferencesUtil } from '@pura/harmony-utils';
 import { resourceManager } from '@kit.LocalizationKit';
 import { BreakpointTypeEnum } from '../common/util/BreakpointSystem';
@@ -10,6 +7,9 @@ import { OnWXResp, WXApi, WXEventHandler } from '../common/util/WXApiWrap';
 import { common } from '@kit.AbilityKit';
 import { ErrCode } from '@tencent/wechat_open_sdk';
 import { http } from '@kit.NetworkKit';
+import { CustomTheme } from '@kit.ArkUI';
+import { myTheme, DefaultTheme, TwilightTheme, ForestTheme, CoralTheme, MidnightTheme } from '../common/AppTheme';
+
 
 interface WechatUserInfo {
   openid?: string;
@@ -73,6 +73,14 @@ interface VipPlan {
   duration: string;
   features: string[];
 }
+// 自定义主题颜色
+
+// 支持传入主题，默认使用myTheme
+export interface UserCenterParams {
+  theme?: CustomTheme;
+}
+
+ThemeControl.setDefaultTheme(myTheme);
 
 @Component
 @Entry
@@ -89,18 +97,6 @@ export struct UserCenter {
   private wxApi = WXApi
   private wxEventHandler = WXEventHandler
   @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
-  @State titleBarModel: TitleBar.Model = new TitleBar.Model()
-    .setTitleTextStyle(FontStyle.Normal)
-    .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
-    .setLeftIcon($r('app.media.left_back_white'))
-    .setTitleName('用户中心')
-    .setTitleFontColor(Color.White)
-    .setTitleBarBackground($r('app.color.title_bar_bg'))
-    .setLeftTitleBackground($r('app.color.title_bar_bg'))
-    .setTitleBarBottomLineColor($r('app.color.title_bar_bg'))
-    .setOnLeftClickListener(() => {
-      router.back();
-    });
   @State vipFeatures: VipFeature[] = [
     { icon: $r('app.media.small_music'), title: '无损音质', description: '支持FLAC、WAV等无损格式', isVipOnly: true },
     { icon: $r('app.media.small_music'), title: '歌词显示', description: '支持LRC歌词同步显示', isVipOnly: false },
@@ -112,6 +108,13 @@ export struct UserCenter {
     { name: '年度会员', price: '￥128', originalPrice: '￥360', duration: '365天', features: ['无损音质', '智能歌单', '主题定制', '专属客服'] }
   ];
 
+  @State customTheme: CustomTheme = new DefaultTheme();
+  count: number = 0;
+
+  constructor() {
+    super();
+  }
+
   // 微信回调处理
   private onWXResp: OnWXResp = (resp) => {
     let authResultText = JSON.stringify(resp ?? {}, null, 2)
@@ -203,31 +206,85 @@ export struct UserCenter {
   }
 
   build() {
-    Column() {
+    WithTheme({ theme: this.customTheme }) {
       Column() {
-        Line().width('100%').height('100%')
-      }
-      .height(this.isPhoneLan() ? 0 : px2vp(AppUtil.getStatusBarHeight()))
-      .backgroundColor($r('app.color.title_bar_bg'))
-      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
-      TitleBar({ model: this.titleBarModel })
-
-      Scroll() {
+        // 顶部安全区和自定义标题栏
         Column() {
-          this.buildUserInfoCard()
-          this.buildVipFeatures()
-          this.buildVipPlans()
-          this.buildFunctionMenu()
-          this.buildLoginButton()
+          // 顶部安全区
+          Blank()
+            .height(this.isPhoneLan() ? 0 : px2vp(AppUtil.getStatusBarHeight()))
+            .backgroundColor(this.customTheme.colors?.backgroundEmphasize)
+            .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+          // 自定义标题栏（Stack实现绝对居中）
+          Stack() {
+            // 居中标题
+            Text('用户中心')
+              .fontSize(20)
+              .fontColor(this.customTheme.colors?.fontPrimary)
+              .align(Alignment.Center)
+            // 左右按钮
+            Row() {
+              Image($r('app.media.left_back_white'))
+                .width(32)
+                .height(32)
+                .margin({ left: 12, right: 8 })
+                .onClick(() => {
+                  router.back();
+                })
+              Blank().flexGrow(1)
+              Blank().width(32)
+            }
+            .height(48)
+            .width('100%')
+            .alignItems(VerticalAlign.Center)
+          }
+          .height(48)
+          .width('100%')
+          .backgroundColor(this.customTheme.colors?.backgroundEmphasize)
         }
-        .width('100%')
+
+        Scroll() {
+          Column() {
+            this.buildUserInfoCard()
+            this.buildVipFeatures()
+            this.buildVipPlans()
+            this.buildFunctionMenu()
+            this.buildLoginButton()
+            Button('切换主题').onClick(() => {
+              this.count++;
+              if (this.count > 4) {
+                this.count = 0;
+              }
+              switch (this.count) {
+                case 0:
+                  this.customTheme = new DefaultTheme();
+                  break;
+                case 1:
+                  this.customTheme = new TwilightTheme();
+                  break;
+                case 2:
+                  this.customTheme = new ForestTheme();
+                  break;
+                case 3:
+                  this.customTheme = new CoralTheme();
+                  break;
+                case 4:
+                  this.customTheme = new MidnightTheme();
+                  break;
+              }
+            })
+            .margin({ top: 32,bottom: 16 })
+          }
+          .width('100%')
+        }
+        .scrollBar(BarState.Off)
+        .edgeEffect(EdgeEffect.Spring)
+        .layoutWeight(1) // 让内容区自动填满剩余空间
       }
-      .scrollBar(BarState.Off)
-      .edgeEffect(EdgeEffect.Spring)
+      .backgroundColor(this.customTheme.colors?.backgroundSecondary)
+      .width('100%')
+      .height('100%')
     }
-    .backgroundColor(0xFFF6F7FA)
-    .width('100%')
-    .height('100%')
   }
 
   // 用户信息卡片
@@ -240,25 +297,25 @@ export struct UserCenter {
           .height(80)
           .borderRadius('50%')
           .clip(true)
-          .backgroundColor(Color.White)
+          .backgroundColor(this.customTheme.colors?.compBackgroundPrimary)
           .shadow({ radius: 8, color: 0x11000000, offsetX: 0, offsetY: 2 })
         Column() {
           Text(this.isLogin ? this.userName : '未登录用户')
             .fontSize(22)
             .fontWeight(FontWeight.Bold)
-            .fontColor(Color.Black)
+            .fontColor(this.customTheme.colors?.fontPrimary)
           if (this.isLogin) {
             if (this.hasActiveSubscription) {
               Text(this.subscriptionName)
                 .fontSize(16)
-                .fontColor(Color.Red)
+                .fontColor(this.customTheme.colors?.brand)
               Text('到期：' + this.subscriptionEndDate)
                 .fontSize(14)
-                .fontColor(Color.Gray)
+                .fontColor(this.customTheme.colors?.fontSecondary)
             } else {
               Text('普通用户')
                 .fontSize(15)
-                .fontColor(Color.Grey)
+                .fontColor(this.customTheme.colors?.fontTertiary)
             }
           }
         }
@@ -268,7 +325,7 @@ export struct UserCenter {
       .width('100%')
       .padding(16)
     }
-    .backgroundColor(Color.White)
+    .backgroundColor(this.customTheme.colors?.compBackgroundPrimary)
     .borderRadius(24)
     .margin({ left: 20, right: 20, top: 20 })
     .shadow({ radius: 12, color: 0x11000000, offsetX: 0, offsetY: 2 })
@@ -295,13 +352,13 @@ export struct UserCenter {
                 .fontWeight(FontWeight.Medium)
               Text(feature.description)
                 .fontSize(12)
-                .fontColor(Color.Gray)
+                .fontColor(this.customTheme.colors?.fontSecondary)
                 .margin({ top: 4 })
               if (feature.isVipOnly) {
                 Text('VIP专享')
                   .fontSize(10)
-                  .fontColor(Color.Red)
-                  .backgroundColor('#FFF0F0')
+                  .fontColor(this.customTheme.colors?.brand)
+                  .backgroundColor(this.customTheme.colors?.compEmphasizeSecondary)
                   .borderRadius(8)
                   .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                   .margin({ top: 4 })
@@ -309,7 +366,7 @@ export struct UserCenter {
             }
             .width('100%')
             .height(120)
-            .backgroundColor(Color.White)
+            .backgroundColor(this.customTheme.colors?.compBackgroundPrimary)
             .borderRadius(12)
             .padding(12)
           }
@@ -338,7 +395,7 @@ export struct UserCenter {
               .fontWeight(FontWeight.Bold)
             Text(plan.duration)
               .fontSize(12)
-              .fontColor(Color.Gray)
+              .fontColor(this.customTheme.colors?.fontSecondary)
               .margin({ top: 4 })
           }
           .layoutWeight(1)
@@ -346,16 +403,16 @@ export struct UserCenter {
             Text(plan.price)
               .fontSize(20)
               .fontWeight(FontWeight.Bold)
-              .fontColor(Color.Red)
+              .fontColor(this.customTheme.colors?.brand)
             Text(plan.originalPrice)
               .fontSize(12)
-              .fontColor(Color.Gray)
+              .fontColor(this.customTheme.colors?.fontTertiary)
               .decoration({ type: TextDecorationType.LineThrough })
           }
           Button('立即开通')
             .fontSize(14)
-            .fontColor(Color.White)
-            .backgroundColor(Color.Red)
+            .fontColor(this.customTheme.colors?.fontOnPrimary)
+            .backgroundColor(this.customTheme.colors?.brand)
             .borderRadius(16)
             .height(32)
             .width(80)
@@ -370,7 +427,7 @@ export struct UserCenter {
         }
         .width('100%')
         .padding(16)
-        .backgroundColor(Color.White)
+        .backgroundColor(this.customTheme.colors?.compBackgroundPrimary)
         .borderRadius(12)
         .margin({ bottom: 12 })
       })
@@ -389,7 +446,7 @@ export struct UserCenter {
         }
         // 跳转到收藏页面
       })
-      Line().width('90%').height(0.5).backgroundColor(0xFFEFEFEF)
+      Line().width('90%').height(0.5).backgroundColor(this.customTheme.colors?.compBackgroundSecondary)
       this.menuItem($r('app.media.icon_history'), '播放历史', () => {
         if (!this.isLogin) {
           ToastUtil.showToast('请先登录')
@@ -397,12 +454,12 @@ export struct UserCenter {
         }
         // 跳转到历史记录页面
       })
-      Line().width('90%').height(0.5).backgroundColor(0xFFEFEFEF)
+      Line().width('90%').height(0.5).backgroundColor(this.customTheme.colors?.compBackgroundSecondary)
       this.menuItem($r('app.media.setting'), '设置', () => {
         // 跳转到设置页面
       })
     }
-    .backgroundColor(Color.White)
+    .backgroundColor(this.customTheme.colors?.compBackgroundPrimary)
     .borderRadius(24)
     .margin({ left: 20, right: 20, top: 24 })
   }
@@ -414,8 +471,8 @@ export struct UserCenter {
       Blank().layoutWeight(1)
       if (this.isLogin) {
         Button('退出登录')
-          .fontColor(Color.White)
-          .backgroundColor(Color.Red)
+          .fontColor(this.customTheme.colors?.fontOnPrimary)
+          .backgroundColor(this.customTheme.colors?.brand)
           .height(48)
           .width('70%')
           .borderRadius(24)
@@ -439,8 +496,9 @@ export struct UserCenter {
           })
       } else {
         Button('登录')
-          .fontColor(Color.White)
-          .backgroundColor($r('app.color.title_bar_bg'))
+          .fontColor(this.customTheme.colors?.fontOnPrimary)
+          // .fontColor(`$r('sys.color.font_on_primary')`)
+          .backgroundColor(this.customTheme.colors?.brand)
           .height(48)
           .width('70%')
           .borderRadius(24)
@@ -483,7 +541,7 @@ export struct UserCenter {
       Text(text)
         .margin({ left: 10, right: 20 })
         .fontSize(15)
-        .fontColor(Color.Gray)
+        .fontColor(this.customTheme.colors?.fontSecondary)
         .fontWeight(480)
       Blank()
       Image($r('app.media.arrow_right'))