鸿蒙UI开发——亮/暗色模式适配

1、概 述

系统存在深浅色两种显示模式,为了给用户更好的使用体验,应用最好适配暗色和亮色两种模式。从应用与系统配置关联的角度来看,适配暗色和亮色模式可以分为下面两种情况:

    • 应用跟随系统的深浅色模式;

    • 应用主动设置深浅色模式;

下面分别讨论这两种情况。

2、应用跟随系统颜色模式

2.1、颜色适配

  • 自定义资源实现

resources目录下增加深色模式限定词目录(命名为dark)并新建color.json文件,可显示深色模式颜色资源的配置。resources目录结构示意如下图:

图片

例如,我们可以在这两个color.json中定义同名配色定义并赋予不同的色值。

base/element/color.json文件:

{  "color": [    {      "name": "app_title_color",      "value": "#000000"    }  ]}

dark/element/color.json文件:​​​​​​​

{  "color": [    {      "name": "app_title_color",      "value": "#FFFFFF"    }  ]}
  • 通过系统资源实现

我们可直接使用的系统预置资源,即分层参数,同一资源ID在设备类型、深浅色等不同配置下有不同的取值。

【系统资源参数信息详见同时发布的另一篇文章: “鸿蒙UI开发——系统资源参数对照表”】

通过使用系统资源,不同的开发者可以开发出具有相同视觉风格的应用,不需要自定义2份颜色资源,在深浅色模式下也会自动切换成不同的颜色值。例如,开发者可调用系统资源中的文本主要配色来定义应用内文本颜色。​​​​​​​

Text('使用系统定义配色')  .fontColor($r('sys.color.ohos_id_color_text_primary'))

2.2、图片适配

采用资源限定词目录的方式。参照颜色适配的方法,需要将深色模式下对应的同名图片放到 dark/media 目录下,再通过$r的方式加载图片资源的key值,系统做深浅色模式切换时,会自动加载对应资源文件中的value值。

对于 SVG 格式的一些简单图标,可以使用fillColor属性配合系统资源改变图片的绘制颜色。不通过两套图片资源的方式,也可以实现深浅色模式适配。​​​​​​​

Image($r('app.media.pic_svg'))  .width(50)  .fillColor($r('sys.color.ohos_id_color_text_primary'))

2.3、web组件适配

通过darkMode()接口可以配置不同的深色模式,默认关闭。

当深色模式开启时,Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式,若网页未定义深色样式,则保持原状。WebDarkMode.Off模式表示关闭深色模式。WebDarkMode.On表示开启深色模式,并且深色模式跟随前端页面。WebDarkMode.Auto表示开启深色模式,并且深色模式跟随系统。

在下面的示例中,通过darkMode()接口将页面深色模式配置为跟随系统。​​​​​​​

// xxx.etsimport { webview } from '@kit.ArkWeb';  @Entry@Componentstruct WebComponent {  controller: webview.WebviewController = new webview.WebviewController();  @State mode: WebDarkMode = WebDarkMode.Auto;  build() {    Column() {      Web({ src: $rawfile('index.html'), controller: this.controller })        .darkMode(this.mode)    }  }}<!-- index.html --><!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width,                                    initial-scale=1.0,                                    maximum-scale=1.0,                                    user-scalable=no">    <style type="text/css">        @media (prefers-color-scheme: dark) {            .contentCss{ background:  #000000; color: white; }            .hrefCss{ color: #317AF7; }        }    </style></head><body class="contentCss"><div style="text-align:center">    <p>Dark mode debug page</p></div></body></html>

2.4、应用监听暗/亮色模式切换事件

应用可以主动监听系统暗/亮色模式变化,进行其他类型的资源初始化等自定义逻辑。无论应用是否跟随系统暗/亮色模式变化,该监听方式均可生效。

step 1: 在 AbilityStage 的 onCreate() 生命周期中获取APP当前的颜色模式并保存到 AppStorage。​​​​​​​

