# 使用暗黑模式

组件库dolphin-intl-ui默认不支持暗黑模式，如果需要组件默认样式支持跟随App暗黑模式需要手动配置。

# 一、前置条件及步骤:

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

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

# 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: 'xxx', // 默认插件主题
        root: 'xxx', // 默认根（组件库）主题
    }),
  ],
  ...
};

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',
        ...
    }
);

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. 使用 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

# 3. 使用 css 适配主题模式

.bg {
  background-color: #FFFFFF;
}

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

1
2
3
4
5
6
7
8
9

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

# 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 夜间
    }
});