Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
24d38d80
U
unidocs-uni-app-x-zh
项目概览
DCloud
/
unidocs-uni-app-x-zh
通知
144
Star
2
Fork
33
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
9
列表
看板
标记
里程碑
合并请求
11
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-uni-app-x-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
9
Issue
9
列表
看板
标记
里程碑
合并请求
11
合并请求
11
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
24d38d80
编写于
6月 06, 2024
作者:
DCloud-yyl
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update theme.md
上级
ab31f253
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
68 addition
and
64 deletion
+68
-64
docs/api/theme.md
docs/api/theme.md
+68
-64
未找到文件。
docs/api/theme.md
浏览文件 @
24d38d80
## uni.setAppTheme(options) @setapptheme
<!-- UTSAPIJSON.setAppTheme.description -->
uni.setAppTheme,并不会帮助开发者自动实现整个应用的亮/暗主题切换,它的作用是:
1.
根据
[
theme.json
](
../collocation/themejson.md
)
,设置pages.json的亮/暗主题
2.
触发uni.onAppThemeChange,开发者和组件作者均可监听这个事件,自行响应将页面设置为对应的亮/暗风格。
当然组件作者也可以不监听onAppThemeChange,而是暴露主题切换API给开发者,由开发者监听主题切换,再调用组件的主题切换API。
目前uni-app x的内置组件和UI相关的API(比如showModal),并不会响应setAppTheme。组件是暴露了样式属性供开发者自行设置,Modal相关API目前没有样式设置,后续会升级支持。
uni.setAppTheme,并不会帮助开发者自动实现整个应用的亮/暗主题切换,它的作用是:
1.
根据
[
theme.json
](
../collocation/themejson.md
)
,设置pages.json的亮/暗主题
2.
触发uni.onAppThemeChange,开发者和组件作者均可监听这个事件,自行响应将页面设置为对应的亮/暗风格。
当然组件作者也可以不监听onAppThemeChange,而是暴露主题切换API给开发者,由开发者监听主题切换,再调用组件的主题切换API。
目前uni-app x的内置组件和UI相关的API(比如showModal),并不会响应setAppTheme。组件是暴露了样式属性供开发者自行设置,Modal相关API目前没有样式设置,后续会升级支持。
<!-- UTSAPIJSON.setAppTheme.compatibility -->
<!-- UTSAPIJSON.setAppTheme.param -->
<!-- UTSAPIJSON.setAppTheme.returnValue -->
<!-- UTSAPIJSON.setAppTheme.returnValue -->
```
uts
uni.setAppTheme({
theme: "auto",
...
...
@@ -30,6 +30,51 @@ uni.setAppTheme({
<!-- UTSAPIJSON.setAppTheme.tutorial -->
## uni.onAppThemeChange(callback) @onappthemechange
<!-- UTSAPIJSON.onAppThemeChange.description -->
**注意**
-
HBuilderX4.18版本为
[
uni.setAppTheme
](
#setapptheme
)
设置的 theme 值变化时触发监听回调,回调参数中的 appTheme 值可能是"light" | "dark" | "auto"。在 app 平台设置应用的 theme 值为 auto 后,需同时使用
[
uni.onOsThemeChange
](
#onOsThemeChange
)
监听系统主题变化来计算应用使用的主题。
-
HBuilderX4.19版本调整为 应用实际计算后使用的主题值发生变化时才触发监听回调,回调参数中的 appTheme 值只可能是"light" | "dark"。 在 app 平台设置应用的 theme 值为 auto 后,当系统主题发生变化时会自动计算决定是否触发回调,也就是说无需使用
[
uni.onOsThemeChange
](
#onOsThemeChange
)
监听系统主题变化。
<!-- UTSAPIJSON.onAppThemeChange.compatibility -->
<!-- UTSAPIJSON.onAppThemeChange.param -->
<!-- UTSAPIJSON.onAppThemeChange.returnValue -->
```
uts
//callbackId 用于注销监听
val callbackId = uni.onAppThemeChange((res: AppThemeChangeResult) => {
console.log("onAppThemeChange", res.appTheme)
})
```
<!-- UTSAPIJSON.onAppThemeChange.tutorial -->
## uni.offAppThemeChange(id) @offappthemechange
<!-- UTSAPIJSON.offAppThemeChange.description -->
<!-- UTSAPIJSON.offAppThemeChange.compatibility -->
<!-- UTSAPIJSON.offAppThemeChange.param -->
<!-- UTSAPIJSON.offAppThemeChange.returnValue -->
```
uts
val callbackId = uni.onAppThemeChange((res: AppThemeChangeResult) => {
console.log("onAppThemeChange", res.appTheme)
})
//...
//...
//注销监听
uni.offAppThemeChange(this.appThemeChangeId)
```
<!-- UTSAPIJSON.offAppThemeChange.tutorial -->
## uni.onOsThemeChange(callback) @onosthemechange
<!-- UTSAPIJSON.onOsThemeChange.description -->
...
...
@@ -38,17 +83,17 @@ uni.setAppTheme({
<!-- UTSAPIJSON.onOsThemeChange.param -->
<!-- UTSAPIJSON.onOsThemeChange.returnValue -->
<!-- UTSAPIJSON.onOsThemeChange.returnValue -->
```
uts
//callbackId 用于注销监听
//callbackId 用于注销监听
val callbackId = uni.onOsThemeChange((res: OsThemeChangeResult)=> {
console.log("onOsThemeChange---", res.osTheme)
})
```
<!-- UTSAPIJSON.onOsThemeChange.tutorial -->
<!-- UTSAPIJSON.onOsThemeChange.tutorial -->
**注意:**
+
android 10、iOS 13 才开始支持深色模式主题
`dark`
,更低版本无法获取、监听OS的主题。
...
...
@@ -60,61 +105,20 @@ val callbackId = uni.onOsThemeChange((res: OsThemeChangeResult)=> {
<!-- UTSAPIJSON.offOsThemeChange.param -->
<!-- UTSAPIJSON.offOsThemeChange.returnValue -->
```
uts
<!-- UTSAPIJSON.offOsThemeChange.returnValue -->
```
uts
val callbackId = uni.onOsThemeChange((res: OsThemeChangeResult)=> {
console.log("onOsThemeChange---", res.osTheme)
})
...
...
//注销监听
uni.offOsThemeChange(callbackId)
})
...
...
//注销监听
uni.offOsThemeChange(callbackId)
```
<!-- UTSAPIJSON.offOsThemeChange.tutorial -->
## uni.onAppThemeChange(callback) @onappthemechange
<!-- UTSAPIJSON.onAppThemeChange.description -->
<!-- UTSAPIJSON.onAppThemeChange.compatibility -->
<!-- UTSAPIJSON.onAppThemeChange.param -->
<!-- UTSAPIJSON.onAppThemeChange.returnValue -->
```
uts
//callbackId 用于注销监听
val callbackId = uni.onAppThemeChange((res: AppThemeChangeResult) => {
console.log("onAppThemeChange", res.appTheme)
})
```
<!-- UTSAPIJSON.onAppThemeChange.tutorial -->
## uni.offAppThemeChange(id) @offappthemechange
<!-- UTSAPIJSON.offAppThemeChange.description -->
<!-- UTSAPIJSON.offAppThemeChange.compatibility -->
<!-- UTSAPIJSON.offAppThemeChange.param -->
<!-- UTSAPIJSON.offAppThemeChange.returnValue -->
```
uts
val callbackId = uni.onAppThemeChange((res: AppThemeChangeResult) => {
console.log("onAppThemeChange", res.appTheme)
})
...
...
//注销监听
uni.offAppThemeChange(this.appThemeChangeId)
```
<!-- UTSAPIJSON.offAppThemeChange.tutorial -->
<!-- UTSAPIJSON.general_type.name -->
<!-- UTSAPIJSON.general_type.param -->
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录