随笔 - 2649  文章 - 2452  评论 - 0  阅读 - 80424

一键换肤

前言

自从2019年苹果发布会推出了深色模式后，越来越多的APP开始更新了深色模式。美的美居适配深色模式也逐步成为需求，故提供 Weex 一键换肤规范。

#实例

#安装

#使用 npm 安装

注意

[ ! ] 推荐使用 npm 的官方源进行安装

# 安装 @dolphinweex/weex-theme
npm install @dolphinweex/weex-theme --save
# 安装 @dolphinweex/weex-loader
npm install @dolphinweex/weex-loader --save

#快速上手

#Webpack 配置

#WeexThemePlugin(OBJECT)

一键换肤 webpack 配置项

OBJECT 参数说明

参数名 类型 必填 说明
themes Array 是 可使用的主题数组。例如：['light', 'dark', 'colmo']
default String 否 默认使用的主题（可为空，为空即不使用主题）

示例

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

module.exports = {
  ...
  plugins: [
    new WeexThemePlugin({
      themes: ['light', 'dark', 'colmo'], // 可使用的主题数组
      default: 'light' // 默认使用的主题（可为空，为空即不使用主题）
    })
  ],
  ...
};

#对 webpack.common.conf.js 进行配置

webpack.common.conf.js+9 additions-1 deletions

> ⋯
6 6 * Description: Adds a banner to the top of each generated chunk.
7 7 * See: https://webpack.js.org/plugins/banner-plugin/
8 8 */
9 9 new webpack.BannerPlugin({
10 10 banner: '// { "framework": "Vue"}',
11 11 raw: true,
12 12 exclude: 'Vue'
13 13 }),
14 14 // 文件拷贝插件,将图片和字体拷贝到dist目录 new copy([{ from: ./src/widgets/${project_category_name}/assets, to: './assets' }])]
15 15
16 // 引入 WeexThemePlugin
17 const WeexThemePlugin = require('@dolphinweex/weex-theme/lib/plugin')
18 plugins.push(
19 new WeexThemePlugin({
20 themes: ['light', 'dark', 'colmo'], // 可使用的主题数组
21 default: 'light' // 默认使用的主题（可为空，为空即不使用主题）
22 })
23 )
24
16 25 /**
17 26 *copy 自定义的配置文件
18 27 * @param {*} target_file
19 28 */
20 29 const diyFileCheck = target_file => {
21 30 target_file = target_file || 'setting.json' let dir = ./src/widgets/${project_category_name}/${target_file} const files = glob.sync(dir, { nodir: true })
22 31 if (files.length === 1) { plugins.push(new copy([{ from: ./src/widgets/${project_category_name}/${target_file}, to: './' }])) }
23 32 }
24 33 diyFileCheck('plugin.json')
25 34
26 35 ......
27 36
28 37 // Config for compile jsbundle for native.
29 38 const weexConfig = getBaseConfig()
30 39 weexConfig.entry = weexEntry
31 40 weexConfig.output.filename = '[name].js'
32 41 weexConfig.module.rules[1].use.push({
33 loader: 'weex-loader',
42 loader: '@dolphinweex/weex-loader', // 将 weex-loader 替换成 @dolphinweex/weex-loader
34 43 options: Object.assign(vueLoaderConfig({ useVue: false }), {
35 44 postcss: [
36 45 //让weex支持css的简写，如border,padding
37 46 require('postcss-weex')({ env: 'weex' })
38 47 ]
39 48 })
40 49 })
41 50 weexConfig.node = config.nodeConfiguration
42 51
43 52 module.exports = [webConfig, weexConfig]

#第一个例子

示例

<template>
  <div class="wrapper">
    <text class="title">Hello!</text>
  </div>
</template>

