鸿蒙FA js适配深浅模式样式

最新推荐文章于 2024-06-13 17:24:05 发布
最新推荐文章于 2024-06-13 17:24:05 发布
阅读量607 收藏 1
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45263880/article/details/120729725
版权
本文介绍了如何在鸿蒙系统中使用FAjs进行深浅模式的样式适配。通过修改config.json的colorMode为auto，然后在CSS中利用@media(dark-mode)规则分别定义深色和浅色模式的样式。这种方法使得应用能够自动适应系统主题，提供良好的用户体验。
摘要由CSDN通过智能技术生成

鸿蒙FA js适配深浅模式样式

  1. 首先将config.json文件中module对象中的colorMode属性改为auto；

在这里插入图片描述
2. 在css样式文件中添加@media (dark-mode: true)，将深色模式样式代码写入其中。
@media (dark-mode: false) {
里面装的是浅色模式样式
}
@media (dark-mode: true) {
里面装的是深色模式样式
}
在这里插入图片描述

My_soul_love
关注
HarmonyOS鸿蒙开发指南:FA卡片开发指导
sybh的博客
01-07 951
卡片是一种界面展示形式，可以将应用的重要信息或操作前置到卡片，以达到服务直达，减少体验层级的目的。卡片常用于嵌入到其他应用（当前只支持系统应用）中作为其界面的一部分显示，并支持拉起页面，发送消息等基础的交互功能。卡片使用方负责显示卡片。卡片提供方：提供卡片显示内容原子化服务，控制卡片的显示内容、控件布局以及控件点击事件。卡片使用方：显示卡片内容的宿主应用，控制卡片在宿主中展示的位置。卡片管理服务：用于管理系统中所添加卡片的常驻代理服务，包括卡片对象的管理与使用，以及卡片周期性刷新等。说明。
HarmonyOS鸿蒙基于Java开发: Java UI JS FA调用Java PA机制
sybh的博客
01-14 1041
使用兼容JS的类Web开发范式的方舟开发框架提供了JS FA（Feature Ability）调用Java PA（Particle Ability）的机制，该机制提供了一种通道来传递方法调用、处理数据返回以及订阅事件上报，支持的UI页面和组件请参考构建JS用户界面。当前提供Ability和Internal Ability两种调用方式，开发者可以根据业务场景选择合适的调用方式进行开发。对于Internal Ability调用方式的开发，可以使用js2java-codegen工具自动生成代码。
开发一个JS FA应用
HarmonyOS技术社区
12-03 1747
目录 构建页面布局 构建页面样式 构建页面逻辑 效果示例 本文主要介绍如何开发一个JS FA应用。此应用相对于Hello World应用模板具备更复杂的页面布局、页面样式和页面逻辑。该页面可以通过将焦点移动到不同颜色的圆形来选择不同的食物图片，也可以进行添加到购物车操作，应用效果图如下。 图1JS FA应用效果图构建页面布局 开发者在index.hml文件中构建页面布局。在进行代码开发之前，首先要对页面布局进行分析，将页面分解为不同的部分，用容器组件来承载。根据JS FA应用效果图，此页.
HarmonyOS NEXT应用开发之深色模式适配
1
03-13 1804
固定属性适配：对于部分组件的颜色属性，如背景色或字体颜色，若保持不变，可直接设定固定色值或引用固定的资源文件。双资源目录适配：在resources目录下新增dark子目录，用于存放深色模式下的特定颜色配置（color.json文件）和图片资源（media文件）。在深色模式下，系统会自动加载此目录中的颜色及图片资源，确保与浅色模式下的UI元素色彩差异性。利用系统分层参数。
深色模式适配指南
前端劝退师
08-16 2613
本文首发于政采云前端团队博客：深色模式适配指南https://www.zoo.team/article/dark-theme背景随着 iOS 13 的发布，深色模式（Dark Mode）...
鸿蒙系统下的搜狗输入法,搜狗输入法率先适配iPhone 11深色模式，用搜狗就对了！...
weixin_42293387的博客
06-01 2291
11 日凌晨，苹果秋季新品发布会在乔布斯大剧院举行，除iPhone 11 等新硬件产品外，其中最受瞩目的莫过于IOS13 的深色模式了。在本次第三方APP的适配竞速赛中，拥有庞大用户量的搜狗输入法率先交上了令人满意的答卷。其实对于深色模式主打的护眼功能，很多第三方APP在此前都曾推出过暗黑主题的界面皮肤，但往往都需要用户通过手动方式开启，而非随系统自发联动。不仅操作繁琐，与手机主题风格也相差甚远。...
JS FA 开发基础
m0_52056424的博客
05-08 577
同bao一个应用的多个HAP包中，config.json中的app对象的配置需要保持完全一致 FA:指一种包含页面的Ability，主要用来展示UI的逻辑，对应的是page模板 PA:指的是不包含页面的Ability，用于提供运行后台任务的能力，或者对外统一提供数据访问抽象的能力，对应的是Service和Data的模板 在配置Ability时，当type为page时，为FA;当type为Service和Data时，为PA ...
鸿蒙FA入坑笔记
薆的天空
02-24 8616
HarmonyOS FA应用入坑指南
HarmonyOS开发指南:FA模型综述
sybh的博客
01-07 391
应用独享独立进程，Ability独享独立线程，应用进程在Ability第一次启动时创建，并为启动的Ability创建线程，应用启动后再启动应用内其他Ability，会为每一个Ability创建相应的线程。HarmonyOS用户程序的开发本质上就是开发Ability。HarmonyOS系统是通过对Ability调度，结合系统提供的一致性调度契约对Ability进行生命周期管理，从而实现对用户程序的调度。在所有Ability中，PageAbility因为具有界面，也是应用的交互入口，因此生命周期更加复杂。
【FAQ】鸿蒙系统开启深色模式包含的应用是如何判断的？
华为开发者联盟
08-25 893
另外华为三方拓展团队，会定期测试不支持深色模式的三方App，如果测试发现这些App用华为的强制转换算法转换成深色模式，并且没有严重问题会放进白名单。根据与相关团队确认，支持深色模式的三方App不会出现在该列表中，不支持深色模式的三方App才会出现在该列表中。鸿蒙系统开启深色模式包含的应用是如何判断的？安卓应用适配了深色模式，但是筛选中不含有三方应用。欲了解更多更全技术文章，欢迎访问。
基于@media (prefers-color-scheme: [dark|light])的暗黑与亮色主题切换
q1003675852的博客
12-24 1593
以前如果提到 CSS 的 @media ，可能的第一反应就是它是用来做屏幕查询的，但实际上@media的查询功能远超想象。本文将基于@media (prefers-color-scheme: [dark|light])实现暗黑与亮色主题切换。
CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式
jason_renyu的博客
03-02 3102
纯CSS监听系统黑夜模式，媒体查询修改黑夜模式中的样式，js获取黑夜模式的方法与使用
CSS 【详解】媒体查询 @media
热门推荐
朝阳39的博客
07-28 1万+
通过CSS媒体查询，可以根据媒体特征使用对应的最佳样式，来实现不同设备的响应式自适配。
DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode
周陆军的博客，分享it技术。
12-11 2678
暗黑模式实现，最初的设计，就是参考之前的主题模式。所谓多套主题/配色/皮肤，就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。 之前做不同颜色的皮肤，暗黑模式可以单做其中的一种黑色暗黑主题。 通用的方法，就是less、sass、post-css，把颜色抽离出变量。然后打包输出不同的样式，即： CSS预处理直接生成多套主题样式 利用Less，stylus 或 sass 的变量代替颜色值 配置多个主题颜色配置 利用grunt/gulp/webpac
CSS变量实现暗黑模式，我的小铺页面已经支持
前端全栈开发者
03-15 832
最近微信被苹果逼的开发了暗黑模式，越来越多的网站和应用开始支持了暗黑模式，许多人也喜欢为网站选择暗模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何实现一个自动的 CSS 暗模式，根据你的访客的主题来改变。 我在自己的博客页面我的小铺页面实践了一下用 CSS变量 和 @media查询 实现暗黑模式。 CSS Dark Mode 我定义了变量以设置主题的颜色，我建...
【HarmonyOS NEXT】鸿蒙系统应用深浅色适配
最新发布
wu1004019946的博客
06-13 1527
当前系统存在深浅色两种显示模式，为了给用户更好的使用体验，应用应适配深浅色模式。
网页深色模式样式适配(web dark mode support)
duguxueao的专栏
10-11 1301
目前iOS，macos都有了深色模式，而最近微信最新版也做了深色模式(dark mode)适配，我试了下，手机切换时页面效果样式是实时刷新的。于是就想着web怎么能够监听深色模式，并设置样式。查了资料后，在Stack Overflow上找到了答案，下面来看看 一般通过css里的媒体查询就能适配深色模式: (prefers-color-scheme: dark)，先来看看怎么用js获取当前是否是深色模式 怎么用js判断当前是否是深色模式 // 获取当前是否是深色模式 // window.matchMedi
鸿蒙系统（HarmonyOS）理论基础合集（三）：颜色模式的定义
zdj_Develop的博客
06-07 1860
应用可以在config.json的module字段下定义“colorMode”字段，“colorMode”字段用来定义应用自身的颜色模式，值可以是“dark”，“light”，“auto”（默认值）。示例： "colorMode":"light" 当应用的颜色模式值是“dark”时，无论系统当前颜色模式是什么，应用始终会按照深色模式选取资源；同理，当应用的颜色模式值是“light”时，无论系统当前颜色模式是什么，应用始终会按照浅色模式选取资源；当应用的颜色模式值是“auto”时，应用会跟随系统的颜色模式值
鸿蒙系统fa,鸿蒙系统Ability概述
weixin_29229055的博客
05-28 2177
概述Ability 是应用所具备能力的抽象，也是应用程序的重要组成部分。一个应用可以具备多种能力(即可以包含多个 Ability)，鸿蒙系统支持应用以Ability为单位进行部署。Ability 可以分为 FA( Feature Ability )和 PA( Particle Ability )两种类型，每种类型为开发者提供了不同的模板，以便实现不同的业务功能。FA支持Page Ability： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值