antd在线换肤定制功能

最近react项目,用的antd框架,然后看见他的antdPro例子里面有个定制功能很帅,老大说做,那就做吧,鼓捣了一晚终于实现了。

先看预览效果吧

css换肤

入行前端的时候经常看鱼哥(张鑫旭)的博客,记得看过 这篇 ,当时很惊叹,原理其实很简单,就是我们最能想到的方式,多个css,然后用JS替换从而达到换肤效果。但是这个有局限性,比如我们用的是antdUI库,我们不可能每个颜色都去搞个css吧。当时现在我们有less,sass,而且原生的css也有变量var了,所以新时代我们有新技术达到这个效果。

less换肤

其实antd官网是有 定制主题 的,但是是静态的,通过打包之前去设置一些config,less变量从而达到定制效果,但是这显然不是我们想要的==线上实时==换肤效果。

最初我的思路是用node去实时生成一个webpack.config.base的配置文件,但是这样只能在开发环境实现换肤,生成环境是没办法的。然后网上有人说,用less去生成多个css文件,这不又走了以前的老路吗。最后没办法我把antdPro的源码拿来看了下,终于找到了解决办法,antd-theme-generator

步骤

  • 这里我的项目是在自己写的 webpack4-react脚手架 的基础上做修改的,如果你用的create-react-app或者其他的脚手架可能会有相应修改。
  • 安装cnpm i antd-theme-generator --save
  • 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>
  • 根目录添加color.js
const path = require(‘path‘);
const { generateTheme, getLessVars } = require(‘antd-theme-generator‘);

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);
  });
  • src添加styles文件夹,里面有vars.less和main.less
//vars.less
@import "~antd/lib/style/themes/default.less";
@link-color: #00375B;
@primary-color: #00375B;
:root {
    --PC: @primary-color;   //color.less中加入css原生变量:--PC
 }

//main.less
//可为空,只是为了不报错才引入
  • package.json
//为了每次自动node color.js,所以scripts里面修改下
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node color &&  webpack-dev-server --config webpack.config.dev.js",
    "start": "npm run dev",
    "build": "node color && webpack --config webpack.config.prod.js"
  },
  • 使用,启动后直接window.less.modifyVars就可以了
window.less
    .modifyVars(
        {
            ‘@primary-color‘: ‘#ee5e7b‘,
            ‘@link-color‘: ‘#ee5e7b‘,
            ‘@btn-primary-bg‘: ‘ee5e7b‘,
        }
    )
    .then(() => { })
    .catch(error => {
        message.error(`Failed to update theme`);
    });
  • 最后,打包后注意放入环境后打开,否则会报错。

原理

我们发现其实他生效主要就是靠color生成一个color.less文件,然后我打开color.less文件看了下,发现原来是利用的less可以写逻辑这个特性实现的,从而通过window.less.modifyVars去动态的改变less变量。

其他

现在antd的换肤问题解决了,但是我们自己的css样式怎么办呢,比如我有个标题想用主题色,我怎么去拿到这个颜色呢。

  • 起初我是这样实现的vars.less增加
//vars.less
 .primary-color{
     color:@primary-color
 }

这样.primary-color就会打入生成的color.less里面,然后我们就可以用了,当时这样有些地方就不方便,比如box-shadow: 1px 1px 1px 1px #d23333;,我们怎么办,难道每次都要写在vars.less里面吗

  • 所以这里我用了css的原生变量var
//vars.less
:root {
    --PC: @primary-color;
 }

然后就可以使用box-shadow: 1px 1px 1px 1px var(--PC);

本地保存

用户设置颜色后,可以用缓存或者localStorage保存,这就不多说了

预览效果

源码

最后

大家好,这里是「 TaoLand 」,这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……

个人博客:www.yangyuetao.cn

小程序:TaoLand

原文地址:https://www.cnblogs.com/TaoLand/p/9643232.html

时间: 2024-10-10 04:01:09

antd在线换肤定制功能的相关文章

DevExpress 全体窗口换肤的功能 winform

首先让所有窗体继续一个基类窗体 新建一个基类窗体,如SkinForm 去掉构造函数,加上一个皮肤对象 public partial class SkinForm: XtraForm { public static DevExpress.LookAndFeel.DefaultLookAndFeel defaultLookAndFeel = new DevExpress.LookAndFeel.DefaultLookAndFeel(); } 在需要换肤的窗体上继承SkinForm 得到所有皮肤名字可

Android主题换肤 无缝切换

2016年7月6日 更新:主题换肤库子项目地址:ThemeSkinning,让app集成换肤更加容易.欢迎star以及使用,提供改进意见. 更新日志: v1.3.0:增加一键切换切换字体(初版)v1.2.1:完善之前版本View的创建v1.2.0:增加对换肤属性自定义扩展v1.1.0:可以直接加载网络上的皮肤文件 今天再给大家带来一篇干货. Android的主题换肤 ,可插件化提供皮肤包,无需Activity的重启直接实现无缝切换,可高仿网易云音乐的主题换肤. 这个链接是本次的Demo打包出来的