<style>
.wrapper {
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.title {
  font-size: 180px;
  color: #267aff;
}

/* 浅色风格 */
@media screen and (weex-theme: light) {
  .title {
    color: #267aff;
  }
}

/* 深色风格 */
@media screen and (weex-theme: dark) {
  .title {
    color: #000000;
  }
}

/* colmo模式 */
@media screen and (weex-theme: colmo) {
  .title {
    color: #b35336;
  }
}
</style>

<script>
export default {
  created() {
    var count = 0
    setInterval(() => {
      count++
      if (count % 3 == 1) {
        this.$theme.setTheme('dark')
      } else if (count % 3 == 2) {
        this.$theme.setTheme('colmo')
      } else {
        this.$theme.setTheme('light')
      }
    }, 1500)
  }
}
</script>

#开发

#CSS

@media screen and (weex-theme: THEME)

允许在 style 中使用 @media 规则开发指定的主题样式

参数说明

参数名 类型 必填 说明
THEME String 是 主题名称。注：仅对 WeexThemePlugin 配置的主题生效

示例

<style>
...

/* 浅色风格 */
@media screen and (weex-theme: light) {
  .title {
    color: #267aff;
  }
}

/* 深色风格 */
@media screen and (weex-theme: dark) {
  .title {
    color: #000000;
  }
}

/* colmo风格 */
@media screen and (weex-theme: colmo) {
  .title {
    color: #b35336;
  }
}

...
</style>

#API

#setTheme 更改主题

setTheme(THEME)

参数说明

参数名 类型 必填 说明
THEME String 是 主题名称。注：仅对 WeexThemePlugin 配置的主题生效
示例

用法

<script>
export default {
  async created() {
    // 注意：安卓端在 created 中调用 setTheme 需要加上 async/await

    // 切换到 light 主题
    await this.$theme.setTheme('light')

    // 切换到 dark 主题
    await this.$theme.setTheme('dark')

    // 不使用主题
    await this.$theme.setTheme('')
  }
}
</script>

#getTheme 获取当前主题

getTheme()

示例

用法

<script>
export default {
  created() {
    // 获取当前主题
    const value = this.$theme.getTheme()
    console.log(value) // 输出 WeexThemePlugin 配置的主题（light 或 dark 或 colmo）或 ''
  }
}
</script>

#watchTheme 根据当前主题获取指定配置

watchTheme(OBJECT)

监听当前页面主题，返回配置项对应值。

OBJECT 参数说明

参数名 类型 必填 说明
[KEY] Any 是 WeexThemePlugin 配置的主题值枚举
default Any 是 默认配置
示例

用法

<template>
  <div class="wrapper" @viewappear="handleViewappear">
    <image :src="logoSrc"></image>
    <text :style="titleStyle">Hello!</text>
  </div>
</template>

<script>
export default {
  computed: {
    // 运用在 :src 上
    logoSrc() {
      let tmp = this.$theme.watchTheme({
        light: 'https://image.midea.com/logo/light.png', // 浅色风格 的 src 图片链接
        dark: 'https://image.midea.com/logo/dark.png', // 深色风格 的 src 图片链接
        colmo: 'https://image.midea.com/logo/colmo.png', // colmo模式 的 src 图片链接
        default: 'https://image.midea.com/logo/default.png' 
      })
      /*****
       * 根据设置的当前主题返回对应的配置
       * 例如：当前主题为 light， 则 tmp = 'https://image.midea.com/logo/light.png'
       * 例如：当前主题为 dark， 则 tmp = 'https://image.midea.com/logo/dark.png'
       * 例如：当前主题为 colmo， 则 tmp = 'https://image.midea.com/logo/colmo.png'
       * 例如：当前主题为空（没有设置主题）， 则 tmp = 'https://image.midea.com/logo/default.png' 
       */
      return tmp
    },

    // 运用在 :style 上
    titleStyle() {
      let tmp = this.$theme.watchTheme({
        light: { color: '267aff' }, // 浅色风格 的 style
        dark: { color: '000000' }, // 深色风格 的 style
        colmo: { color: 'b35336' }, // colmo模式 的 style
        default: { color: '333333' }
      })
      /*****
       * 根据设置的当前主题返回对应的配置
       * 例如：当前主题为 light， 则 tmp = { color: '267aff' }
       * 例如：当前主题为 dark， 则 tmp = { color: '000000' }
       * 例如：当前主题为 colmo， 则 tmp = { color: 'b35336' }
       * 例如：当前主题为空（没有设置主题）， 则 tmp = { color: '333333' }
       */
      return tmp
    }
  },
  methods: {
    // 运用在 @ 事件上
    handleViewappear() {
      let tmp = this.$theme.watchTheme({
        light: function handleViewappear_light() {...},  // 浅色风格 的 事件
        dark: function handleViewappear_dark() {...},  // 深色风格 的 事件
        colmo: function handleViewappear_colmo() {...},  // colmo模式 的 事件
        default: function handleViewappear_default() {...}
      })
      /*****
       * 根据设置的当前主题返回对应的配置
       * 例如：当前主题为 light， 则 tmp = function handleViewappear_light()
       * 例如：当前主题为 dark， 则 tmp = function handleViewappear_dark()
       * 例如：当前主题为 colmo， 则 tmp = function handleViewappear_colmo()
       * 例如：当前主题为空（没有设置主题）， 则 tmp = function handleViewappear_default()
       */
      return tmp
    }
  }
}
</script>

#组件

#WeexThemeView 包裹组件

  • 可用于修复伪类 :active 在安卓端出现显示异常情况

示例

<template>
  <div class="wrapper">
    <WeexThemeView>
      <text class="title">Hello!</text>
    </WeexThemeView>
  </div>
</template>

<script>
import { WeexThemeView } from '@dolphinweex/weex-theme'
export default {
  components:{
    WeexThemeView  
  }
}
</script>

#低版本接入

#使用 npm 安装

注意

[ ! ] 推荐使用 npm 的官方源进行安装

# 安装 @dolphinweex/weex-theme
npm install @dolphinweex/weex-theme --save
# 安装 @dolphinweex/weex-loader
npm install @dolphinweex/weex-loader --save

#Webpack 配置

#对 webpack.config.js 进行配置

webpack.config.js+9 additions-1 deletions

> ⋯
198 198 },
199 199 sourceMap: false
200 200 }),
201 201 new webpack.BannerPlugin({
202 202 banner: '//
203 203 ',
204 204 raw: true
205 205 })
206 206 )
207 207
208 // 引入 WeexThemePlugin
209 const WeexThemePlugin = require('@dolphinweex/weex-theme/lib/plugin')
210 plugins.push(
211 new WeexThemePlugin({
212 themes: ['colmo'], // 可使用的主题数组
213 default: '' // 默认使用的主题（可为空，为空即不使用主题）
214 })
215 )
216
208 217 const getBaseConfig = () => ({
209 218 //devtool: '#source-map',
210 219 context: __dirname,
211 220 output: {
212 221 path: path.join(__dirname, 'dist')
213 222 /* publicPath: '/',
214 223 filename: 'aa/[name].js'
215 224 libraryTarget: 'umd',
216 225 library: npm/${pkg.name}/[name],
217 226 umdNamedDefine: false*/
> ⋯
303 312 }
304 313 }
305 314 ]
306 315 }
307 316 })
308 317
309 318 const nativeCfg = getBaseConfig()
310 319 console.log(weexEntry)
311 320 nativeCfg.entry = weexEntry
312 321 nativeCfg.output.filename = '[name].js'
313 nativeCfg.module.rules[1].use.push('weex-loader')
322 nativeCfg.module.rules[1].use.push('@dolphinweex/weex-loader') // 将 weex-loader 替换成 @dolphinweex/weex-loader
314 323
315 324 const exportConfig = [
316 325 // webCfg,
317 326 nativeCfg
318 327 ]
319 328
320 329 module.exports = exportConfig
321 330

