# 夜间模式适配

_手机

在这一篇教程，我们将从简单的主题模式配置入门，到控制自动反色开关与手动配置夜间模式的样式，逐步掌握夜间模式的最佳实践。

注意：

夜间模式仅在Android 10以上版本的手机支持，如果要查看效果，请确保拥有合适版本的手机。

注意：卡片夜间模式跟随所嵌入显示原生应用的模式

通过本篇教程，我们将学会：

获取 app 的主题模式值
系统主题模式切换的回调
ForceDark 开关
通过媒体查询配置指定主题模式的样式

# 获取 app 的主题模式值

如果需要针对特定的主题模式做适配逻辑，我们就需要获取当前的主题模式值了

# 步骤：

通过调用@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~`)
  }
}

1
2
3
4
5
6
7

# 系统主题模式切换的回调

# 步骤：

在页面代码如index.ux里，实现卡片级别的onConfigurationChanged回调，监听配置切换事件。
当 type 为themeMode时，此时回调即为主题模式切换的回调

详情可参考script文档的onConfigurationChanged一节

# 注意：

因为在onConfigurationChanged只能拿到type值，所以开发者如果需要在回调时同时获取主题模式值来判断，可以参考上一节教程，手动获取themeMode值

# 示例代码：

// 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}.`)
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# ForceDark 开关

在Android 10 以上系统提供的一个功能，叫Force Dark。开启了Force Dark的安卓应用，因为Force Dark反色的样式由 Android 底层自动计算，且仅在系统为夜间模式时生效，我们是无法手动修改的。因此，根据需求场景，我们可能需要手动关闭反色效果，或指定卡片在夜间模式下的样式。

在这一节，我们将学习如何关闭反色效果。

组件级别

# ForceDark 开关基本原则

ForceDark开关，除了直接影响自己的反色表现，也同样影响其所有子元素的反色表现。

父子元素的层级顺序：组件级别 > 子组件级别

具体规则如下：

如果父元素设置为true，子元素设置为false，则子元素的表现是false；子元素设置为true，则子元素的表现为true
如果父元素设置为false，子元素无论设置为false或true ，表现都是false

# 组件级别的 forcedark

组件级别的forcedark开关，可以配置该组件的自动反色开关

# 步骤：

在组件标签里配置forcedark属性(属性为全小写命名)

# 参数值：

默认为true（开启），可选值：true（开启），false（关闭）

# 示例代码：

// force-dark-demo.ux
<template>
<div>
   <text forcedark="false">关闭了自动反色的文字</text>
   <text>默认开启了自动反色的文字</text>
<div>
</template>

1
2
3
4
5
6
7

# 注意点：

组件级别的forcedark属性为全小写！请注意书写！
子节点的forcedark遵守ForceDark 开关基本原则的简介，需要注意父子元素的forcedark开关的影响
span组件不支持forcedark开关，它只能依赖父元素的forcedark参数值控制开关，并且当父元素为span的时候，继续往上找，直至找到父元素为a或text元素截止
video组件不支持设置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>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 总结

夜间模式作为新的软件交互界面的探索，卡片在 Android 10+手机上提供了支持与丰富的可配置项。开发者配合这篇教程，可以更好更快捷地，实现快应用的夜间模式形态。

←

→