theme.md 3.3 KB
Newer Older
D
DCloud_LXH 已提交
1 2 3
## uni.setAppTheme(options) @setapptheme

<!-- UTSAPIJSON.setAppTheme.description -->
W
wanganxp 已提交
4

W
wanganxp 已提交
5 6
uni.setAppTheme,并不会帮助开发者自动实现整个应用的亮/暗主题切换,它的作用是:
1. 根据[theme.json](../collocation/themejson.md),设置pages.json的亮/暗主题
W
wanganxp 已提交
7 8 9 10 11
2. 触发uni.onAppThemeChange,开发者和组件作者均可监听这个事件,自行响应将页面设置为对应的亮/暗风格。

当然组件作者也可以不监听onAppThemeChange,而是暴露主题切换API给开发者,由开发者监听主题切换,再调用组件的主题切换API。

目前uni-app x的内置组件和UI相关的API(比如showModal),并不会响应setAppTheme。组件是暴露了样式属性供开发者自行设置,Modal相关API目前没有样式设置,后续会升级支持。
D
DCloud_LXH 已提交
12

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
13 14
<!-- UTSAPIJSON.setAppTheme.compatibility -->

D
DCloud_LXH 已提交
15 16
<!-- UTSAPIJSON.setAppTheme.param -->

shutao-dc's avatar
shutao-dc 已提交
17 18
<!-- UTSAPIJSON.setAppTheme.returnValue -->

shutao-dc's avatar
shutao-dc 已提交
19 20 21 22
```uts
uni.setAppTheme({
  theme: "auto",
  success: function() {
shutao-dc's avatar
shutao-dc 已提交
23
    console.log("设置appTheme为 auto 成功")
shutao-dc's avatar
shutao-dc 已提交
24 25
  },
  fail: function(e: IAppThemeFail) {
shutao-dc's avatar
shutao-dc 已提交
26
    console.log("设置appTheme为 auto 失败,原因:", e.errMsg)
shutao-dc's avatar
shutao-dc 已提交
27 28 29
  }
})
```
D
DCloud_LXH 已提交
30 31 32 33 34 35 36

<!-- UTSAPIJSON.setAppTheme.tutorial -->

## uni.onOsThemeChange(callback) @onosthemechange

<!-- UTSAPIJSON.onOsThemeChange.description -->

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
37 38
<!-- UTSAPIJSON.onOsThemeChange.compatibility -->

D
DCloud_LXH 已提交
39 40
<!-- UTSAPIJSON.onOsThemeChange.param -->

shutao-dc's avatar
shutao-dc 已提交
41 42
<!-- UTSAPIJSON.onOsThemeChange.returnValue -->

shutao-dc's avatar
shutao-dc 已提交
43 44 45 46 47 48
```uts
//callbackId 用于注销监听
val callbackId = uni.onOsThemeChange((res: OsThemeChangeResult)=> {
    console.log("onOsThemeChange---", res.osTheme)
})
```
D
DCloud_LXH 已提交
49

shutao-dc's avatar
shutao-dc 已提交
50 51 52
<!-- UTSAPIJSON.onOsThemeChange.tutorial -->

**注意:**
W
wanganxp 已提交
53
+ android 10、iOS 13 才开始支持深色模式主题 `dark`,更低版本无法获取、监听OS的主题。
D
DCloud_LXH 已提交
54 55 56 57 58

## uni.offOsThemeChange(id) @offosthemechange

<!-- UTSAPIJSON.offOsThemeChange.description -->

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
59 60
<!-- UTSAPIJSON.offOsThemeChange.compatibility -->

D
DCloud_LXH 已提交
61 62
<!-- UTSAPIJSON.offOsThemeChange.param -->

shutao-dc's avatar
shutao-dc 已提交
63
<!-- UTSAPIJSON.offOsThemeChange.returnValue -->
shutao-dc's avatar
shutao-dc 已提交
64

shutao-dc's avatar
shutao-dc 已提交
65 66 67 68 69 70 71 72 73
```uts
val callbackId = uni.onOsThemeChange((res: OsThemeChangeResult)=> {
    console.log("onOsThemeChange---", res.osTheme)
})
...
...
//注销监听
uni.offOsThemeChange(callbackId)
```
shutao-dc's avatar
shutao-dc 已提交
74

shutao-dc's avatar
shutao-dc 已提交
75
<!-- UTSAPIJSON.offOsThemeChange.tutorial -->
D
DCloud_LXH 已提交
76 77 78 79 80

## uni.onAppThemeChange(callback) @onappthemechange

<!-- UTSAPIJSON.onAppThemeChange.description -->

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
81 82
<!-- UTSAPIJSON.onAppThemeChange.compatibility -->

D
DCloud_LXH 已提交
83 84
<!-- UTSAPIJSON.onAppThemeChange.param -->

shutao-dc's avatar
shutao-dc 已提交
85 86
<!-- UTSAPIJSON.onAppThemeChange.returnValue -->

shutao-dc's avatar
shutao-dc 已提交
87 88 89 90 91 92
```uts
//callbackId 用于注销监听
val callbackId = uni.onAppThemeChange((res: AppThemeChangeResult) => {
  console.log("onAppThemeChange", res.appTheme)
})
```
D
DCloud_LXH 已提交
93 94 95 96 97 98 99

<!-- UTSAPIJSON.onAppThemeChange.tutorial -->

## uni.offAppThemeChange(id) @offappthemechange

<!-- UTSAPIJSON.offAppThemeChange.description -->

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
100 101
<!-- UTSAPIJSON.offAppThemeChange.compatibility -->

D
DCloud_LXH 已提交
102 103
<!-- UTSAPIJSON.offAppThemeChange.param -->

shutao-dc's avatar
shutao-dc 已提交
104 105
<!-- UTSAPIJSON.offAppThemeChange.returnValue -->

shutao-dc's avatar
shutao-dc 已提交
106 107 108 109 110 111 112 113 114
```uts
val callbackId = uni.onAppThemeChange((res: AppThemeChangeResult) => {
  console.log("onAppThemeChange", res.appTheme)
})
...
...
//注销监听
uni.offAppThemeChange(this.appThemeChangeId)
```
D
DCloud_LXH 已提交
115 116 117 118 119

<!-- UTSAPIJSON.offAppThemeChange.tutorial -->

<!-- UTSAPIJSON.general_type.name -->

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
120
<!-- UTSAPIJSON.general_type.param -->