#主题换肤CSS代码检索生成快捷工具

主题换肤CSS代码检索生成快捷工具

#根主题

由于UI组件库支持的主题是默认和colmo 当期望UI组件库采用colmo风格，且WeexThemePlugin配置的主题不仅限于colmo时，切换主题需要指定下根主题。

#Webpack 配置

#WeexThemePlugin(OBJECT)

一键换肤 webpack 配置项

OBJECT 参数说明

参数名 类型 必填 说明
themes Array 是 可使用的主题数组。例如：['light', 'dark', 'colmo']
default String 否 默认使用的主题（可为空，为空即不使用主题）
root String 否 指定默认主题的根主题（可选：light

示例

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

module.exports = {
  ...
  plugins: [
    new WeexThemePlugin({
      themes: ['light', 'dark', 'colmo-2.0'], // 可使用的主题数组
      default: 'colmo-2.0', // 默认使用的主题（可为空，为空即不使用主题）
      root: 'colmo' // 指定默认主题的根主题
    })
  ],
  ...
};

#API

#setTheme 更改主题

setTheme(THEME, [OBJECT])

参数说明

参数名 类型 必填 说明
THEME String 是 主题名称。注：仅对 WeexThemePlugin 配置的主题生效
OBJECT Object 否 配置项

OBJECT 参数说明

