less动态生成--antd换肤功能

原理：依赖antd-theme-generator插件来生成一个themeColor.less文件，less中颜色都用antd的变量来替代，在切换时候使用less.modifyVars（themeconfig）中的 themeconfig来传进去不同颜色配置

注意： 1、每次修改配置颜色都需要重新生成一遍

2、使用yarn theme（貌似npm都会报错）

3、根目录中的color.js中的themeVariables中的antd变量要跟styles/theme_dark中的变量对应

// 配置生成步骤如下：

1、npm install antd-theme-generator --save

2、index.html

<body>
<link rel="stylesheet/less" type="text/css" href="static/color.less" /> //主要是这个起作用
<script>
window.less = {
async: false,
env: 'production'
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div></body>

3、根目录添加color.js ：

const options = {
stylesDir: path.join(__dirname, './src/styles'), //对应具体位置
antDir: path.join(__dirname, './node_modules/antd'), //对应具体位置
varFile: path.join(__dirname, './src/styles/vars.less'), //对应具体位置
mainLessFile: path.join(__dirname, './src/styles/main.less'), //对应具体位置
themeVariables: [
'@primary-color',
'@secondary-color',
'@text-color',
'@text-color-secondary',
'@heading-color',
'@layout-body-background',
'@btn-primary-bg',
'@layout-header-background'
],
indexFileName: 'index.html',
outputFilePath: path.join(__dirname, './src/static/color.less'),
}generateTheme(options).then(less => {
console.log('Theme generated successfully');
})
.catch(error => {
console.log('Error', error);
});

color.js eg：

4、src下创建文件夹styles

4.1、src/styles/index.less为空文件夹

4.2、src/styles/variables.less:

4.3、theme_dark和theme_light为不同中自定义antd的样式配置，格式如下：

5、在切换的位置使用less.modifyVars来切换:

6、可以在package.json中配置让node自动生成，如果需要在start或者build时候每次都重新生成可以降node theme配置到start和build中去

--------完成--------

less动态生成--antd换肤功能相关推荐

使用 css/less 动态更换主题色（换肤功能）
前言说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
umi配置webpack_umi/antd pro换肤功能
一个基于umi搭建的项目的换肤的实现因为webpack和umi的层层封装,在线换肤功能实现变得复杂了,antdpro之前提供了动态编译less的方案,可惜中间的webpack插件有问题,而且说实话这 ...
动态更换主题色（换肤功能）
文章目录对于可供选择的颜色/主题样式换肤的实现一个全局class控制样式切换 JS改变href属性值切换样式表,例如 HTML 的 rel 属性下的 alternate 实现: 对于制定动态色值换 ...
android工程换背景图片,android换肤功能如何动态获取控件中背景图片的资源id?
这个是在在做一个换肤功能时遇到的问题. 对于换肤,网上都有示例,可以从别的皮肤安装包中读取所要的资源,前提是你必须先持有这个资源的引用名称,像R.drawable.background(喂,这不是废话 ...
使用ant-design-vue实现换肤功能
1.安装ant-design-vue npm i ant-design-vue --save 2.在main.js中引入 `import Antd from 'ant-design-vue'``imp ...
java怎样实现换肤功能_JavaScript实现换肤功能
一,js换肤的基本原理基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 ...
java怎样实现换肤功能_umi项目换肤功能的实现
一个基于umi搭建的项目的换肤的实现因为webpack和umi的层层封装,在线换肤功能实现变得复杂了,antdpro之前提供了动态编译less的方案,可惜中间的webpack插件有问题,而且说实话这 ...
在Ajax程序中实现无刷新换肤功能(asp.net2.0)
写了一年多的WEB程序,觉得程序中换肤的功能是非常吸引人眼球的技术.特别是在子父级的WEB平台与论坛上应用广泛,可以突出不同人的风格与个性. 从文章的标题上看是Ajax的无刷新换肤,只是本 ...
[css] 如何实现换肤功能？
[css] 如何实现换肤功能? css 换肤常见方案是通过 less/sass/postcss 等css 预处理器,通过它们自身的变量用法,设置不同变量,生成不同的主题样式,但是这些样式都是会被打包 ...

less动态生成--antd换肤功能

less动态生成--antd换肤功能相关推荐

最新文章

热门文章