elementui通过配置文件动态切换主题

ElementUI是一个UI组件库，可以通过配置文件动态切换主题。具体步骤如下：

1. 在使用ElementUI之前，需要在项目中引入样式文件。

import 'element-ui/lib/theme-chalk/index.css';

2. 在项目中创建一个主题配置文件，例如theme.scss。

// 主题颜色
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;

// 字体
$--font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

// 标题
$--font-size-h1: 2.5rem;
$--font-size-h2: 2rem;
$--font-size-h3: 1.75rem;
$--font-size-h4: 1.5rem;
$--font-size-h5: 1.25rem;
$--font-size-h6: 1rem;

// 按钮
$--button-height: 40px;
$--button-font-weight: normal;

// 输入框
$--input-height: 40px;
$--input-font-size: 14px;
$--input-font-weight: normal;

// 导航
$--nav-height: 50px;
$--nav-font-size: 16px;

// 侧边栏
$--sider-width: 200px;
$--sider-background-color: #F7F9FA;

// 表格
$--table-header-background-color: #F7F9FA;
$--table-header-font-size: 14px;
$--table-body-background-color: #FFFFFF;
$--table-body-font-size: 14px;

// 其它
$--border-radius: 4px;
$--box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

3. 在配置文件中引入ElementUI的样式文件，并覆盖其中的变量。

@import 'element-ui/lib/theme-chalk/index.css';

// 覆盖主题变量
@import './theme.scss';

4. 在Vue项目中使用ElementUI。

import Vue from 'vue';
import ElementUI from 'element-ui';
import './theme.scss';

Vue.use(ElementUI);

5. 在需要动态切换主题的地方，修改配置文件中的变量值即可。

// 修改主题颜色
$--color-primary: #F44336;
$--color-success: #4CAF50;
$--color-warning: #FFC107;
$--color-danger: #2196F3;

// 刷新页面
location.reload();
``