200行代码打造超越一线互联网公司的换肤架构

本专栏专注分享大型Bat面试知识,后续会持续更新,喜欢的话麻烦点击一个关注 面试官: 网易云QQ的换肤是怎么做到的,你对换肤有了解吗?看过换肤的原理没? 心理分析:没有接触过换肤技术 第一次听到该名词肯定会很茫然.面试官考的是对资源加载,监听布局,有没有了解.本文从换肤实战一对一讲解.告诉你如何做以及实现.文章末尾带换肤项目源码 求职者: 从监听布局开始到 换肤原理,详细给面试官讲解换肤的原理 接下来我们一起分享这篇干货. Android的主题换肤 ,可插件化提供皮肤包,无需Activity的重

教程: Android应用如何实现换肤功能

本节课程的目的:学会换肤的方案及实现,掌握不同换肤方案的优缺点及适用场合. 希望各位同学做到:学习某一个技巧就掌握透彻,多练习.最好举一反三.触类旁通,掌握分析问题解决问题的思路和方法. 我讲解的是原理以及实现的关键技术点,细节.优化及与课程主题不相关的或初级的内容可能不会讲解.这是免费培训,精力有限,暂时只能做到让普通的变优秀,让优秀的变卓越.你要是已经卓越了来教教我吧.暂时不做入门培训. 国内有很多的软件都支持皮肤定制,这也是与国外软件重大不同之一,国外用户注重社交.邮件等功能,国内用户则重

Android实现换肤功能(二)

前两天写的上章关于换肤的功能获得了很好的反响,今天为大家介绍另一种方式.今天实现的策略也是网友建议的,然后我自己去写了个demo,大家自己评估下相比第一种方式的优势和劣势在哪里. 简单介绍下关于第一种关于换肤实现的方法一些不友好的地方,比如点击了换肤的功能键,需要先下载一个资源apk,然后再去引用其中的资源ID,于用户使用起来确实有有很多不便之处.今天为大家介绍的方法是克服了这一弊端的,可以实现直接在应用内切换,把资源文件存储在本地apk的,读取和操作也是更加便捷的,下面介绍下大致的一个实现逻辑

Android中插件开发篇之----应用换肤原理解析

一.前言 今天又到周末了,感觉时间过的很快呀.又要写blog了.那么今天就来看看应用的换肤原理解析.在之前的一篇博客中我说道了Android中的插件开发篇的基础:类加载器的相关知识.没看过的同学可以转战: http://blog.csdn.net/jiangwei0910410003/article/details/41384667 二.原理介绍 现在市场上有很多应用都有换肤的功能,就是能够提供给用户一些皮肤包,然后下载,替换.而且有些皮肤是要收费的.对于这个功能的话,其实没有什么技术难度的,但

【Android-View】浅谈Android换肤的几种实现方式

Android平台api没有特意为换肤提供一套简便的机制,这可能是外国的软件更注重功能和易用,不流行换肤.系统不提供直接支持,只能自行研究. 换肤,可以认为是动态替换资源(文字.颜色.字体大小.图片.布局文件……).这个使用编程语言来动态设置是可以做到的,例如使用View的 setBackgroundResource.setTextSize.setTextColor等函数.但我们不可能在每个activity里对页面里 的所有控件都通过调用这些函数来换肤,这样的程序代码难以维护.扩展,也违背了UI

Android 打造自己的个性化应用(一):应用程序换肤主流方式的分析与概述

Android平台api没有特意为换肤提供一套简便的机制,这可能是外国的软件更注重功能和易用,不流行换肤.系统不提供直接支持,只能自行研究. 换肤,可以认为是动态替换资源(文字.颜色.字体大小.图片.布局文件……).这个使用编程语言来动态设置是可以做到的,例如使用View的setBackgroundResource.setTextSize.setTextColor等函数.但我们不可能在每个activity里对页面里的所有控件都通过调用这些函数来换肤,这样的程序代码难以维护.扩展,也违背了UI和代

hybird之web动态换肤实现

前言 最近在重构个hybird(原生的壳包着Web页面)的UI框架,进行到了做换肤功能的阶段,所以这里是我思考的解决的方法. 预想 目前实现换肤的功能无非就两种做法. 1.写几个皮肤文件,然后切换使用这几个文件达到换肤的目的. 不得不说这是最常见的方式,效果也比较明显,但是它有几个缺点. 缺点: 1.如果更改一个皮肤的内容,那其他的皮肤文件也要做相应修改(这挺麻烦,不过可以用less管理css解决,所以也不是什么大问题). 2.它是固定的,在使用的时候皮肤文件已经是写好的了,而当我需要动态设置一