切换主题插件使用

需要安装element-ui

安装依赖

npm i @ansevenlet/change-theme-color -S

如何使用

import { updateThemeColor } from '@ansevenlet/change-theme-color';
/**
 * 更新主题色 
 * @param targetColor 需要修改的色值
 * @param newColor 修改后的色值
 * @param ORIGINAL_THEME elementUI主题色
 */
updateThemeColor(targetColor, newColor, ORIGINAL_THEME);

由于切换主题色时需要全局修改颜色变量，所以项目中需要创建颜色变量，所有使用颜色的地方必须通过变量来设置，如果使用咱们自己的组件库组件，则需要传入色值。

组件中要有背景色和文字颜色的设置，或者其他设置只要需要变化颜色的属性都需要添加

**创建变量文件 .scss文件 **

定义颜色变量

variable.scss

:root{
  --font-size: 16px; // 定义基础字号
  --theme-color: #3398ff; // 主题色
}

设置颜色使用变量

background: var(--theme-color);

控制颜色 修改色值

document.body.style.setProperty('--theme-color', '#ddd' || '');

示例

<section class="theme-color">
  <!-- …… -->
  <el-color-picker v-model="color" @change="changeThemeColor"></el-color-picker>
  <!-- …… -->
</section>

<script lang="ts">
import {
  defineComponent, reactive, toRefs,
} from '@vue/composition-api';
import { updateThemeColor } from '@ansevenlet/change-theme-color';

export default defineComponent({
  name: 'theme-color',

  setup() {

    const state = reactive({
      color: '#fff',
    });

    /**
     * 修改主题色
     */
    function changeThemeColor(color: string) {
      updateThemeColor(color, color, ORIGINAL_THEME);
      localStorage.setItem('theme_color', color);
      document.body.style.setProperty('--theme-color', color);
    }

    return {
      ...toRefs(state),
      changeThemeColor,
    };
  },
});
</script>