动态加载主题样式文件

方法

import { theme } from 'paiui'
theme.change('...', '...', '...')
theme.reset('...')

实例方法

<el-button v-on:click="$paiui.theme.change('dark', `theme-dark.css`, 'paiui-demo')">深色主题</el-button>
<el-button v-on:click="$paiui.theme.change('light', `theme-light.css`, 'paiui-demo')">浅色主题</el-button>
<el-button v-on:click="$paiui.theme.reset('paiui-demo')">恢复默认主题</el-button>

<el-button v-on:click="$paiui.theme.change('dark', `theme-dark.css`, 'paiui-demo')">深色主题</el-button>
<el-button v-on:click="$paiui.theme.change('light', `theme-light.css`, 'paiui-demo')">浅色主题</el-button>
<el-button v-on:click="$paiui.theme.reset('paiui-demo')">恢复默认主题</el-button>

直接引入主题样式文件

// 默认主题
import 'paiui/dist/paiui.css'
// 深色主题
import 'paiui/dist/theme-dark.css'

在Nuxt中使用

静态引入主题

nuxt.config.js

module.exports = {
  // 默认主题：element主题(theme-chalk) + paiui组件样式
  css: ['paiui/dist/paiui.css'],
  //
  // 深色主题：element主题(深色定制) + paiui组件样式
  // css: ['paiui/dist/theme-dark.css'],
}

动态切换主题

nuxt.config.js

// 用此插件复制主题文件
const CopyWebpackPlugin = require('copy-webpack-plugin')
// ...
module.exports = {
  // 默认主题：element主题(theme-chalk) + paiui组件样式
  css: ['paiui/dist/paiui.css'],
  // ...
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend (config, ctx) {
      // 复制主题文件
      config.plugins.push(
        new CopyWebpackPlugin({
          patterns: [
            {
              from: 'node_modules/paiui/dist/images',
              to: 'paiui/images'
            },
            {
              from: 'node_modules/paiui/dist/theme-dark.css',
              to: 'paiui'
            },
          ],
        })
      )
      // ...
      return config
    }
  }
  // ...
}

切换主题

/* 主题工具方法 */
import { theme } from 'paiui'
// 切换
theme.change('dark', `_nuxt/paiui/theme-dark.css`, 'pai-demo')
// 重置
theme.reset('pai-demo')
//
/* 用实例方法切换 */
// 切换
this.$paiui.theme.change('dark', `_nuxt/paiui/theme-dark.css`, 'pai-demo')
// 重置
this.$paiui.theme.reset('pai-demo')

确保浏览器环境

created () {
  if(process.client){
    this.$paiui.theme.change('dark', `_nuxt/paiui/theme-dark.css`, 'pai-demo')
  }
},

主题背景色

/* 主题背景色 */
var(--pai-bg-color)
/* 默认主题为 #ffffff */
/* 深色主题为 #1F2327 */