跟框架无关的前端换皮肤

如果使用的UI框架，每个UI框架都有自己的换肤策略。如果没有用框架的情况下，怎么换肤呢？

主要利用css变量，然后再兼容低版本浏览器即可。

 

 

 代码：

//theme/variable.js
// variable.js
//浅色
export const theme1 = {
	'--btn-bg': 'linear-gradient(90deg, #1000DA 0%, #2688FF 100%)',
	'--btn-forbidden-bg': '#B6B6B6',
	'--btn-radius': '2px',
	'--text-1': ' #1A78FF',
	// 对勾的颜色
	'--text-right': '#1A78FF',
	'--header-bg': '#fff',
	'--header-text': '#272727',
	'--header-active-text': '#0a82ea',
	'--notice-bg': "#f8fcff",
	'--notice-text': '#ff6767',
	'--card-left-text': '#666666',
	'--card-left-bold-text': '#272727',
	'--banner-text': '#fff',
	'--selected-icon-url': 'url(http://gpu.ai-galaxy.cn/static/site_imgs/selected-icon.svg)'
};
// 深色
export const theme2 = {
	'--btn-bg': 'linear-gradient(90deg, #2EB7E5 0%, #4BADFF 100%);',
	'--btn-forbidden-bg': '#B6B6B6',
	'--btn-radius': '2px',
	'--text-1': '#45B6FF',
	// 对勾的颜色
	'--text-right': '#2EB7E5',
	'--header-bg': '#00070D',
	'--header-text': '#FFFFFF',
	'--header-active-text': '#FFFFFF',
	'--notice-bg': "linear-gradient(90deg, #2EB7E5 0%, #4BADFF 100%)",
	'--notice-text': '#fff',
	'--card-left-text': '#fff',
	'--card-left-bold-text': '#fff',
	'--banner-text': '#272727',
	'--selected-icon-url': 'url(http://gpu.ai-galaxy.cn/static/site_imgs/selected-icon-2.svg)'
};

　　

//theme/index.js
import { theme1, theme2 } from "./variable";
import cssVars from "css-vars-ponyfill";
const themeData = {
	theme1,
	theme2
}
export const initTheme = (theme) => {
	document.documentElement.setAttribute("data-theme", theme);
	cssVars({
		// 当添加，删除或修改其<link>或<style>元素的禁用或href属性时，ponyfill将自行调用
		watch: true,
		// variables 自定义属性名/值对的集合
		variables: themeData[theme],
		// 默认将css变量编译为浏览器识别的css样式  true 当浏览器不支持css变量的时候将css变量编译为识别的css
		onlyLegacy: false,
	});
};

　　使用：

//main.js 或者 router的beforeEach
import { initTheme } from '@/theme'
initTheme('theme1');

　　代码中的css值就应该这么写：

.btn{
      background: var(--btn-bg);
      border-radius: var(--btn-radius);
}