# ImmersiveAndDarkModeFit

**Repository Path**: harmonyos_codelabs/immersive-and-dark-mode-fit

## Basic Information

- **Project Name**: ImmersiveAndDarkModeFit
- **Description**: ArkUI沉浸式和深色模式
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-08-18
- **Last Updated**: 2025-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ArkUI沉浸式和深色模式功能

## 简介
本示例通过设置组件的[expandSafeArea](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-expand-safe-area#expandsafearea)属性，扩展组件的安全区域到状态栏和导航栏，从而实现沉浸式效果；并采用深色模式适配相关技术，确保应用在系统深浅色模式切换时界面效果美观自然，实现颜色资源适配、媒体资源适配、状态栏适配等。应用内还提供用户可控的深浅色模式开关，满足用户个性化需求，实现应用在不同模式下的深浅色切换。

## 效果预览：
![](./screenshots/phone.gif)

## 使用说明
- 默认应用跟随系统深浅色进行切换，在设置->显示与亮度->深色模式->全天开启中进行打开关闭，应用会跟随进行深浅色显示。
- 应用内提供关闭跟随系统切换功能，在我的->深色模式中关闭跟随系统设置，应用将始终保持浅色模式。
- 应用内提供手动控制深浅色开关，在我的->深色模式中打开/关闭深色模式，应用会跟随设置的值选择深色/浅色显示。

## 工程目录
```
├──entry/src/main/ets/
│  ├──components
│  │  ├──FinishedTodoItem.ets           // 已完成的Todo组件
│  │  ├──Home.ets                       // Home组件
│  │  ├──Mine.ets                       // Mine组件
│  │  └──TodoItem.ets                   // Todo组件
│  ├──entryability
│  │  └──EntryAbility.ets               // 程序入口
│  ├──model
│  │  └──TodoModel.ets                  // Model数据
│  ├──pages   
│  │  ├──DarkModeSetting.ets            // 深色模式设置页面
│  │  └──Index.ets                      // 首页  
│  ├──utils
│  │  └──DarkModeManager.ets            // 深浅色模式管理工具 
│  └──viewmodel                  
│     └──TodoCommon.ets                 // Todo类
└──entry/src/main/resources             // 应用静态资源目录
```

## 具体实现

1. 颜色资源适配例如文本颜色，组件背景颜色等。有以下两种方案：
   1. 使用系统预留的颜色资源值，参考[系统色彩全量表](https://developer.huawei.com/consumer/cn/doc/design-guides/color-0000001776857164#section17672143841113)。
   2. 开发者进行手动适配。需要开发者创建src/main/resources/dark/element目录，并在目录下创建color.json文件，在文件中设置页面元素在深色模式下的颜色值，并在src/main/resources/base/element/color.json文件中设置浅色模式下的页面元素颜色值。
2. 图片与图标资源适配。若需要应用在深色模式与浅色模式下呈现不同的图片/图标，需要开发者创建出src/main/resources/dark/media目录，用于放置应用在深色模式下的图片与图标资源，并在src/main/resources/base/media放入同名但不同的静态资源。
3. 系统状态栏适配。默认情况下若应用未启用沉浸式，则不会存在状态栏适配问题，若应用设置了沉浸式，可能会导致页面的背景色与状态栏文字颜色对比度过低，对用户而言状态栏文字不可见，影响用户体验，此种情况下，可以考虑监听系统深浅色模式变化动态地通过setWindowSystemBarProperties来设置状态栏文字颜色。

## 相关权限

不涉及。


## 约束与限制

1.本示例仅支持标准系统上运行，支持设备：华为手机。

2.HarmonyOS系统：HarmonyOS 5.1.1 Release及以上。

3.DevEco Studio版本：DevEco Studio 5.1.1 Release及以上。

4.HarmonyOS SDK版本：HarmonyOS 5.1.1 Release SDK及以上。