参数名 类型 必填 说明
root String 否 指定当前主题属于哪个根主题（可选：light、dark、colmo）

用法

<script>
export default {
  async created() {
    // 注意：安卓端在 created 中调用 setTheme 需要加上 async/await

    // 切换到 colmo-2.0 主题，且指定根主题
    await this.$theme.setTheme('colmo-2.0', { root: 'colmo' })
  }
}
</script>

#getRootTheme 获取根主题

getRootTheme()

用法

<script>
export default {
  created() {
    // 组件库获取根主题
    const value = this.$theme.getRootTheme()
    console.log(value) // 输出 light 或 dark 或 colmo 或 ''

    // 例子1
    // 切换到 colmo-2.0 主题，且指定根主题
    await this.$theme.setTheme('colmo-2.0', { root: 'colmo' })

    // 组件库获取主题
    const value = this.$theme.getRootTheme()
    console.log(value) // 输出 colmo

    // 例子2
    // 切换到 colmo-2.0 主题
    await this.$theme.setTheme('colmo-2.0')

    // 组件库获取主题
    const value = this.$theme.getRootTheme()
    console.log(value) // 输出 ''

    // 例子3
    // 切换到 colmo 主题
    await this.$theme.setTheme('colmo')

    // 组件库获取主题
    const value = this.$theme.getRootTheme()
    console.log(value) // 输出 'colmo'

    // 例子4
    // 切换到 colmo 主题，且指定根主题
    await this.$theme.setTheme('colmo', { root: 'colmo' })

    // 组件库获取主题
    const value = this.$theme.getRootTheme()
    console.log(value) // 输出 colmo
  }
}
</script>

#getFullTheme 获取完整主题（含业务主题和根主题）

getFullTheme()

用法

<script>
export default {
  created() {
    // 组件库获取完整主题
    const value = this.$theme.getFullTheme()
    console.log(value) // `{根主题}.{业务主题}`

    // 例子1
    // 切换到 colmo-2.0 主题，且指定根主题
    await this.$theme.setTheme('colmo-2.0', { root: 'colmo' })

    // 组件库获取主题
    const value = this.$theme.getFullTheme()
    console.log(value) // 输出 colmo.colmo-2.0

    // 例子2
    // 切换到 colmo-2.0 主题
    await this.$theme.setTheme('colmo-2.0')

    // 组件库获取主题
    const value = this.$theme.getFullTheme()
    console.log(value) // 输出 'colmo-2.0'
  }
}
</script>

#watchTheme 根据当前主题获取指定配置

watchTheme(OBJECT)

兼容根主题：优先返回业务主题匹配的值，再返回根主题匹配的值

OBJECT 参数说明

参数名 类型 必填 说明
[KEY] Any 是 WeexThemePlugin 配置的主题值枚举
default Any 是 默认配置

用法

<template>
  <div class="wrapper">
    <image :src="logoSrc"></image>
  </div>
</template>
 
<script>
export default {
  computed: {
    // 运用在 :src 上
    logoSrc() {
      let tmp = this.$theme.watchTheme({
        dark1: 'https://image.midea.com/logo/dark1.png', // dark1 风格 的 src 图片链接
        light: 'https://image.midea.com/logo/light.png', // 浅色风格 的 src 图片链接
        dark: 'https://image.midea.com/logo/dark.png', // 深色风格 的 src 图片链接
        colmo: 'https://image.midea.com/logo/colmo.png', // colmo模式 的 src 图片链接
        default: 'https://image.midea.com/logo/default.png'
      })
      /*****
       * 根据设置的当前主题返回对应的配置
       * 例如：this.$theme.setTheme('dark1', { root: 'dark' })， 则 tmp = 'https://image.midea.com/logo/dark1.png'
       * 例如：this.$theme.setTheme('light1', { root: 'light' })， 则 tmp = 'https://image.midea.com/logo/light.png'
       * 例如：this.$theme.setTheme('colmo')， 则 tmp = 'https://image.midea.com/logo/colmo.png'
       * 例如：当前主题为空（没有设置主题）， 则 tmp = 'https://image.midea.com/logo/default.png'
       */
      return tmp
    }
  }
}
</script>
posted on   AtlasLapetos  阅读(6)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Powered by: 博客园 Copyright © 2025 AtlasLapetos
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示