# 使用暗黑模式

dolphin-intl-ui 2.5.9 支持 M-dark / T-dark 暗黑主题。业务页面完成主题接入并开启 needDarkMode 后，支持暗黑适配的组件默认样式即可跟随 App 主题。

# 一、前置条件及步骤:

# 1. SmartHome App 3.19.0 版本及以上，TSmartLife App 2.16.0 版本及以上

# 2. dolphin-intl-ui 组件库 2.5.9 版本及以上

# 3. 在插件包内添加 native_config.json，配置如下：

{
    "supportDarkTheme": 1
}

1
2
3

tip：在 webpack.common.conf.js 中新增文件拷贝

diyFileCheck('plugin.json')
diyFileCheck('native_config.json') // 新增

1
2

# 4. 接入weex一键换肤工具，并满足依赖为最新版本（可参考 weex 一键换肤工具）

# 5. webpack 配置 WeexThemePlugin

组件库支持主题：

App	日间	夜间
国际美居	''	'M-dark'
国际东芝	'T-light'	'T-dark'

const WeexThemePlugin = require('@dolphinweex/weex-theme/lib/plugin')

module.exports = {
  // 其余构建配置按项目保留
  plugins: [
    new WeexThemePlugin({
        themes: ['', 'M-dark', 'T-light', 'T-dark'], // 插件主题列表（根据上架App配置）
        default: '', // 国际美居默认浅色主题；国际东芝使用 T-light
        root: '', // 默认根（组件库）浅色主题
    }),
  ],
  // 其余构建配置按项目保留
};

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

tip：记得将 weex-loader 替换成 @dolphinweex/weex-loader

weexConfig.module.rules[1].use.push(
    {
        // loader: 'weex-loader',
        loader: '@dolphinweex/weex-loader',
        // 其余 loader 选项按项目配置
    }
);

1
2
3
4
5
6
7

# 二、暗黑模式开发适配:

# 1. 在页面（entry）组件中引入 pluginTheme mixin，并初始化主题模式

import pluginThemeMixin from 'dolphin-intl-ui/mixins/pluginTheme'

export default {
  mixins: [pluginThemeMixin],
  async created() {
    await this.initThemeMode() // 同步并监听 App 主题变化，销毁时自动移除监听
  },
}

1
2
3
4
5
6
7
8

# 2. 开启组件内置暗黑适配

在组件上传入 :need-dark-mode="true"；一般组件默认值为 false。页面仅引入 pluginThemeMixin 不会自动开启所有组件的暗黑适配。

<dof-button :need-dark-mode="true" text="确定" />
<dof-stepper :need-dark-mode="true" />

1
2

业务颜色 props / 样式覆盖 > 内置暗黑默认值 > 内置浅色默认值。显式传入的颜色在浅色、暗黑以及关闭适配后均有效；需要随主题变化的业务颜色应使用 isDarkMode 计算并传入。

<dof-stepper
  :need-dark-mode="true"
  :text-color="isDarkMode ? '#E5E5E5' : '#333333'"
/>

1
2
3
4

未传颜色或颜色为空时使用组件默认配色，具体属性见各组件的 API 参数表。

色板按 weex.config.env.appName 匹配：国际美居为 MSmartLife，国际东芝为 Toshiba HA。appName 缺失或不匹配时，组件回退原浅色 / 旧主题配色。
默认暗黑色值在 M-dark / T-dark 下保持一致；彩色品牌 / 状态主题、图片和透明背景按原设计保留。
组合组件会向内部组件透传开关；业务自定义插槽中的组件仍需传入开关。
dof-numcard-col 和 dof-slider-scale 不传开关时继承父组件，显式 false 可关闭。
滚轮选择器见 DofPicker，App 原生选择器仍见 Picker。

# 3. 使用 isDarkMode 计算属性

import pluginThemeMixin from 'dolphin-intl-ui/mixins/pluginTheme'

export default {
  mixins: [pluginThemeMixin],
  computed: {
    bg() {
      return this.isDarkMode ? '#000000' : '#FFFFFF'
    }
  }
}

1
2
3
4
5
6
7
8
9
10

# 4. 使用 CSS 适配业务页面主题

.bg {
  background-color: #FFFFFF;
}

@media screen and (weex-theme: M-dark) {
  .bg {
    background-color: #000000;
  }
}

@media screen and (weex-theme: T-dark) {
  .bg {
    background-color: #000000;
  }
}

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

以上 CSS 用于业务页面主题样式。组件库内置适配由 needDarkMode 和当前主题共同控制：关闭开关时，JS 与 CSS 的内置暗黑配色均不生效。

Native 页面自定义主题样式时，请在目标节点绑定独立的类，并在媒体查询中使用单类选择器；不支持后代选择器、复合类选择器或逗号分组选择器。

业务通过内联样式设置颜色时，需要随主题变化更新颜色，并在切回浅色时恢复浅色配色。

# 三、暗黑模式相关方法&监听:

# 1. 获取当前App模式

调用 getThemeMode 方法
使用 weex.config.env.mode

# 2. 监听App模式变化

const globalEvent = weex.requireModule('globalEvent')

globalEvent.addEventListener('receiveMessageFromApp', data => {
    if (data.messageType === 'changeThemeMode') {
        this.$bridge.log(data.messageBody.mode); // 1 日间，2 夜间
    }
});