How to Dynamically Switch Between Themes in Ant Design v4

Title: How to Switch Between Themes in Ant Design v4 Dynamically

In this tutorial, we will explore how to dynamically switch between dark and light themes in Ant Design version 4. Whether you want to implement a dynamic theme switcher in your React app or understand how to make Ant Design’s theme customization options work, we’ve got you covered.

Why Switch Themes Dynamically?

Dynamically switching themes allows users to personalize their browsing experience and make it more visually appealing. With Ant Design’s flexible customization options, you can provide a seamless way for users to switch between a dark and light theme based on their preferences. Let’s dive into the implementation details.

Step 1: Setting Up the Theme Files

To begin, create a folder named “themes” within your project’s directory. Inside the “themes” folder, create six files:

1. dark-theme.css

@import "~antd/dist/antd.dark.css";

2. dark-theme.jsx

import "./dark-theme.css";

const DarkTheme = () => <></>;

export default DarkTheme;

3. light-theme.css

@import "~antd/dist/antd.css";

4. light-theme.jsx

import "./light-theme.css";

const LightTheme = () => <></>;

export default LightTheme;

5. use-theme.js

import { useEffect, useState } from "react";

const DARK_MODE = "dark-mode";

const getDarkMode = () => JSON.parse(localStorage.getItem(DARK_MODE)) || false;

export const useTheme = () => {
  const [darkMode, setDarkMode] = useState(getDarkMode);

  useEffect(() => {
    const initialValue = getDarkMode();
    if (initialValue !== darkMode) {
      localStorage.setItem(DARK_MODE, darkMode);
      window.location.reload();
    }
  }, [darkMode]);

  return [darkMode, setDarkMode];
};

6. theme-provider.jsx

import { lazy, Suspense } from "react";
import { useTheme } from "./use-theme";

const DarkTheme = lazy(() => import("./dark-theme"));
const LightTheme = lazy(() => import("./light-theme"));

export const ThemeProvider = ({ children }) => {
  const [darkMode] = useTheme();

  return (
    <>
      <Suspense fallback=<span />>
        {darkMode ? <DarkTheme /> : <LightTheme />}
      </Suspense>
      {children}
    </>
  );
};

These files are essential for theme management and dynamic switching within Ant Design.

Step 2: Integrating the Theme Switcher

In your main layout component, you can implement the theme switcher using the useTheme hook and the imported theme files:

import React from "react";
import { useTheme } from "./themes/use-theme";

const Layout = () => {
  const [darkMode, setDarkMode] = useTheme();

  return (
    <div className={`layout ${darkMode ? "dark" : "light"}`}>
      <h1>Your App</h1>
      <button onClick={() => setDarkMode(!darkMode)}>
        Switch Theme
      </button>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  );
};

export default Layout;

In the code snippet above, we use the useTheme hook to access the current theme mode and the setDarkMode function to toggle the theme. The darkMode boolean variable determines which theme is applied to the layout.

Step 3: Enjoy the Dynamic Theme Switching

With the setup complete, you can now enjoy the dynamic theme switching in your Ant Design v4 application. Customize the theme files, adjust the styling according to your needs, and provide your users with an enhanced user experience.

Conclusion

In this tutorial, we explored how to dynamically switch between dark and light themes in Ant Design v4. By setting up theme files, integrating the theme switcher, and leveraging the useTheme hook, you can seamlessly implement a dynamic theme switching feature in your React application. Embrace the power of Ant Design’s customization options and enhance your user experience by allowing users to personalize their app’s look and feel.

Start implementing dynamic theme switching today and provide your users with an immersive and visually appealing experience!

reference : 

reactjs