Kaynağa Gözat

修复深浅色模式bug

chendeben 1 yıl önce
ebeveyn
işleme
a599fce1b2

+ 87 - 63
entry/src/main/ets/pages/SettingPage.ets

@@ -65,6 +65,8 @@ export struct SettingPage {
     { name: '银沙灰', color: '#B0BEC5' },
     { name: '自定义', color: '#ffecec' }
   ];
+  static readonly iS_START_AUTO_PLAY: string = 'isStartAutoPlay';
+  static readonly iS_MEMORY_LAST_PLAY: string = 'isMemoryLastPlay';
   @State showApiDialog: boolean = false
   @State tempApiUrl: string = ''
   @State lyricApiUrl: string = PreferencesUtil.getStringSync('LRC_API', '')
@@ -77,7 +79,6 @@ export struct SettingPage {
   @State sortType: number = 4 //默认排序方式
   @State isStartAutoPlay: boolean = false //启动后自动播放
   @State isMemoryLastPlay: boolean = false //是否启用应用退出记忆最后一首的播放进度
-
   @State isShowSimi: boolean = false //是否显示私密音频
   @State isShowFAV: boolean = true //是否显示我的收藏
   @State isShowHistory: boolean = true //是否显示最近播放
@@ -99,10 +100,6 @@ export struct SettingPage {
   @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
     ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
   @StorageLink('isDarkMode') isDarkMode: boolean = false // 是否启用深色模式
-
-  static readonly iS_START_AUTO_PLAY: string = 'isStartAutoPlay';
-  static readonly iS_MEMORY_LAST_PLAY: string = 'isMemoryLastPlay';
-
   /** 当前断点类型(如大屏/小屏) */
   @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
   @State verName: string = ''
@@ -247,7 +244,7 @@ export struct SettingPage {
       HSBColorPicker({
         color: this.customColor,
         radius: 8,
-        onChange:(value: string) =>{
+        onChange: (value: string) => {
           this.customColor = value
 
         }
@@ -284,45 +281,52 @@ export struct SettingPage {
       // 颜色模式分组卡片
       Column() {
         Row() {
-          Row(){
+          Row() {
             Image($r('app.media.theme'))
               .width(20)
               .height(20)
               .fillColor(this.themeColor)
             Text('颜色模式')
               .fontSize(15)
-              .margin({left:6})
+              .margin({ left: 6 })
               .fontWeight(500)
           }
           .layoutWeight(1)
+
           Blank()
-          Row(){
-              ForEach(['自动', '日间', '夜间'], (item: string, idx: number) => {
-                Column() {
-                  Radio({
-                    value: idx+"",
-                    group: this.colorGroup,
-                  })
-                    .checked(this.themeMode===idx)
-                    .radioStyle({
-                      checkedBackgroundColor: this.themeColor
-                    })
-                    .margin({ left: 3 })
-                  Text(item)
-                    .fontSize(15)
-                    .fontColor($r('app.color.text_color'))
-                    .margin({ top: 6 })
-                }
-                .margin({left:12})
-                .onClick(() => {
-                  this.themeMode = idx
-                  this.applyThemeMode(idx)
-                  this.sendChangeEvent()
+          Row() {
+            ForEach(['自动', '日间', '夜间'], (item: string, idx: number) => {
+              Column() {
+                Radio({
+                  value: idx.toString(),
+                  group: this.colorGroup,
                 })
-                .alignItems(HorizontalAlign.Center)
-              })
+                  .checked(this.themeMode === idx)
+                  .radioStyle({
+                    checkedBackgroundColor: this.themeColor
+                  })
+                  .margin({ left: 3, right: 3 })
+                  .onClick(() => {
+                    this.themeMode = idx
+                    this.applyThemeMode(idx)
+                    this.sendChangeEvent()
+                  })
+                Text(item)
+                  .fontSize(15)
+                  .fontColor($r('app.color.text_color'))
+                  .margin({ top: 6 })
+                  .onClick(() => {
+                    this.themeMode = idx
+                    this.applyThemeMode(idx)
+                    this.sendChangeEvent()
+                  })
+              }
+              .alignItems(HorizontalAlign.Center)
+              .margin({ left: 12, right: 12 })
+
+            })
           }
-          .margin({left:12,right:12})
+          .margin({ left: 12, right: 12 })
         }
       }
       .backgroundColor($r('app.color.settings_background_main'))
@@ -339,28 +343,33 @@ export struct SettingPage {
         right: 0,
         bottom: 20
       })
-      .padding({ top: 18, bottom: 18, left: 20, right: 20 })
+      .padding({
+        top: 18,
+        bottom: 18,
+        left: 20,
+        right: 20
+      })
       .width('90%')
 
       // 主题色分组卡片
       Column() {
         Row() {
 
-            Image($r('app.media.theme'))
-              .width(20)
-              .height(20)
-              .fillColor(this.themeColor)
-            Text('主题色')
-              .fontSize(15)
-              .fontWeight(500)
-              .margin({ left: 8 })
-              .layoutWeight(1)
+          Image($r('app.media.theme'))
+            .width(20)
+            .height(20)
+            .fillColor(this.themeColor)
+          Text('主题色')
+            .fontSize(15)
+            .fontWeight(500)
+            .margin({ left: 8 })
+            .layoutWeight(1)
 
         }
-        .margin({left:20, top: 12 })
+        .margin({ left: 20, top: 12 })
 
 
-        Row(){
+        Row() {
           Column() {
             ForEach(this.colorRows, (row: Array<ThemeColorItem>, rowIdx: number) => {
               Row() {
@@ -370,8 +379,9 @@ export struct SettingPage {
                       Blank()
                         .width(22)
                         .height(22)
-                        .backgroundColor(item.name === '自定义' && this.isCustomThemeColor() ? this.themeColor : item.color)
-                        .border({ width: 2, color:$r('app.color.text_color')})
+                        .backgroundColor(item.name === '自定义' && this.isCustomThemeColor() ? this.themeColor :
+                        item.color)
+                        .border({ width: 2, color: $r('app.color.text_color') })
                         .borderRadius(11)
                       Text(item.name)
                         .fontSize(15)
@@ -426,12 +436,17 @@ export struct SettingPage {
         right: 0,
         bottom: 18
       })
-      .padding({ top: 18, bottom: 18, left: 0, right: 0 })
+      .padding({
+        top: 18,
+        bottom: 18,
+        left: 0,
+        right: 0
+      })
       .bindPopup(this.showColorPicker, {
         builder: this.pickerBuilder(),
         placement: Placement.Top,
-        mask: {color:'#33000000'},
-        enableArrow: false,//是否显示箭头
+        mask: { color: '#33000000' },
+        enableArrow: false, //是否显示箭头
         showInSubWindow: false,
         onStateChange: (e) => {
           if (!e.isVisible) {
@@ -439,10 +454,16 @@ export struct SettingPage {
           }
         }
       })
+
       // 主题色自定义弹窗
 
     }
-    .padding({ top: 8, bottom: 8, left: 15, right: 15 })
+    .padding({
+      top: 8,
+      bottom: 8,
+      left: 15,
+      right: 15
+    })
     .width('100%')
     .backgroundColor(Color.Transparent)
     .borderRadius(24)
@@ -529,7 +550,7 @@ export struct SettingPage {
               blurStyle: BlurStyle.Thin,
               backgroundColor: Color.Transparent,
               title: { title: '主题设置' },
-              shouldDismiss:(SheetDismiss:SheetDismiss)=>{
+              shouldDismiss: (SheetDismiss: SheetDismiss) => {
                 SheetDismiss.dismiss();
                 this.showColorPicker = false;
               }
@@ -545,14 +566,14 @@ export struct SettingPage {
                   .fontWeight(480)
                   .layoutWeight(1)
                   .bindSheet($$this.isCustomizeBgSheet, this.customizeBgSheet(), {
-                  height: '95%',
-                  dragBar: true,
-                  preferType: this.currentBreakpoint !== BreakpointTypeEnum.SM ? SheetType.CENTER : SheetType.BOTTOM,
-                  showClose: true,
-                  blurStyle: BlurStyle.Thin,
-                  backgroundColor: Color.Transparent,
-                  title: { title: '自定义背景' }
-                })
+                    height: '95%',
+                    dragBar: true,
+                    preferType: this.currentBreakpoint !== BreakpointTypeEnum.SM ? SheetType.CENTER : SheetType.BOTTOM,
+                    showClose: true,
+                    blurStyle: BlurStyle.Thin,
+                    backgroundColor: Color.Transparent,
+                    title: { title: '自定义背景' }
+                  })
 
                 Blank()
                 // 右侧箭头
@@ -568,6 +589,7 @@ export struct SettingPage {
               this.isCustomizeBgSheet = !this.isCustomizeBgSheet;
             })
             .backgroundColor(Color.Transparent)
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
             // 滚动隐藏'
@@ -728,6 +750,7 @@ export struct SettingPage {
                 .height(30);
             }
             .height(55)
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 记住播放进度
             Row() {
@@ -750,6 +773,7 @@ export struct SettingPage {
                 .height(30);
             }
             .height(55)
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 记忆播放
             Row() {
@@ -949,7 +973,6 @@ export struct SettingPage {
             })
             .height(55)
 
-
           }
           .backgroundColor($r('app.color.settings_background_main'))
           .borderRadius(20)
@@ -987,13 +1010,14 @@ export struct SettingPage {
             }
           }
           .onClick(() => {
-            const qqUrl = `mqqapi://card/show_pslcard?src_type=internal&version=1&uin=${CommonConstants.QQ_GROUP}&card_type=group&source=external`;
+            const qqUrl =
+              `mqqapi://card/show_pslcard?src_type=internal&version=1&uin=${CommonConstants.QQ_GROUP}&card_type=group&source=external`;
             let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
             context.openLink(qqUrl, {})
           })
           .backgroundColor($r('app.color.settings_background_main'))
           .borderRadius(15)
-          .margin({  top: 0, bottom: 20 })
+          .margin({ top: 0, bottom: 20 })
           .padding(0)
 
 

+ 20 - 2
entry/src/main/ets/view/LocalMusic.ets

@@ -192,12 +192,30 @@ export struct LocalMusic {
     globalPosition: {}
   }
   @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
-    ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
+    ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET;
 
 
   onColorModeChange() {
     this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
+    if(this.isCustomizeBg){
+      this.titleBarModel.setRightTitleStateNormalStyleColor(Color.Transparent)
+      this.titleBarModel.setTitleBarBackground(Color.Transparent)
+      this.titleBarModel.setTitleBarBottomLineColor(Color.Transparent)
+      this.titleBarModel.setLeftTitleStateNormalStyleColor(Color.Transparent)
+    }else{
+      if (!this.isDarkMode) {
+        this.titleBarModel.setTitleBarBackground(this.themeColor)
+        this.titleBarModel .setTitleBarBottomLineColor(this.themeColor)
+        this.titleBarModel.setRightTitleStateNormalStyleColor(this.themeColor)
+        this.titleBarModel.setLeftTitleStateNormalStyleColor(this.themeColor)
+      }else {
+        this.titleBarModel.setTitleBarBackground($r('app.color.title_bar_bg'))
+        this.titleBarModel .setTitleBarBottomLineColor($r('app.color.title_bar_bg'))
+        this.titleBarModel.setRightTitleStateNormalStyleColor($r('app.color.title_bar_bg'))
+        this.titleBarModel.setLeftTitleStateNormalStyleColor($r('app.color.title_bar_bg'))
+      }
 
+    }
   }
 
   onModeChange() {
@@ -2420,7 +2438,7 @@ export struct LocalMusic {
           ForEach(this.tabs, (i: string, index) => {
             Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
               Flex()
-                .backgroundColor(this.themeColor)
+                .backgroundColor(this.isDarkMode?$r('app.color.tab_item_bg'):this.themeColor)
                 .borderRadius(20)
                 .padding(10)
                 .margin(6)

+ 1 - 1
entry/src/main/resources/dark/element/color.json

@@ -39,7 +39,7 @@
     },
     {
       "name": "tab_item_bg",
-      "value": "#FF5A5959"
+      "value": "#22232B"
     },
     {
       "name": "index_background",