如果使用的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);
}
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。