Antd Design Dark Mode toggle using Vite
Antd design is one of the most popular UI components library used by React community due to its completeness and simplicity. However, Antd design by default not supported first class dynamic theming and developer have to cater these themselves. But… how? it is difficult?
From my perspective, it is quite hard to archived as it require many manual handling. I had created a simple demo to showcase how to toggle between light mode and dark mode by using Vite and React. If you are using Vite and Antd design, here is the place you definitely won’t want to miss out!
Why Vite?
ViteJS is a new frontend tools that is faster than webpack in term of performance. It offers Hot Module Replacement (HMR) that doesn’t require any bundling which makes it super fast when re-rendering when the project goes big. So I decide to give it a try and let’s see how it works!
Let’s get started!
First, we create a React app by using Vite.
yarn create vite- Enter your project name
- Choose React as your framework
Then, we setup our file structure.
themes — place to store globally used light & dark mode LESS
theme-provider — Context provider for theme toggling
use-theme — Hooks to get and set TRUE/FALSE for either light/dark mode
Light
Dark
We create both light & dark mode JSX file. Each corresponding LESS file is meant to store global less variable. For example, if we want our Button to have #d8d8d8 in light and #e9e9e9 in dark, we can set these value in LESS and antd design will automatically matched with us.
Then, we created a useTheme hooks for set and get the darkMode value. We store user’s preference into localStorage and give it a default value of false. Whenever user set new value for theme, we refresh the page so that all the Antd’s CSS would be re-render.
We also create a theme-provider to wrap the whole UI children so that all component inside ThemeProvider will affected by the dark mode toggling. Since I was using React18, Suspense can be used to cater for async loading when reloading the page. Also, both DarkTheme and LightTheme is lazily loaded as components by using lazy() .
Implementation to UI
After setting up all the necessary files, we are good to go!
We can now use useTheme() hooks to get and set our dark mode value!
Conclusion
I am working on this theme toggling because it was troublesome when handling dark mode components by passing darkTheme value and modifying each components by their CSS value. Since we are using Antd design, I was thinking maybe we can write a global wrapper so that at least each Antd components have its default dark mode toggling. Hope this helps someone working on Antd design! Cheers!
