diff --git a/README.en.md b/README.en.md index e21003b3fe7c6d644e458e6a280dd1d650b21073..bd2d4c75fa35c3c68684988eab0c2cd069d623fd 100644 --- a/README.en.md +++ b/README.en.md @@ -1,49 +1,79 @@ # Dark Mode ### Overview -This sample calls APIs such as **@ohos.app.ability.ConfigurationConstant** to set the dark mode. +This sample describes dark mode adaptation, helping you adapt color resources, media resources, and status bar and ensure +that the app UI is beautiful and natural when the system switches between the dark and light modes. The app also provides +a user-controllable dark/light mode switch to meet users' personalized requirements and to implement dark/light mode switching +in different scenarios. + ### Preview -| Light mode | Dark Mode | -|:------------------------------:|:-----------------------------:| -| ![home](screenshots/light.png) | ![util](screenshots/dark.png) | +| Light mode | Dark Mode | +|:---------------------------------:|:--------------------------------:| +| ![home](screenshots/light_en.png) | ![util](screenshots/dark_en.png) | How to Use -1. After the app is started, the home page is displayed based on the system settings. +1. The color mode of the app is in sync with the system color mode (dark/light) by default. This function can be enabled + or disabled by choosing Settings > Display & brightness > Dark mode > Enable all day. -2. Switch to the dark mode in the background system settings. +2. You can disable the function of switching the color mode in sync with the system by choosing Me > Dark mode in the app. + Then, the app will always be in light mode. -3. Return to the app. The home page is displayed based on the system settings. +3. You can manually enable or disable the dark mode by choosing Me > Dark mode in the app. The app will display the dark + or light mode based on the settings. ### Project Directory ``` ├──entry/src/main/ets/ -│ ├──common -│ │ └──Constants.ets // Common constant class │ ├──entryability -│ │ └──EntryAbility.ets // Entry point class -│ ├──pages -│ │ └──Index.ets // Home page -│ ├──view -│ │ └──GoodsList.ets // Goods list -│ └──viewmodel -│ └──GoodsModel.ets // Goods model +│ │ └──EntryAbility.ets // Entry ability +│ ├──pages +│ │ ├──DarkModeSetting.ets // Page for setting the dark mode +│ │ ├──Home.ets // Home page +│ │ ├──Index.ets // App entry +│ │ └──Mine.ets // Me page +│ ├──view +│ │ ├──FinishedTodoItem.ets // Finished Todo component +│ │ └──TodoItem.ets // Todo component +│ └──viewmodel +│ ├──ColorModeChangeFunctions.ets // Function for switching between the dark and light modes +│ ├──Todo.ets // Todo class +│ └──TodoViewModel.ets // Todo data └──entry/src/main/resources // Static resources of the app ``` +### Required Permissions +1. Adapt color resources, such as the text color and component background color. The following two solutions are available: + +2. Use the color resource values reserved by the system. + +3. Perform manual adaptation: Create the src/main/resources/dark/element directory, create the color.json file in the + directory, set the color values of page elements in dark mode in the file, and set the color values of page elements + in light mode in the src/main/resources/base/element/color.json file. + +4. Adapt images and icons. If you want your app to display different images/icons in dark and light modes, create the + src/main/resources/dark/media directory to store the images and icons in dark mode, and place different static resources + with the same name in src/main/resources/base/media. + +5. Adapt the system status bar. By default, if the immersive mode is not enabled for the app, there will be no problem for + status bar adaptation. If the immersive mode is enabled for the app, the contrast between the background color of the + page and the text color of the status bar may be too low. As a result, the text on the status bar is invisible to users, + affecting user experience. In this case, you can set the text color of the status bar dynamically through setWindowSystemBarProperties + by listening for the dark and light mode changes of the system. + ### Required Permissions - N/A ### Constraints -1. The sample app is supported only on Huawei phones running the standard system. +1. The sample is only supported on Huawei phones with standard systems. -2. The HarmonyOS version must be HarmonyOS NEXT Developer Beta1 or later. +2. The HarmonyOS version must be HarmonyOS 5.0.0 Release or later. -3. The DevEco Studio version must be DevEco Studio NEXT Developer Beta1 or later. +3. The DevEco Studio version must be DevEco Studio 5.0.0 Release or later. -4. The HarmonyOS SDK version must be HarmonyOS NEXT Developer Beta1 or later. +4. The HarmonyOS SDK version must be HarmonyOS 5.0.0 Release SDK or later. diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index ff5998ccc2c56e977aedb40cc241a9d59c66cda8..66d44e0a0957cef98622475e7c6455dc9e54212c 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -18,6 +18,7 @@ import { window } from '@kit.ArkUI'; import { promptAction } from '@kit.ArkUI'; import { Constants } from '../common/Constants'; import { hilog } from '@kit.PerformanceAnalysisKit'; +import { i18n } from '@kit.LocalizationKit'; const IMAGE_ASPECT_RATIO: number = 1; const LAYOUT_WEIGHT: number = 1; @@ -127,10 +128,18 @@ export struct Index { function setBanner(currentMode: number): Resource { if (currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) { setStatusBar(ConfigurationConstant.ColorMode.COLOR_MODE_DARK); - return $r("app.media.dark_mode_banner"); + if (i18n.System.getSystemLanguage() == 'zh-Hans') { + return $r("app.media.dark_mode_banner"); + } else { + return $r("app.media.dark_mode_banner_en"); + } } else { setStatusBar(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET); - return $r("app.media.light_mode_banner"); + if (i18n.System.getSystemLanguage() == 'zh-Hans') { + return $r("app.media.light_mode_banner"); + } else { + return $r("app.media.light_mode_banner_en"); + } } } diff --git a/entry/src/main/resources/base/media/dark_mode_banner_en.png b/entry/src/main/resources/base/media/dark_mode_banner_en.png new file mode 100644 index 0000000000000000000000000000000000000000..06c0199bd0f149d188065704a5925311cd9f283d Binary files /dev/null and b/entry/src/main/resources/base/media/dark_mode_banner_en.png differ diff --git a/entry/src/main/resources/base/media/light_mode_banner_en.png b/entry/src/main/resources/base/media/light_mode_banner_en.png new file mode 100644 index 0000000000000000000000000000000000000000..9feb069aaeb8c51e7fad96f6981473f5ba6f117d Binary files /dev/null and b/entry/src/main/resources/base/media/light_mode_banner_en.png differ diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..7584cc7e6357d203cd5171f50d495b2ee8df1e8b --- /dev/null +++ b/entry/src/main/resources/en_US/element/string.json @@ -0,0 +1,48 @@ +{ + "string": [ + { + "name": "warning_text_title", + "value": "Description of the function" + }, + { + "name": "warning_text", + "value": "Manually adjust the color mode options through the system settings interface to actually show off the color adaptation design in the app." + }, + { + "name": "search_text", + "value": "Boutique gifts" + }, + { + "name": "new_product_text", + "value": "New product debut" + }, + { + "name": "mode_other_function", + "value": "Demo only, you can implement business functions on your own" + }, + { + "name": "product_title00", + "value": "Power bank" + }, + { + "name": "product_title01", + "value": "laptop" + }, + { + "name": "product_title02", + "value": "Mobile phones" + }, + { + "name": "product_title03", + "value": "Electric massage chair" + }, + { + "name": "product_title04", + "value": "Foldable screen" + }, + { + "name": "product_title05", + "value": "Minimalist trendy backpack" + } + ] +} \ No newline at end of file diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..e868f096692e9b04db0fc478e4798f4438e54962 --- /dev/null +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -0,0 +1,48 @@ +{ + "string": [ + { + "name": "warning_text_title", + "value": "功能描述" + }, + { + "name": "warning_text", + "value": "通过系统设置界面手动调整颜色模式选项，应用内深浅色适配设计才能得到实际展现。" + }, + { + "name": "search_text", + "value": "精品好礼" + }, + { + "name": "new_product_text", + "value": "新品首发" + }, + { + "name": "mode_other_function", + "value": "仅演示，可自行实现业务功能" + }, + { + "name": "product_title00", + "value": "充电宝" + }, + { + "name": "product_title01", + "value": "笔记本电脑" + }, + { + "name": "product_title02", + "value": "移动手机" + }, + { + "name": "product_title03", + "value": "电动按摩椅" + }, + { + "name": "product_title04", + "value": "折叠屏" + }, + { + "name": "product_title05", + "value": "极简潮流背包" + } + ] +} \ No newline at end of file diff --git a/screenshots/dark_en.png b/screenshots/dark_en.png new file mode 100644 index 0000000000000000000000000000000000000000..d8094092272046fd5a1fcd7448d0ae45fe8759f6 Binary files /dev/null and b/screenshots/dark_en.png differ diff --git a/screenshots/light_en.png b/screenshots/light_en.png new file mode 100644 index 0000000000000000000000000000000000000000..33bead76282b55380ae45a51c2cbc2ed563222a6 Binary files /dev/null and b/screenshots/light_en.png differ