HarmonyOS 鸿蒙Next应用内黑白主题的切换

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next应用内黑白主题的切换

应用内黑白主题的切换

在APP内可切换深色和浅色的主题,是否可以通过夜间模式,配置2套不同的资源文件去实现?那么在应用内部可以切换深色和浅色模式而不影响全局的夜间模式么?

3 回复

API: ApplicationContext.setColorMode

参数为不设置时,应用跟随系统设置;参数为深色模式、浅色模式时,系统设置不影响应用。

示例代码:

import { ConfigurationConstant } from '[@kit](/user/kit).AbilityKit'

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
 build() {
   Row() {
     Text('深色模式:')

     Toggle({ type: ToggleType.Switch, isOn: false })
       .onChange((isOn: boolean) => {
         console.info('[testTag] Switch:' + isOn)
         setTimeout(() => {
           getContext(this)
             .getApplicationContext()
             .setColorMode(isOn ? ConfigurationConstant.ColorMode.COLOR_MODE_DARK : ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)
         }, 1000)
       })
   }
 }
}

更多关于HarmonyOS 鸿蒙Next应用内黑白主题的切换的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


文档有主题说明 都可以做到

在HarmonyOS鸿蒙Next应用中实现应用内黑白主题的切换,可以通过以下步骤进行:

  1. 定义主题资源:在resources目录下创建两个主题资源文件,一个用于白色主题(如themes/light.xml),一个用于黑色主题(如themes/dark.xml)。在这两个文件中,分别定义不同主题下的颜色、样式等资源。

  2. 加载主题:在应用的入口或需要切换主题的页面,通过ThemeManager加载指定的主题资源。例如,切换到黑色主题时,可以调用ThemeManager.applyTheme(this, R.xml.dark);切换到白色主题时,调用ThemeManager.applyTheme(this, R.xml.light)

  3. 实现切换逻辑:在应用中添加按钮或设置项,用于触发主题切换。当用户选择切换主题时,调用上述的ThemeManager.applyTheme方法,并重新加载或刷新当前页面,以应用新的主题。

  4. 处理资源适配:确保所有UI元素在不同主题下都能正确显示,可能需要为不同主题准备不同的图片、布局等资源。

  5. 测试与验证:在多种设备和场景下测试主题切换功能,确保切换流畅且UI元素显示正确。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部