增加修复了深色模式,完全沉浸的深色模式完成了。

Signed-off-by: laoyang <laoyang@example.com>
This commit is contained in:
laoyang
2026-09-16 21:40:11 +08:00
parent 353473127a
commit d7c49db304
10 changed files with 182 additions and 29 deletions
+2
View File
@@ -52,5 +52,7 @@ export struct DocViewer {
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor($r('app.color.page_bg')) .backgroundColor($r('app.color.page_bg'))
// 沉浸式:背景延伸到状态栏/导航条区域(只扩绘制,Web 与标题栏仍在安全区内)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
} }
} }
+106 -25
View File
@@ -1,7 +1,6 @@
import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit'; import { AbilityConstant, ConfigurationConstant, UIAbility, Want, Configuration, EnvironmentCallback } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit'; import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI'; import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
import { BackgroundSyncService } from '../common/BackgroundSyncService'; import { BackgroundSyncService } from '../common/BackgroundSyncService';
import { LogUtil } from '../common/LogUtil'; import { LogUtil } from '../common/LogUtil';
@@ -67,38 +66,120 @@ export default class EntryAbility extends UIAbility {
onWindowStageCreate(windowStage: window.WindowStage): void { onWindowStageCreate(windowStage: window.WindowStage): void {
hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
// ① 先把应用固定为「跟随系统」深浅色。必须在取窗口/刷系统栏之前调用,
// 否则会读到尚未更新到深色的色彩配置(曾导致深色下状态栏仍是浅灰)。
try {
this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
} catch (err) {
hilog.error(DOMAIN, 'testTag', 'Failed to set colorMode. Cause: %{public}s', JSON.stringify(err));
}
// ② 沉浸式配色:状态栏/导航条背景**透明**,透出「主题化」的窗口底色,
// 消除顶部通知栏与底部灰条;前景(时间/图标)颜色按实际底色亮度取反。
try {
const win: window.Window = windowStage.getMainWindowSync();
this.mainWindow = win;
this.applySystemBars(win);
} catch (err) {
hilog.error(DOMAIN, 'testTag', 'Failed to apply immersive bars. Cause: %{public}s', JSON.stringify(err));
}
windowStage.loadContent('pages/Index', (err) => { windowStage.loadContent('pages/Index', (err) => {
if (err.code) { if (err.code) {
hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err)); hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
return; return;
} }
hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.'); hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
// 沉浸式配色:状态栏/导航条与页面背景同色(app.color.page_bg = #F1F3F5),
// 消除顶部通知栏和底部的白色条
windowStage.getMainWindow((werr: BusinessError, win: window.Window) => {
if (werr.code) {
hilog.error(DOMAIN, 'testTag', 'Failed to get main window. Cause: %{public}s', JSON.stringify(werr));
return;
}
try {
win.setWindowSystemBarProperties({
statusBarColor: '#F1F3F5',
statusBarContentColor: '#182431',
navigationBarColor: '#F1F3F5',
navigationBarContentColor: '#182431'
});
// 鸿蒙 NEXT 导航条背景跟随窗口背景色:设为页面背景灰,消除底部白条
win.setWindowBackgroundColor('#F1F3F5');
} catch (barErr) {
hilog.error(DOMAIN, 'testTag', 'Failed to set system bar properties. Cause: %{public}s',
JSON.stringify(barErr));
}
});
}); });
// ③ 系统深浅色切换时重刷配色。用 applicationContext 的 environment 回调,
// 它比 UIAbility.onConfigurationUpdate 更可靠(后者在部分场景下不回调,
// 会出现"页面已变深色但状态栏/底部仍是浅灰"的现象)。
try { try {
this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET); const cb: EnvironmentCallback = {
onConfigurationUpdated: (config: Configuration): void => {
if (this.mainWindow !== undefined) {
this.applySystemBars(this.mainWindow);
}
},
onMemoryLevel: (level: AbilityConstant.MemoryLevel): void => {
}
};
this.context.getApplicationContext().on('environment', cb);
} catch (err) { } catch (err) {
hilog.error(DOMAIN, 'testTag', 'Failed to set colorMode. Cause: %{public}s', JSON.stringify(err)); hilog.error(DOMAIN, 'testTag', 'Failed to watch environment. Cause: %{public}s', JSON.stringify(err));
}
}
/** 主窗口引用:系统深浅色切换时需要重新刷状态栏/导航栏配色 */
private mainWindow?: window.Window;
/** 当前是否处于系统深色模式(兜底用) */
private isDarkMode(): boolean {
try {
return this.context.config.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK;
} catch (err) {
return false;
}
}
/**
* 取当前主题下 app.color.page_bg 的真实取值(经 dark/ 限定符解析):
* 浅色 #F1F3F5 深色 #000000。以"资源系统实际解析出的颜色"为准,
* 这样才能与页面真正渲染出来的背景色一致,不受 config 更新时机影响。
*/
private themePageBg(): string {
try {
const c: number = this.context.resourceManager.getColorSync($r('app.color.page_bg').id) >>> 0;
return '#' + c.toString(16).padStart(8, '0');
} catch (err) {
return this.isDarkMode() ? '#000000' : '#F1F3F5';
}
}
/** 背景是深色时需要浅色前景,反之用深色前景 */
private isDarkBg(bg: string): boolean {
const s: string = bg.startsWith('#') ? bg.substring(1) : bg;
if (s.length < 6) {
return this.isDarkMode();
}
const off: number = s.length >= 8 ? 2 : 0;
const r: number = parseInt(s.substring(off, off + 2), 16);
const g: number = parseInt(s.substring(off + 2, off + 4), 16);
const b: number = parseInt(s.substring(off + 4, off + 6), 16);
if (isNaN(r) || isNaN(g) || isNaN(b)) {
return this.isDarkMode();
}
return (0.2126 * r + 0.7152 * g + 0.0722 * b) < 128;
}
/**
* 按当前主题设置状态栏/导航条与窗口底色。
* 背景取 0x00000000(全透明)——官方推荐的背景沉浸方案:系统栏透明,
* 透传应用自身背景,因此底色天然跟随深浅色,不会再出现恒定灰条。
*/
private applySystemBars(win: window.Window): void {
const bgColor: string = this.themePageBg();
const fgColor: string = this.isDarkBg(bgColor) ? '#FFFFFF' : '#182431';
try {
win.setWindowSystemBarProperties({
statusBarColor: '#00000000',
statusBarContentColor: fgColor,
navigationBarColor: '#00000000',
navigationBarContentColor: fgColor
});
// 窗口底色=页面背景色,供透明的状态栏/导航条透出
win.setWindowBackgroundColor(bgColor);
} catch (barErr) {
hilog.error(DOMAIN, 'testTag', 'Failed to set system bar properties. Cause: %{public}s',
JSON.stringify(barErr));
}
}
/** 兜底:部分设备/场景只回调 UIAbility.onConfigurationUpdate */
onConfigurationUpdate(): void {
if (this.mainWindow !== undefined) {
this.applySystemBars(this.mainWindow);
} }
} }
@@ -247,6 +247,9 @@ struct AccountsPage {
} }
.width('100%') .width('100%')
.height('100%') .height('100%')
// 沉浸式:背景延伸到状态栏/导航条区域(只扩绘制、不移动子组件)
.backgroundColor($r('app.color.page_bg'))
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
} }
@Builder @Builder
@@ -292,6 +292,8 @@ struct AddAccountPage {
.height('100%') .height('100%')
.padding({ left: 24, right: 24, top: 16, bottom: 24 }) .padding({ left: 24, right: 24, top: 16, bottom: 24 })
.backgroundColor($r('app.color.page_bg')) .backgroundColor($r('app.color.page_bg'))
// 沉浸式:背景延伸到状态栏/导航条区域(只扩绘制、不移动子组件)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.alignItems(HorizontalAlign.Center) .alignItems(HorizontalAlign.Center)
} }
@@ -310,6 +312,10 @@ struct AddAccountPage {
.fontSize(15) .fontSize(15)
.backgroundColor($r('app.color.input_bg')) .backgroundColor($r('app.color.input_bg'))
.borderRadius(8) .borderRadius(8)
// 显式指定文字/提示/光标颜色:默认取系统主题色,深色模式下会与底色撞色而"看不清"
.fontColor($r('app.color.text_primary'))
.placeholderColor($r('app.color.text_hint'))
.caretColor($r('app.color.brand'))
.onChange(onChange) .onChange(onChange)
} }
.alignItems(HorizontalAlign.Start) .alignItems(HorizontalAlign.Start)
@@ -249,6 +249,7 @@ struct CalendarListPage {
.fontSize(16) .fontSize(16)
.fontColor($r('app.color.text_primary')) .fontColor($r('app.color.text_primary'))
.placeholderColor($r('app.color.text_hint')) .placeholderColor($r('app.color.text_hint'))
.caretColor($r('app.color.brand'))
.backgroundColor($r('app.color.input_bg')) .backgroundColor($r('app.color.input_bg'))
.borderRadius(10) .borderRadius(10)
.border({ width: 1.5, color: $r('app.color.brand') }) .border({ width: 1.5, color: $r('app.color.brand') })
@@ -364,6 +365,8 @@ struct CalendarListPage {
.height('100%') .height('100%')
.padding({ left: 24, right: 24, top: 16, bottom: 24 }) .padding({ left: 24, right: 24, top: 16, bottom: 24 })
.backgroundColor($r('app.color.page_bg')) .backgroundColor($r('app.color.page_bg'))
// 沉浸式:背景延伸到状态栏/导航条区域(只扩绘制、不移动子组件)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.alignItems(HorizontalAlign.Center) .alignItems(HorizontalAlign.Center)
} }
} }
@@ -318,6 +318,7 @@ struct EditAccountPage {
.fontSize(16) .fontSize(16)
.fontColor($r('app.color.text_primary')) .fontColor($r('app.color.text_primary'))
.placeholderColor($r('app.color.text_hint')) .placeholderColor($r('app.color.text_hint'))
.caretColor($r('app.color.brand'))
.backgroundColor($r('app.color.input_bg')) .backgroundColor($r('app.color.input_bg'))
.borderRadius(10) .borderRadius(10)
.border({ width: 1.5, color: $r('app.color.brand') }) .border({ width: 1.5, color: $r('app.color.brand') })
@@ -434,6 +435,8 @@ struct EditAccountPage {
.height('100%') .height('100%')
.padding({ left: 24, right: 24, top: 16, bottom: 24 }) .padding({ left: 24, right: 24, top: 16, bottom: 24 })
.backgroundColor($r('app.color.page_bg')) .backgroundColor($r('app.color.page_bg'))
// 沉浸式:背景延伸到状态栏/导航条区域(只扩绘制、不移动子组件)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.alignItems(HorizontalAlign.Center) .alignItems(HorizontalAlign.Center)
} }
} }
@@ -425,6 +425,11 @@ struct EventEditPage {
.fontSize(16) .fontSize(16)
.backgroundColor($r('app.color.card_bg')) .backgroundColor($r('app.color.card_bg'))
.borderRadius(12) .borderRadius(12)
// 显式指定文字/提示/光标颜色:TextInput 默认取系统主题色,
// 深色模式下会变成浅色文字 → 与卡片底色撞色而"看不清"
.fontColor($r('app.color.text_primary'))
.placeholderColor($r('app.color.text_hint'))
.caretColor($r('app.color.brand'))
.onChange((v: string) => { .onChange((v: string) => {
this.title = v; this.title = v;
}) })
@@ -541,6 +546,9 @@ struct EventEditPage {
.fontSize(14) .fontSize(14)
.backgroundColor($r('app.color.card_bg')) .backgroundColor($r('app.color.card_bg'))
.borderRadius(12) .borderRadius(12)
.fontColor($r('app.color.text_primary'))
.placeholderColor($r('app.color.text_hint'))
.caretColor($r('app.color.brand'))
.onChange((v: string) => { .onChange((v: string) => {
this.location = v; this.location = v;
}) })
@@ -551,6 +559,9 @@ struct EventEditPage {
.fontSize(14) .fontSize(14)
.backgroundColor($r('app.color.card_bg')) .backgroundColor($r('app.color.card_bg'))
.borderRadius(12) .borderRadius(12)
.fontColor($r('app.color.text_primary'))
.placeholderColor($r('app.color.text_hint'))
.caretColor($r('app.color.brand'))
.onChange((v: string) => { .onChange((v: string) => {
this.description = v; this.description = v;
}) })
@@ -591,6 +602,8 @@ struct EventEditPage {
.height('100%') .height('100%')
.padding({ top: 12 }) .padding({ top: 12 })
.backgroundColor($r('app.color.page_bg')) .backgroundColor($r('app.color.page_bg'))
// 沉浸式:背景延伸到状态栏/导航条区域(只扩绘制、不移动子组件)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.bindSheet($$this.pickerShow, this.dateTimePickerSheet(), { .bindSheet($$this.pickerShow, this.dateTimePickerSheet(), {
height: 380, height: 380,
showClose: false, showClose: false,
@@ -698,6 +711,13 @@ struct EventEditPage {
.onDateChange((value: Date) => { .onDateChange((value: Date) => {
this.pickDate = value; this.pickDate = value;
}) })
// 滚轮文字显式指定颜色:默认取系统主题色,深色模式下与弹层底色撞色会"看不清"
.textStyle({ color: $r('app.color.text_secondary'), font: { size: 14 } })
.selectedTextStyle({
color: $r('app.color.text_primary'),
font: { size: 16, weight: FontWeight.Medium }
})
.disappearTextStyle({ color: $r('app.color.text_hint'), font: { size: 14 } })
.layoutWeight(1) .layoutWeight(1)
.height(210) .height(210)
if (!this.allDay) { if (!this.allDay) {
@@ -708,6 +728,12 @@ struct EventEditPage {
this.pickHour = value.hour; this.pickHour = value.hour;
this.pickMin = value.minute; this.pickMin = value.minute;
}) })
.textStyle({ color: $r('app.color.text_secondary'), font: { size: 14 } })
.selectedTextStyle({
color: $r('app.color.text_primary'),
font: { size: 16, weight: FontWeight.Medium }
})
.disappearTextStyle({ color: $r('app.color.text_hint'), font: { size: 14 } })
.layoutWeight(1) .layoutWeight(1)
.height(210) .height(210)
} }
+8 -4
View File
@@ -1042,6 +1042,10 @@ struct Index {
} }
.width('100%') .width('100%')
.height('100%') .height('100%')
// 沉浸式:根容器背景延伸到状态栏/导航条区域(只扩绘制、不移动子组件),
// 配合 EntryAbility 里"系统栏透明"的设置,彻底消除顶部通知栏与底部灰条。
.backgroundColor($r('app.color.page_bg'))
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.bindSheet($$this.detailShow, this.detailSheet(), { .bindSheet($$this.detailShow, this.detailSheet(), {
height: 540, height: 540,
dragBar: true, dragBar: true,
@@ -1299,7 +1303,7 @@ struct Index {
.borderRadius(12) .borderRadius(12)
.backgroundColor($r('app.color.card_bg')) .backgroundColor($r('app.color.card_bg'))
.border({ width: 1, color: $r('app.color.shadow_color') }) .border({ width: 1, color: $r('app.color.shadow_color') })
.shadow({ radius: 12, color: '#22000000', offsetY: 4 }) .shadow({ radius: 12, color: $r('app.color.shadow_color'), offsetY: 4 })
.margin({ top: 56, right: 20 }) .margin({ top: 56, right: 20 })
} }
.width('100%') .width('100%')
@@ -2925,7 +2929,7 @@ struct DayTimelineView {
.height(this.hourUnit) .height(this.hourUnit)
.textAlign(TextAlign.End) .textAlign(TextAlign.End)
.padding({ right: 4, top: 2 }) .padding({ right: 4, top: 2 })
.border({ width: { bottom: 0.5 }, color: { bottom: '#14000000' } }) .border({ width: { bottom: 0.5 }, color: { bottom: $r('app.color.grid_line') } })
}, (h: number) => `h${h}`) }, (h: number) => `h${h}`)
} }
.width(36) .width(36)
@@ -2941,7 +2945,7 @@ struct DayTimelineView {
.layoutWeight(1) .layoutWeight(1)
.height(this.viewH()) .height(this.viewH())
.alignContent(Alignment.TopStart) .alignContent(Alignment.TopStart)
.border({ width: { left: 0.5 }, color: { left: '#14000000' } }) .border({ width: { left: 0.5 }, color: { left: $r('app.color.grid_line') } })
} }
.width('100%') .width('100%')
.alignItems(VerticalAlign.Top) .alignItems(VerticalAlign.Top)
@@ -2959,7 +2963,7 @@ struct DayTimelineView {
Column() Column()
.width('100%') .width('100%')
.height(this.hourUnit) .height(this.hourUnit)
.border({ width: { bottom: 0.5 }, color: { bottom: '#14000000' } }) .border({ width: { bottom: 0.5 }, color: { bottom: $r('app.color.grid_line') } })
.hitTestBehavior(HitTestMode.None) // 装饰层子节点同样不参与命中测试 .hitTestBehavior(HitTestMode.None) // 装饰层子节点同样不参与命中测试
}, (h: number) => `gd_${h}`) }, (h: number) => `gd_${h}`)
} }
@@ -1083,5 +1083,7 @@ struct SettingsPage {
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor($r('app.color.page_bg')) .backgroundColor($r('app.color.page_bg'))
// 沉浸式:背景延伸到状态栏/导航条区域(只扩绘制、不移动子组件)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
} }
} }
@@ -0,0 +1,23 @@
{
"color": [
{ "name": "start_window_background", "value": "#000000" },
{ "name": "page_bg", "value": "#000000" },
{ "name": "card_bg", "value": "#1C1C1E" },
{ "name": "input_bg", "value": "#2C2C2E" },
{ "name": "text_primary", "value": "#E5E5E7" },
{ "name": "text_secondary", "value": "#99FFFFFF" },
{ "name": "text_hint", "value": "#66FFFFFF" },
{ "name": "brand", "value": "#0A84FF" },
{ "name": "brand_disabled", "value": "#660A84FF" },
{ "name": "button_text", "value": "#FFFFFF" },
{ "name": "success", "value": "#34C759" },
{ "name": "success_bg", "value": "#1F34C759" },
{ "name": "error", "value": "#FF453A" },
{ "name": "error_bg", "value": "#1FFF453A" },
{ "name": "shadow_color", "value": "#1FFFFFFF" },
{ "name": "grid_line", "value": "#1FFFFFFF" },
{ "name": "today_bg", "value": "#330A84FF" },
{ "name": "selected_bg", "value": "#0A84FF" },
{ "name": "chip_off_bg", "value": "#1FFFFFFF" }
]
}