How to switch between dark and light mode? about antd-theme-webpack-plugin HOT 13 CLOSED

@rszemplinski @vreddy448 Let me check how you can achieve this.

from antd-theme-webpack-plugin.

@rszemplinski @vreddy448 I'm in process of creating a sample project using this plugin. In the meanwhile, you can have a look at how I implemented this using base script for this plugin i.e. [email protected]

Here is demo project
https://github.com/mzohaibqc/antd-theme-generator/tree/master/examples/customize-cra

I've updated the plugin and you can use updated version which is [email protected] as of now.

I'll add sample code soon

from antd-theme-webpack-plugin.

@rszemplinski It is ready, I'll post soon

from antd-theme-webpack-plugin.

@rszemplinski @vreddy448 Here is a demo
https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html

And here is code for this demo
https://github.com/mzohaibqc/antd-theme-webpack-plugin/tree/master/examples/customize-cra

Note: you don't necessarily need customize-cra package to achieve this. Anything to inject this plugin in webpack configurations.

from antd-theme-webpack-plugin.

Awesome, this should be easy enough to implement based off what I've seen. Thanks again for doing this!

from antd-theme-webpack-plugin.

i am searching for the same. not able to achieve. Can someone please suggest a way to proceed on this theme switch

from antd-theme-webpack-plugin.

@mzohaibqc extremely appreciate that!

from antd-theme-webpack-plugin.

Not to pester, but will you be posting that sample code sometime soon? @mzohaibqc

from antd-theme-webpack-plugin.

Let me know if you still have issues implementing this

from antd-theme-webpack-plugin.

@mzohaibqc thank you so much for doing all of this. I won't be able to work on this right away but will let you know if something comes up when I do begin to work on it.

One quick question though, with that new customize-cra project, what generates the color.less file since your package.json start command doesn't run that color.js file anymore. Is it something you just run once and then you are done with it?

from antd-theme-webpack-plugin.

Ok, one thing to understand, one you are using antd-theme-generator package which is core script for this antd-theme-webpack-plugin, then you need to create a color.js or whatever you want to name it which when executed will produce color.less which you need to put in public or some directory and access it in index.html file. But when you use this webpack plugin, it does everything for you, you don't need to put color.less in index.html, you don't need to run color.js like node color.js. You just need to add this plugin in your webpack configurations.

from antd-theme-webpack-plugin.

So based off what you just said, in the customize-cra project that you used as an example, should you even have the color.js file and index.html file with the color.less header in there?

from antd-theme-webpack-plugin.

I first implemented this using base script and then copied the same project and added required changes. You can remove color.js and lessjs import in index.html file

from antd-theme-webpack-plugin.