关于我们支持深色/浅色切换

entry/src/main/ets/pages/AboutPage.ets

@@ -3,13 +3,22 @@ import { router } from '@kit.ArkUI'
 import { CommonConstants } from '../common/constants/CommonConstants'
 import { AppUtil, ToastUtil } from '@pura/harmony-utils'
 import { Utility } from '../common/util/Utility'
+import { ConfigurationConstant } from '@kit.AbilityKit'
 
 @Preview
 @Entry
 @Component
 export struct AboutPage{
-
-
+  @State isDarkMode: boolean = false
+  @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
+    ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
+
+  onColorModeChange() {
+    this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
+    this.titleBarModel.setTitleFontColor($r('app.color.title_text'))
+      .setTitleBarBackground($r('app.color.title_bar_bg'))
+      .setLeftTitleBackground($r('app.color.title_bar_bg'))
+  }
 
   @State titleBarModel: TitleBar.Model = new TitleBar.Model()
     .setTitleTextStyle(FontStyle.Normal)
@@ -22,20 +31,20 @@ export struct AboutPage{
     .setTitleBarBottomLineColor($r('app.color.title_bar_bg'))
     .setOnLeftClickListener(() => {
       router.back()
-
     })
   @State verName:string = ''
   @State appName:string = ''
+  
   // 组件生命周期
   aboutToAppear() {
     this.verName =  AppUtil.getVersionName()
     Utility.getAppName(getContext(this)).then((appName:string)=>{
       this.appName = appName
     })
+    this.onColorModeChange()
     console.info('LifeCycleComponent aboutToAppear');
   }
 
-
   // 组件生命周期
   aboutToDisappear() {
     console.info('LifeCycleComponent aboutToDisappear');
@@ -53,15 +62,15 @@ export struct AboutPage{
             .clip(true)
             .margin({top:55})
           Text(this.appName+'V:'+this.verName)
-            .fontColor(Color.White)
+            .fontColor(this.isDarkMode ? Color.White : Color.Black)
             .fontWeight(480)
             .fontSize(17)
             .margin({top:20,bottom:20})
 
           Text(CommonConstants.ICP_NO)
-            .fontColor(Color.White)
+            .fontColor(this.isDarkMode ? Color.White : Color.Black)
             .fontWeight(480)
-            .decoration({ type: TextDecorationType.Underline, color:Color.White })
+            .decoration({ type: TextDecorationType.Underline, color: this.isDarkMode ? Color.White : Color.Black })
             .fontSize(18)
             .margin({top:20,bottom:20})
             .onClick(()=>{
@@ -74,61 +83,48 @@ export struct AboutPage{
             .width('70%')
             .height(55)
             .margin({top:50,bottom:20})
-              // .visibility(Visibility.None)
-            .backgroundColor(Color.Red)
+            .backgroundColor(this.isDarkMode ? '#1E90FF' : '#FF4081')
             .stateStyles({
-              pressed: { opacity: 0.6 } // 按压反馈
+              pressed: { opacity: 0.6 }
             })
             .onClick(()=>{
               ToastUtil.showToast('复制群号成功！')
               Utility.copyText('685109858')
-              // https://xgplayer.com/index_files/ttqqq.jpg
-
-              // router.pushUrl({
-              //   url: 'pages/WebIndex',
-              //   params: { titleName: '加入讨论组', webUrl:'https://xgplayer.com/index_files/ttqqq.jpg' }
-              // });
             })
 
           Button('用户反馈', { type: ButtonType.Capsule, stateEffect: false })
             .width('70%')
             .height(55)
             .margin({bottom:20})
-              // .visibility(Visibility.None)
-            .backgroundColor(Color.Red)
+            .backgroundColor(this.isDarkMode ? '#1E90FF' : '#FF4081')
             .stateStyles({
-              pressed: { opacity: 0.6 } // 按压反馈
+              pressed: { opacity: 0.6 }
             })
             .onClick(()=>{
-
-              AlertDialog.show({title:'发送邮件',message:'感谢你的支持，如果有什么不支持的格式不能播放请反馈给我们修复，谢谢！有建议和反馈的请邮件联系我们：'+CommonConstants.CONTACT_MAIL,
-                autoCancel:true, alignment:DialogAlignment.Center,
-                offset:{dx:0,dy:-20},//在Y轴方向上的编译量
+              AlertDialog.show({
+                title:'发送邮件',
+                message:'感谢你的支持，如果有什么不支持的格式不能播放请反馈给我们修复，谢谢！有建议和反馈的请邮件联系我们：'+CommonConstants.CONTACT_MAIL,
+                autoCancel:true, 
+                alignment:DialogAlignment.Center,
+                offset:{dx:0,dy:-20},
                 confirm:{
-                  value:'确定',fontColor:Color.White,backgroundColor:$r('app.color.title_bar_bg'),
+                  value:'确定',
+                  fontColor:Color.White,
+                  backgroundColor:$r('app.color.title_bar_bg'),
                   action:()=>{
                     ToastUtil.showToast('复制邮件地址成功！')
                     Utility.copyText(CommonConstants.CONTACT_MAIL)
-
                   }
-
                 }
               })
-
-
             })
-
         }
-
         .height('95%')
         .width('100%')
       }
       .height('100%')
-      .linearGradient({colors:[['#FF4081', 0.0], ['#FF8C00', 0.6]]})
-
+      .backgroundColor(this.isDarkMode ? '#1A1A1A' : undefined)
+      .linearGradient(!this.isDarkMode ? {colors:[['#FF4081', 0.0], ['#FF8C00', 0.6]]} : undefined)
     }
-
-
-
   }
 }

entry/src/main/ets/pages/WebIndex.ets

@@ -2,6 +2,7 @@ import TitleBar from '../view/TitleBar'
 import { router } from '@kit.ArkUI'
 import { webview } from '@kit.ArkWeb';
 import { NetworkUtil, ToastUtil } from '@pura/harmony-utils';
+import { ConfigurationConstant } from '@kit.AbilityKit';
 
 
 @Entry
@@ -17,6 +18,21 @@ struct  WebIndex{
 
   @State
   progressValue: number = 0
+  @State isDarkMode: boolean = false
+  @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
+    ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
+
+  onColorModeChange() {
+    this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
+    this.titleBarModel.setTitleFontColor($r('app.color.title_text'))
+      .setTitleBarBackground($r('app.color.title_bar_bg'))
+      .setLeftTitleBackground($r('app.color.title_bar_bg'))
+    if (this.currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
+
+    } else {
+
+    }
+  }
 
   @State params: object = router.getParams()
 
@@ -30,7 +46,6 @@ struct  WebIndex{
     .setLeftTitleBackground($r('app.color.title_bar_bg'))
     .setOnLeftClickListener(() => {
       router.back()
-
     })
 
   // 组件生命周期
@@ -38,19 +53,19 @@ struct  WebIndex{
     if(!NetworkUtil.hasDefaultNetSync()){
       ToastUtil.showToast('没有网络，请检查网络连接！')
     }
-
+    // 初始化时调用一次主题设置
+    this.onColorModeChange()
   }
 
   build() {
     Column(){
       TitleBar({model:$titleBarModel})
       Progress({ value: 0, total: 100, type: ProgressType.Linear })
-        .backgroundColor(0xFFFFFF)
-        .color(0x414AFF)
+        .backgroundColor(this.isDarkMode ? 0x333333 : 0xFFFFFF)
+        .color(this.isDarkMode ? 0x6666FF : 0x414AFF)
         .value(this.progressValue)
         .width('%100')
         .height(2)
-          // .visibility(this.progressIsVisible)
         .visibility(this.progressValue!=100 ? Visibility.Visible : Visibility.None)
 
       Web({
@@ -61,16 +76,13 @@ struct  WebIndex{
         .height("100%")
         .domStorageAccess(true)
         .margin({bottom:20})
+        .backgroundColor(this.isDarkMode ? 0x1A1A1A : 0xFFFFFF)
         .onProgressChange((event)=>{
           if (event) {
             console.log('newProgress:' + event.newProgress);
             this.progressValue = event.newProgress
           }
-
         })
     }
-
-
   }
-
 }