# 使用暗黑模式

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

# 一、使用条件以及步骤:


# 1. dolphin-weex-ui版本满足 2.4.X 版本及以上;


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


# 3. webpack配置文件，WeexThemePlugin插件 themes增加 'diablo' 主题


# 4. 引入modePlugin插件，调用isSupportDiablo方法使组件库支持暗黑模式


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

module.exports = {
  ...
  plugins: [
    new WeexThemePlugin({
      themes: ['diablo'], // 增加diablo主题
      default: '' 
    }),
    modePlugin.isSupportDiablo()  // 组件库支持暗黑模式
  ],
  ...
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14



# 二、暗黑模式样式适配:

# 1. css

.bg {
  background-color: #00A4F2;
}

@media screen and (weex-theme: diablo) {
  .bg {
    background-color: #0490D3;
  }
}
1
2
3
4
5
6
7
8
9

# 2. js

// 如果有需要js判断不同系统做样式适配，可以引入minxin后使用变量

import DiabloMixin from 'dolphin-weex-ui/mixins/diablo'
export default {
  ...
    mixins: [DiabloMixin],
  ...
  computed: {
    bg() {
      return this._isDiablo ? '#0490D3' : '#00A4F2'
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13



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


# 1. 获取当前是否为暗黑模式，调用getDiablomodeSync方法，（可参考 getDiablomodeSync ）


# 2. 监听暗黑模式变化

const globalEvent = weex.requireModule('globalEvent')
globalEvent.addEventListener('receiveMessageFromApp', (data) => {
  if (data.messageType == 'diablomodeChange'){
    console.log(data.messageBody.diabloMode); // 0 为非暗黑模式，1 为暗黑模式
  }
})
1
2
3
4
5
6
Last Updated: 9/12/2025, 9:19:38 AM

← 1.1 颜色（Color） →