react-vite-一键换肤

使用CSS变量兼容性做换肤。

仅需安装插件：css-vars-ponyfill 

一、新建js文件，用于存放css变量

目录结构直接上图：

// 深色
const darkTheme = {
  "--main-bgc": "#1A1B1D",
  "--main-font-c": "#B1B1B1"
};

export default darkTheme

注：

1.变量名前要的“--”不能去掉

2.light.js内容和dark.js一样，颜色按自己需要的写即可

3.需要几套皮肤，新增js即可

二、封装切换主题的theme.js，在main.jsx做初始化调用

theme.js：

import lightTheme from "@/assets/js/light";
import darkTheme from "@/assets/js/dark";
import cssVars from "css-vars-ponyfill";

const initTheme = (theme) => {
  document.documentElement.setAttribute("data-theme", theme);
  cssVars({