Changing theme dynamically

[veeral-patel]

If I wanted to toggle my React app's theme by pressing a button in the app, without restarting my web server, would that be possible?

[peisenmann]

This is definitely a common concern for modern use cases. Users are more and more frequently coming to expect websites and apps to have a dark mode option that they can simply turn on or off.

[veeral-patel]

Any thoughts on how we could achieve this in Ant @peisenmann?

As a workaround, you could create two different versions of your app (with different CSS), and deploy them at:

your-app.com (redirects to light.your-app.com)
light.your-app.com
dark.your-app.com

[peisenmann]

@veeral-patel I haven't looked into it at all myself, so I don't know how it could possible work from the Ant side. A simple class at the highest level, like <div className="appRoot ant-dark">...</div> where everything inside the ant-dark region gets the dark theme could be adequate.

This would allow any number of themes to exist and be swappable at runtime in the browser with a simple class name change. I have no idea if that's feasible, but in lieu of a better solution, that could be adequate.

EDIT: I changed the wording of the suggestion above while keeping the concept.

[superadminfabian]

In case anyone is looking for a guide, I followed the below and have dynamic switching themes. Also gave the user control of individual colors (like primary).

https://medium.com/@mzohaib.qc/ant-design-live-theme-588233ea2bbc

You have to use LESS and add less.min.js to your index file. I also changed from the default react-scripts to rescripts. I had only ever used SCSS with create-react-app prior to this.

Medium difficulty, but worth it!

[veeral-patel]

Check this out: @superadminfabian @peisenmann

https://github.com/gzgogo/antd-theme
https://github.com/gzgogo/antd-theme

[Yumcoder-dev]

https://github.com/YumcoderCom/antd-them-switch-cra

[MarkLyck]

How is this not in v4?

Please 🙏 ant design team, add a way to dynamically switch themes without the use of less variables.

[JoseRFelix]

Check out my article on how to dynamically switch between themes! Also, if you'd like to jump in right away to a package that can help you, you can check out react-css-theme-switcher.

[therakeshm]

Check out my article on how to dynamically switch between themes! Also, if you'd like to jump in right away to a package that can help you, you can check out react-css-theme-switcher.

This is GEM! ✨ But one query tho, why do I have to run npx gulp less everytime I want to see the changes

can we hot reload it while the virtual dom changes?

[JoseRFelix]

Check out my article on how to dynamically switch between themes! Also, if you'd like to jump in right away to a package that can help you, you can check out react-css-theme-switcher.

This is GEM! ✨ But one query tho, why do I have to run npx gulp less everytime I want to see the changes

can we hot reload it while the virtual dom changes?

You could with Webpack! You'd have to create your own plugin though. However, I would discourage you from doing it since it will slow down your development build by a lot. If you don't want to use Gulp, you could create a custom script using vanilla Javascript and add a hook in your package.json that will execute it before starting the dev server or building for production.

The reason that I used Gulp is because of how well it handles file streams operations.

On the other hand, if you meant to change the theme on runtime in the browser, you could do it by following this article. I stopped using this solution because it was CPU demanding which is really bad for the user. Thankfully, I had predefined themes (light and dark) so I found a way to calculate the styles on build time instead of runtime, and just change between these generated styles.

[bobbui]

this is another good option to implement theme switcher https://github.com/mzohaibqc/antd-theme-webpack-plugin

[imCorfitz]

Check out my article on how to dynamically switch between themes! Also, if you'd like to jump in right away to a package that can help you, you can check out react-css-theme-switcher.

@JoseRFelix I found your article. Brilliant stuff. One thing missing was the ability to keep the selected dark mode. If I refreshed the browser, it would default to light again. I then found the https://github.com/donavon/use-dark-mode package, which keeps the selected theme in localstorage and it also supports the ability to detect if a Mac system is using dark mode, and chose that automatically. So I made a few changes to the gulpfile. See the Gist here: https://gist.github.com/imCorfitz/5a3724308a0b258a27f407ab659f91fd

This way, I have the theme css files, and then I can use the useDarkMode() hook to toggle the global dark mode on or off.

[Nxtra]

Check out my article on how to dynamically switch between themes! Also, if you'd like to jump in right away to a package that can help you, you can check out react-css-theme-switcher.

@JoseRFelix I found your article. Brilliant stuff. One thing missing was the ability to keep the selected dark mode. If I refreshed the browser, it would default to light again. I then found the https://github.com/donavon/use-dark-mode package, which keeps the selected theme in localstorage and it also supports the ability to detect if a Mac system is using dark mode, and chose that automatically. So I made a few changes to the gulpfile. See the Gist here: https://gist.github.com/imCorfitz/5a3724308a0b258a27f407ab659f91fd

This way, I have the theme css files, and then I can use the useDarkMode() hook to toggle the global dark mode on or off.

Ow man, that sound awesome.
However I can't get it done. I am unfamiliar with the whole gulp setup, let alone all the extra config it allows you to do.
Do you by any chance have a sandbox or repo we can check out?