onCreate(): void {  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');  AppStorage.setOrCreate('currentColorMode', this.context.config.colorMode);}

step 2: 在 AbilityStage 的 onConfigurationUpdate() 生命周期中获取最新变更的颜色模式并刷新到 AppStorage。​​​​​​​

onConfigurationUpdate(newConfig: Configuration): void {  AppStorage.setOrCreate('currentColorMode', newConfig.colorMode);  hilog.info(0x0000, 'testTag', 'the newConfig.colorMode is %{public}s', JSON.stringify(AppStorage.get('currentColorMode')) ?? '');}

step 3: 在Page中通过 @StorageProp + @Watch 方式获取当前最新颜色并监听设备深色模式变化。​​​​​​​

@StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;

step 4: 在aboutToAppear 初始化函数中根据当前最新颜色模式刷新状态变量。​​​​​​​

aboutToAppear(): void {  if (this.currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {    //当前为浅色模式,资源初始化逻辑  }else {    //当前为深色模式,资源初始化逻辑  }}

step 5: 在@Watch 回调函数中执行同样的适配逻辑。​​​​​​​

onColorModeChange(): void {  if (this.currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {    //当前为浅色模式,资源初始化逻辑  }else {    //当前为深色模式,资源初始化逻辑  }}

3、应用主动设置暗/亮色模式

应用默认配置为跟随系统切换深浅色模式,如不希望应用跟随系统深浅色模式变化,可主动设置应用的深浅色风格。设置后,应用的深浅色模式固定,不会随系统改变。​​​​​​​

onCreate(): void {  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');  this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);}

3.1、web组件主动设置暗/亮色模式

如果我们要开启强制深色模式,可以配合forceDarkAccess()使用。

通过forceDarkAccess()接口可将前端页面强制配置深色模式,强制深色模式无法保证所有颜色转换符合预期,且深色模式不跟随前端页面和系统。配置该模式时候,需要将深色模式配置成WebDarkMode.On。

在下面的示例中,通过forceDarkAccess()接口将页面强制配置为深色模式。​​​​​​​

// xxx.etsimport { webview } from '@kit.ArkWeb';@Entry        @Componentstruct WebComponent {  controller: webview.WebviewController = new webview.WebviewController();  @State mode: WebDarkMode = WebDarkMode.On;  @State access: boolean = true;  build() {    Column() {      Web({ src: $rawfile('index.html'), controller: this.controller })        .darkMode(this.mode)        .forceDarkAccess(this.access)    }  }}<!-- index.html --><!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width,                                    initial-scale=1.0,                                    maximum-scale=1.0,                                    user-scalable=no">    <style type="text/css">        @media (prefers-color-scheme: dark) {            .contentCss{ background:  #000000; color: white; }            .hrefCss{ color: #317AF7; }        }    </style></head><body class="contentCss"><div style="text-align:center">    <p>Dark mode debug page</p></div></body></html>

4、系统默认判断规则

  1. 如果应用调用上述setColorMode接口主动设置了深浅色,则以接口效果优先。

  2. 应用没有调用setColorMode接口时:

    • 如果应用工程dark目录下有深色资源,则系统内置组件在深色模式下会自动切换成为深色。

    • 如果应用工程dark目录下没有任何深色资源,则系统内置组件在深色模式下仍会保持浅色体验。

如果应用全部都是由系统内置组件/系统颜色开发,且想要跟随系统切换深浅色模式时,请参考以下示例修改代码来保证应用体验。​​​​​​​

onCreate(): void {  this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/35895.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

三菱伺服JET产品线(选型说明)

伺服放大器功能提升 伺服放大器MELSERVO-JET系列为进一步优化了独家控制引擎的高性能伺服放大器。 可通过与支持CC-LinK IE TSN的运动控制器的同步通信,进行高 速、高精度的运动控制。 除了旋转型伺服电机以外,还支持线性伺服电机。MR-JET-G-N1支持EtherCAT。 旋转型伺服电机 …

HarmonyNext如何判断上下分屏

鸿蒙系统支持上下分屏&#xff0c;可以同时使用两个应用&#xff0c;比如&#xff1a; 有时候我们需要在分屏的时候处理相关逻辑&#xff0c;那到底该如何处理了&#xff0c; 首先在UIAbility下的onWindowStageCreate中进行监听 //监听窗口变化let windowClass: window.Window…

寄存器点灯

1.keil创建工程。&#xff08;不再概述&#xff09; 2.需要添加启动文件。所以添加库文件中的第二个。 3.启动顺序。上电后先初始化堆栈指针&#xff0c;再运行该汇编&#xff0c;最后跳入main函数&#xff0c;系统初始化是初始化时钟的&#xff0c;暂时不需要&#xff0c;屏蔽…

tomcat 运行加载机制解析

tomcat 运行加载机制 从tomcat jar包的加载顺序&#xff1a; tomcat的具体运行加载 可以从 start、setclasspath、catalina文件中看出来&#xff1a; start.bat执行 去找bin目录下的catalina.bat,catalina 或去找 bin\setenv.bat以获取标准环境变量&#xff0c;然后去找bin\…

OLED显示图片,文字

显示图片 1.这是随便一张的图片&#xff0c;自己可以随便截图一张 2.单击图片&#xff0c;右边选择编辑 3.如下操作 4.然后&#xff0c;这个水平和垂直的值的设置要根据你所使用的屏幕有多少个像素点&#xff0c;我当前使用的是0.96寸OLED屏幕&#xff0c;也就是12864&#x…

猿辅导持续布局AI赋能教育领域,助推教育行业数字化转型

近日&#xff0c;由人民网主办的“AI之夜”活动在北京隆重举行。“AI之夜”活动旨在展示中国在人工智能领域的最新成果和创新应用&#xff0c;推动行业的交流与合作。活动现场&#xff0c;来自不同领域的专家们通过主题演讲、圆桌讨论和案例分享等形式&#xff0c;全面呈现了中…

Zotero版本兼容问题,无法安装插件“%s”

1.问题&#xff1a;zotero-better-notes与zotero版本不兼容 安装插件zotero-better-notes时&#xff0c;出现插件安装失败提示&#xff1a;无法安装插件“%S"。他可能无法与该版本的Zotero兼容 zotero-better-notes&#xff1a;是一款论文阅读笔记插件&#xff0c;之前一…

Profinet IO从站数据 转 opc ua项目案例

目录 1 案例说明 2 VFBOX网关工作原理 3 准备工作 4 使用PRONETA软件获取PROFINET IO从站的配置信息 5 设置网关采集PROFINETIO从站设备数据 6 启动OPC UA协议转发采集的数据 7 选择槽号和数据地址 8 选择子槽号 9 案例总结 1 案例说明 设置网关采集ProfinetIO从站设…

android studio 读写文件操作(应用场景二)

android studio版本&#xff1a;2023.3.1 patch2 例程&#xff1a;readtextviewIDsaveandread 本例程是个过渡例程&#xff0c;如果单是实现下图的目的有更简单的方法&#xff0c;但这个方法是下一步工作的基础&#xff0c;所以一定要做。 例程功能&#xff1a;将两个textvi…

基于SSM框架企业人事管理系统的设计与实现

系统合集跳转 源码获取链接 一、系统环境 运行环境: 最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 IDE环境&#xff1a; Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以 tomcat环境&#xff1a; Tomcat 7.x,8.x,9.x版本均可 操作系统…

百度智能云 CHPC: 使用 BtuneAK对基因测序软件进行加速

背景 本文主要介绍在 CHPC 平台使用 BtuneAK 自动化加速组件&#xff0c;可以直接对BWA、FastQC、Picard、Trimmomatic等业务端到端时长加速。 Btune 简单介绍 BtunePK介绍 BtunePK 是百度自研的一款性能分析和调优工具&#xff0c;兼容Intel、AMD、ARM三个CPU平台&#xff0…

Power BI - 批量导入数据

1.简单介绍 假定已经使用Power Automate Desktop(微软的RPA产品&#xff0c;是Power Platform平台的其中一个产品)从福布斯中文网获取了各地区的2024年的财富数据如下&#xff0c; 现在想批量导入数据到Power BI中&#xff0c;分析一下各地区的产业以及财富情况 2.具体说明 …

实现跨平台 SSH 连接:从 macOS 到 Windows WSL 的完整解决方案20241203

&#x1f310; 实现跨平台 SSH 连接&#xff1a;从 macOS 到 Windows WSL 的完整解决方案 ✨ 引言 随着跨平台开发的普及&#xff0c;开发者经常需要在多系统环境中切换和协作。尤其是在 macOS 和 Windows 混合使用的开发环境中&#xff0c;通过 SSH 远程访问和管理 Windows …

【css】基础(二)

本专栏内容为&#xff1a;前端专栏 记录学习前端&#xff0c;分为若干个子专栏&#xff0c;html js css vue等 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;css专栏 &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&#x1f69a; &a…

2024通信工程师-中级-互联网技术备考经验

考试简介 全国通信专业技术人员职业水平考试&#xff0c;是由国家人力资源和社会保障部、工业和信息化部领导下的国家级考试。根据原人事部、信息产业部文件&#xff08;国人部发[2006]10号&#xff09;&#xff0c;通信专业技术人员职业水平评价&#xff0c;纳入全国专业技术人…

智能文档解析综述:结构化信息提取的技术、挑战与前景

综述论文&#xff1a;https://arxiv.org/abs/2410.21169 摘要 文档解析对于将非结构化和半结构化文档&#xff08;如合同、学术论文和发票&#xff09;转换为结构化、机器可读的数据至关重要。通过从非结构化输入中提取可靠的结构化数据&#xff0c;文档解析为众多应用提供了极…

【Web】AlpacaHack Round 7 (Web) 题解

Treasure Hunt flag在md5值拼接flagtxt的文件里&#xff0c;如 d/4/1/d/8/c/d/9/8/f/0/0/b/2/0/4/e/9/8/0/0/9/9/8/e/c/f/8/4/2/7/e/f/l/a/g/t/x/t 访问已经存在的目录状态码是301 访问不存在的目录状态码是404 基于此差异可以写爆破脚本 这段waf可以用url编码绕过 做个lab …

操作系统——文件系统

笔记内容及图片整理自XJTUSE “操作系统” 课程ppt&#xff0c;仅供学习交流使用&#xff0c;谢谢。 文件系统是操作系统中以文件方式管理计算机软件资源的软件和被管理的文件和数据结构&#xff08;如目录和索引表等&#xff09;的集合。从系统角度来看&#xff0c;文件系统是…

java面向对象实验——扫雷+24点

扫雷 窗口绘制&#xff1a; GameWin package com.sxt;import javax.swing.*;public class GameWin extends JFrame {void launch(){this.setVisible(true);this.setSize(500, 500);this.setLocationRelativeTo(null);this.setTitle("SWE23070扫雷游戏");this.setD…

GPU 调度策略架构与CUDA运行机制(二)

市面上有很多GPU厂家&#xff0c;他们产品的软硬件架构各不相同&#xff0c;但是核心往往差不多&#xff0c;整明白了一个基本上就可以触类旁通了。针对当前gpu底层的一些架构以及硬件层一些调度策略的话估计大部分人就很难说的上熟悉了&#xff0c;这个不是大家的错&#xff0…