1070+从 Android 10 开始，系统加入了夜间模式（也有被称为深色模式、暗色模式）的原生支持。快应用也同步引入了此特性，方便开发者更好地适配夜间模式。
在这一篇教程，我们将从简单的主题模式配置入门，到控制自动反色开关与手动配置夜间模式的样式，逐步掌握夜间模式的最佳实践。
注意：
夜间模式仅在Android 10以上版本的手机支持，如果要查看效果，请确保拥有合适版本的手机，且快应用平台版本号在1070以上。另外，快应用打包工具 hap-toolkit 的版本号要在0.6.15版本以上。（可通过命令hap -v查看版本号)
vivo 手机在1077及以上版本支持深色模式，且默认采用强制日间模式
通过本篇教程，我们将学会：
快应用的主题模式支持三种：
其中，跟随系统主题模式这一项选中时，当系统切换日间、夜间两种主题模式，快应用也会跟随变换主题模式。
了解 3 种主题模式的区别后，现在我们可以尝试在快应用配置主题模式啦。
在manifest.json的display属性，添加themeMode值即可，默认为-1（跟随系统主题模式）,详情请查看manifest 文档
"display": {
"themeMode": -1,
}
| 参数值 | 意义 |
|---|---|
| -1 | 跟随系统主题模式 |
| 0 | 固定日间模式 |
| 1 | 固定夜间模式 |
如果需要针对特定的主题模式做适配逻辑，我们就需要获取当前的主题模式值了
通过调用@system.configuration的getThemeMode方法即可获取，详情可参考configuration 文档
| 参数值 | 意义 |
|---|---|
| 0 | 当前主题为日间模式 |
| 1 | 当前主题为夜间模式 |
import configuration from '@system.configuration'
export default {
getTheme() {
const themeMode = configuration.getThemeMode()
console.log(`Theme mode is ${themeMode} now~`)
}
}
想象一个用户常见的场景，比如说在小说阅读时，用户切换系统主题到夜间模式，应用需弹出提示“进入夜间模式啦”。这个时候，就需要监听主题模式切换了。
在页面代码如index.ux里，实现快应用页面级别的onConfigurationChanged回调，监听配置切换事件。
当 type 为themeMode时，此时回调即为主题模式切换的回调
详情可参考script文档的onConfigurationChanged一节
因为在onConfigurationChanged只能拿到type值，所以开发者如果需要在回调时同时获取主题模式值来判断，可以参考上一节教程，手动获取themeMode值
即使在 manifest.json 配置了themeMode为0（固定日间模式）或1（固定夜间模式），用户切换系统主题时快应用不会有界面变化，但仍会触发onConfigurationChanged回调
// index.ux
import configuration from '@system.configuration'
export default {
onConfigurationChanged(params) {
const { type = '' } = params
if (type === 'themeMode') {
const themeMode = configuration.getThemeMode()
console.log(`themeMode has changed! And now theme mode is ${themeMode}.`)
} else {
console.log(`other type of config has changed, type is : ${type}.`)
}
}
}
看了我们上面的效果图，也许你会好奇，只是设置了皮肤模式，为什么我的快应用就自动在夜间模式可以反色呢？而且效果还这么好！
其实，这是 Android 10 以上系统提供的一个功能，叫Force Dark。开启了Force Dark的安卓应用，就会在夜间模式下自动反色，达到十分简单且效果不赖的 APP 夜间模式效果，详情可查看 Android 的深色主题背景文档的"Force Dark"一节
而快应用也把Force Dark的特性在 1070 以上的版本开始加入支持。
我们只需要按照配置 app 的主题模式教程，将 themeMode 设为-1(跟随系统主题模式）或1（固定夜间模式），即可在夜间模式查看反色效果，非常方便。
然而，因为Force Dark反色的样式由 Android 底层自动计算，且仅在系统为夜间模式时生效，我们是无法手动修改的。因此，根据需求场景，我们可能需要手动关闭反色效果，或指定快应用在夜间模式下的样式。
在这一节，我们将学习如何关闭反色效果。
ForceDark 的开关有 3 个级别：
在快应用中，ForceDark开关，除了直接影响自己的反色表现，也同样影响其所有子元素的反色表现。
父子元素的层级顺序：APP 级别 > 页面级别 > 组件级别 > 子组件级别
具体规则如下：
true，子元素设置为false，则子元素的表现是false；子元素设置为true，则子元素的表现为truefalse，子元素无论设置为false或true ，表现都是false应用级别的forceDark开关，可配置此快应用所有页面的自动反色开关。
在manifest.json的display属性下可配置forceDark属性（属性为驼峰命名）
默认为true（开启），可选值：true（开启），false（关闭）
"display": {
"themeMode": -1,
"forceDark": true
}
页面级别的forceDark开关，可配置特定页面的自动反色开关。
在manifest.json的display属性下的pages数组的页面节点，可配置forceDark属性（属性为驼峰命名）
默认为true（开启），可选值：true（开启），false（关闭）
"display": {
"pages": {
"Demo": {
"titleBarText": "示例页",
"forceDark": false
},
}
}
组件级别的forcedark开关，可以配置该组件的自动反色开关
在组件标签里配置forcedark属性(属性为全小写命名)
默认为true（开启），可选值：true（开启），false（关闭）
// force-dark-demo.ux
<template>
<div>
<text forcedark="false">关闭了自动反色的文字</text>
<text>默认开启了自动反色的文字</text>
<div>
</template>
组件级别的forcedark属性为全小写！与manifest.json的配置项为驼峰的forceDark不一样！请注意书写！
子节点的forcedark遵守ForceDark 开关基本原则的简介，需要注意父子元素的forcedark开关的影响
span组件不支持forcedark开关，它只能依赖父元素的forcedark参数值控制开关，并且当父元素为span的时候，继续往上找，直至找到父元素为a或text元素截止
video、camera、map、custommarker、canvas组件均不支持设置forcedark参数，也不会响应父元素的forcedark设置
当我们对安卓夜间模式的反色处理不太满意时，上一节我们学习了如何手动关闭反色效果。这一节，我们会使用媒体查询（media query），去配置指定主题模式的样式
媒体查询，即media query，快应用在1070版本开始提供支持，详情可查看样式文档。
如果需要使用media query实现夜间模式的样式配置，则查询条件是prefers-color-scheme
注意： prefers-color-scheme的媒体查询仅在 Android 10+手机支持
支持参数：
light 系统主题模式为日间模式时查询生效dark 系统主题模式为夜间模式时查询生效示例代码：
<style>
.box {
width:100px;
height:100px;
background-color:black;
}
@media (prefers-color-scheme: dark) {
.box {
background: white;
}
}
</style>
夜间模式作为新的软件交互界面的探索，快应用在 Android 10+手机上提供了支持与丰富的可配置项。开发者配合这篇教程，可以更好更快捷地，实现快应用的夜间模式形态。