Switch between light and dark themes in antd using React at runtime

Question

Switch between light and dark themes in antd using React at runtime

Despite finding a similar question on Stack Overflow, the provided answer did not solve my issue. I have attempted to follow the steps mentioned, but unfortunately, there has been no noticeable effect. I am struggling with where to place the config-overrides.js file as indicated in the answer, and it appears that there are still many modules yet to be installed.

In addition, I have also tried following the instructions on the Ant Design website to set up a dark theme for the web application. While I managed to successfully change to a dark theme after starting the application, I am unsure how to select the specific theme (dark or light) that I want at runtime.

Project Structure:

package.json: (changes made on scripts portion)

{
  "name": "testout",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/dark-theme": "^2.0.2",
    "@craco/craco": "^5.6.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "antd": "^4.6.4",
    "antd-theme": "^0.3.4",
    "craco-less": "^1.17.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

App.js

import React from 'react';
import './App.less';
import 'antd/dist/antd.less';
import { Button, Select } from 'antd';
function App() {
  const { Option } = Select;

  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  return (
    <div className="App">
      <Button type="primary">Button</Button>
      <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="disabled" disabled>
          Disabled
      </Option>
        <Option value="Yiminghe">yiminghe</Option>
      </Select>

    </div>
  );
}

export default App;

craco.config.js

const CracoLessPlugin = require('craco-less');
const { getThemeVariables } = require('antd/dist/theme');


module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars:  getThemeVariables({
                         dark: true, 
                         compact: true,
            }),
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

Output:

reactjs antd

Answer 1

Answer №1

After finding the solution through this informative article, I was able to successfully implement a theme switcher for toggling between light and dark themes in my project. The article not only provided detailed instructions on the theme switcher but also demonstrated how to customize the color of antd components.

I have created a demo repository on GitHub showcasing a simplified version that allows switching between black and light themes for illustration purposes.

An antd Select component has been added at the top of the webpage to enable users to select either 'dark' or 'light' theme. Here are snapshots showing the theme switch at runtime:

https://i.stack.imgur.com/LIQOo.png?s=256 https://i.stack.imgur.com/1H8FV.png?s=256

Below are the steps to implement the theme switcher:

Start by installing the necessary packages.

npm i react-app-rewire-antd-theme antd-theme antd

Download the ~public/color.less file from the GitHub repository and place it in your ~public folder.

Copy the code snippets provided into your ~/public/index.html file, usually at the bottom of the <body> tag or after the body content such as <div id="root"></div> for a default React index.html file.

<link rel="stylesheet/less" type="text/css" href="color.less" />
<script>
      window.less = {
         async: true,
         env: 'production'
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

Move the ~src/components/dark.json and ~src/components/light.json files to your desired folder location (available in the ~src/components/ directory on GitHub).

Utilize the provided code snippet in ~src/components/ThemeSelector to toggle between the dark and light themes. Feel free to customize the code according to your requirements for theme switching.

  //sample code
  let vars = value === 'light' ? lightVars : darkVars;
  vars = { ...vars, '@white': '#fff', '@black': '#000' };
  window.less.modifyVars(vars).catch(error => {});
  setTheme(value)

Answer 2

After finding the solution through this informative article, I was able to successfully implement a theme switcher for toggling between light and dark themes in my project. The article not only provided detailed instructions on the theme switcher but also demonstrated how to customize the color of antd components.

I have created a demo repository on GitHub showcasing a simplified version that allows switching between black and light themes for illustration purposes.

An antd Select component has been added at the top of the webpage to enable users to select either 'dark' or 'light' theme. Here are snapshots showing the theme switch at runtime:

https://i.stack.imgur.com/LIQOo.png?s=256 https://i.stack.imgur.com/1H8FV.png?s=256

Below are the steps to implement the theme switcher:

Start by installing the necessary packages.

npm i react-app-rewire-antd-theme antd-theme antd

Download the ~public/color.less file from the GitHub repository and place it in your ~public folder.

Copy the code snippets provided into your ~/public/index.html file, usually at the bottom of the <body> tag or after the body content such as <div id="root"></div> for a default React index.html file.

<link rel="stylesheet/less" type="text/css" href="color.less" />
<script>
      window.less = {
         async: true,
         env: 'production'
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

Move the ~src/components/dark.json and ~src/components/light.json files to your desired folder location (available in the ~src/components/ directory on GitHub).

Utilize the provided code snippet in ~src/components/ThemeSelector to toggle between the dark and light themes. Feel free to customize the code according to your requirements for theme switching.

  //sample code
  let vars = value === 'light' ? lightVars : darkVars;
  vars = { ...vars, '@white': '#fff', '@black': '#000' };
  window.less.modifyVars(vars).catch(error => {});
  setTheme(value)

Answer 3

Answer №2

Efficient Solution Utilizing React.Lazy

View the Code:

Check out the Stackblitz code reference and demo: https://stackblitz.com/edit/react-6ub59h?file=index.js

This approach does not dynamically alter the theme,
It maintains user preferences using localStorage. (other methods can be implemented instead of localStorage)
The application reloads whenever the user changes the theme

Screenshot of Dark Mode
Screenshot of Light Mode

index.js

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { Button, Space } from 'antd';
import "antd/dist/antd.css";
import "./index.css";
import App from "./app";

export const themeConst = {
  DARK: "Dark 🌙",
  LIGHT: "Light ☀️"
};

const LightThemeComponent = React.lazy(() => import("./light"));
const DarkThemeComponent = React.lazy(() => import("./dark"));

const curTheme =
  localStorage.theme == themeConst.DARK ? themeConst.DARK : themeConst.LIGHT;

const toggleTheme = function (isDarkMode) {
  if (curTheme == themeConst.DARK) {
    localStorage.setItem("theme", themeConst.LIGHT);
  } else {
    localStorage.setItem("theme", themeConst.DARK);
  }
  window.location.reload();
};

ReactDOM.render(
  <Space direction="vertical">
    <Button onClick={toggleTheme}>Switch to {(curTheme == themeConst.LIGHT) ? themeConst.DARK : themeConst.LIGHT} Mode</Button>
    {curTheme == themeConst.DARK && (
      <Suspense fallback={<div>Loading...</div>}>
        <DarkThemeComponent>
          <App />
        </DarkThemeComponent>
      </Suspense>
    )}
    {curTheme == themeConst.LIGHT && (
      <Suspense fallback={<div>Loading...</div>}>
        <LightThemeComponent>
          <App />
        </LightThemeComponent>
      </Suspense>
    )}
  </Space>,
  document.getElementById("container")
);

dark.js

import React, { Suspense } from "react";
import "antd/dist/antd.dark.css";

const DarkApp = (props) => {
  return <>{props.children}</>;
};

export default DarkApp;

Answer 4

Efficient Solution Utilizing React.Lazy

View the Code:

Check out the Stackblitz code reference and demo: https://stackblitz.com/edit/react-6ub59h?file=index.js

This approach does not dynamically alter the theme,
It maintains user preferences using localStorage. (other methods can be implemented instead of localStorage)
The application reloads whenever the user changes the theme

Screenshot of Dark Mode
Screenshot of Light Mode

index.js

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { Button, Space } from 'antd';
import "antd/dist/antd.css";
import "./index.css";
import App from "./app";

export const themeConst = {
  DARK: "Dark 🌙",
  LIGHT: "Light ☀️"
};

const LightThemeComponent = React.lazy(() => import("./light"));
const DarkThemeComponent = React.lazy(() => import("./dark"));

const curTheme =
  localStorage.theme == themeConst.DARK ? themeConst.DARK : themeConst.LIGHT;

const toggleTheme = function (isDarkMode) {
  if (curTheme == themeConst.DARK) {
    localStorage.setItem("theme", themeConst.LIGHT);
  } else {
    localStorage.setItem("theme", themeConst.DARK);
  }
  window.location.reload();
};

ReactDOM.render(
  <Space direction="vertical">
    <Button onClick={toggleTheme}>Switch to {(curTheme == themeConst.LIGHT) ? themeConst.DARK : themeConst.LIGHT} Mode</Button>
    {curTheme == themeConst.DARK && (
      <Suspense fallback={<div>Loading...</div>}>
        <DarkThemeComponent>
          <App />
        </DarkThemeComponent>
      </Suspense>
    )}
    {curTheme == themeConst.LIGHT && (
      <Suspense fallback={<div>Loading...</div>}>
        <LightThemeComponent>
          <App />
        </LightThemeComponent>
      </Suspense>
    )}
  </Space>,
  document.getElementById("container")
);

dark.js

import React, { Suspense } from "react";
import "antd/dist/antd.dark.css";

const DarkApp = (props) => {
  return <>{props.children}</>;
};

export default DarkApp;

Switch between light and dark themes in antd using React at runtime

Answer №1

Answer №2

Efficient Solution Utilizing React.Lazy

View the Code:

Similar questions

When React object state remains unchanged, the page does not update automatically

Finding the file path to a module in a NextJS application has proven to be a challenge when utilizing the module

Accessing loop variables in Render and passing them into componentDidMount() in ReactJS to include as a query parameter in an API call

The CSS_MODULES encountered a module build error when utilizing the extract-text-webpack-plugin

Exploring Array Iteration: Navigating through Arrays with the .map Method in React and Vue

I encountered an error when attempting to use Router from next/router

"ReactJS and Express: Building versatile applications for the public and administrative use

Error: There was an issue registering the component as the target container is not recognized as a valid DOM element

My element is unexpectedly changing its properties

Retrieve information from SWR mutate following a successful login

There was a problem with the WebSocket handshake: the response header value for 'Sec-WebSocket-Protocol' did not match any of the values sent

Issue with color attribute not being recognized within Typography component's sx prop

Moving the Google Maps zoom button to the top of the screen

The correct way to type a generic React function component using TypeScript

Why does the data in useState only update after clicking the button for the second time?

Leveraging NextJS for Advanced Server-Side Rendering with Seamless Integration of React Query in the Front

Put emphasis on the input field - React component

"Uh-oh! Encountered a new unexpected runtime error. Can't seem

JSX: dynamically include element based on condition

To interact with Cognito in a React application, it is essential to provide the necessary Username and Pool