高性能方案实现antdesign在运行时动态改变主题色利用webpackthemecolorreplacer

今天利用webpack-theme-color-replacer插件,为ant-design实现了在运行时动态切换主题色的功能,无需在页面进行less的编译,提升了切换速度。有需要的同学可以参考下。 源码:https://github.com/hzsrc/ant-... 效果预览:https://deploy-preview-4289--...在右侧中央的配置按钮点开可以切换主题色。 实现方案:方案是统一的,见之前的文章:https://segmentfault.com/a/11... 基本步骤:基于 ant-design-pro 这个项目上进行修改: 1、webpack加入插件配置:查看修改:https://github.com/hzsrc/ant-... 2、运行时动态切换主题色,查看修改:https://github.com/hzsrc/ant-... (因笔者时间有限,color.less文件中的colorPalette变换函数所涉及的颜色值没有纳入) 实现效果:初始主题色: 切换后主题色:

May 25, 2019 · 1 min · jiezi

高性能方案实现antdesignvue在运行时动态改变主题色利用webpackthemecolorreplacer

今天利用webpack-theme-color-replacer插件,为ant-design-vue实现了在运行时动态切换主题色的功能,无需在页面进行less的编译,提升了切换速度。有需要的同学可以参考下。 源码:https://github.com/hzsrc/ant-... 效果预览:http://test.hz300.com/ant-des...在右侧中央的配置按钮点开可以切换主题色。 实现方案:方案是统一的,见之前的文章:https://segmentfault.com/a/11... 基本步骤:基于 ant-design-pro-vue 这个项目上进行修改: 1、webpack加入插件配置:查看修改:https://github.com/hzsrc/ant-... 2、运行时动态切换主题色,查看修改:https://github.com/hzsrc/ant-...新增文件:https://github.com/hzsrc/ant-... 实现效果:初始主题色: 切换后主题色:

May 25, 2019 · 1 min · jiezi

最漂亮的编程主题

题目写的有点大,但确实是我近期最喜欢的主题和字体(没有之一),来自一位前端妹子的推荐。因为它太好看了,所以一定要大用特用,不但要用在VSCode上,并且还要用在vi上,所有一切能用的地方。颜色主题——One Dark颜色主题的名称基干是One Dark,应该最早是从Atom发展出来的,所以叫Atom One Dark,后来产生了变种如One Dark Pro,One Dark Pro Vivid等等,我在VSCode里选择的是One Dark Pro。在VSCode里安装安装方法很简单,直接在插件标签里输入one dark搜索就可以安装了。安装好之后怎么启用呢?在左上角菜单的首选项里找到颜色主题,就可以启用了。在vi里安装这么漂亮的主题,不用来装在vi里就可惜了。我们得做三件事:第一,在目录下建一个子目录.vim,然后在.vim目录下再建一个子目录colors,然后在colors目录下建一个文件onedark.vim,把这个文件的内容拷进去。第二,在.vim目录下再建一个子目录autoload,然后在autoload下建一个文件onedark.vim,然后把这个文件的内容拷进去。第三,在目录下建一个文件.vimrc,把下面的内容拷进去:if (empty($TMUX)) if (has(“nvim”)) let $NVIM_TUI_ENABLE_TRUE_COLOR=1 endif if (has(“termguicolors”)) set termguicolors endifendifsyntax oncolorscheme onedarkfiletype indent onset smartindentset expandtabset shiftwidth=4set pastePS. 如果你的vi不等于vim,你还需要在~/.config/fish/config.fish里写上alias vi=vim,这样你的vi就等于vim了。Fira Code字体是不是已经足够漂亮了呢?也不尽然,当当当当,我们的大杀器出场!Fira Code,这可是在github上高达27,000多颗星的字体啊,字体星数仅次于著名的Font Awesome,我简直爱死他的这个&符号了。不同于颜色主题需要在两端安装,这个Fira Code字体只需要在Mac上安装就好了,因为Terminal只能使用客户端字体,所以不需要在服务器安装,只要把字体安装好之后,在iTerm里设置一下字体就好了。安装还是用我们最爱的brew来安装:brew tap caskroom/fontsbrew cask install font-fira-code在VSCode中设置字体在settings.json中添加以下两行:“editor.fontFamily”: “‘Fira Code’”,“editor.fontLigatures”: true,结合上面安装的颜色主题,现在的VSCode是不是看起来好漂亮了呢?还带连字符的,还有那个箭头函数,是不是好吓人?在iTerm中设置字体由于vi是在iTerm中运行的,所以我们只能通过为iTerm设置字体来间接影响到vi:现在,再通过ssh打开我们的vi编辑器,是不是也看到了漂亮的字体?虽然看上去远没有VSCode那么炫酷,但也足以在服务端爽心悦目了。祝你每天编程好心情!

September 24, 2018 · 1 min · jiezi