How to switch between themes in Ant design v4 dynamically?

Question

I'd like to implement switching between dark/light theme dynamically with Ant design v4.

It's possible to customize theme with other CSS/LESS import as it's written here: https://ant.design/docs/react/customize-theme#Use-dark-theme

But I'm not sure how to switch between those themes dynamically from the code. I have a variable in my React app (darkMode) which indicates if the dark theme is currently used. I have to provide correct CSS files when this variable is changed. But I can't import CSS dynamically only when some condition is fulfilled, because it's not way how the imports works.

I tried to do something messy with require like in following code, but it's very very bad approach and it's still not working properly (because CSS is injected but probably not withdrawn. ):

const Layout = () => {
  ...
  useEffect(() => {
    if (darkMode === true) {
      require("./App.dark.css")
    } else {
      require("./App.css")
    }
  }, [darkMode])

  return (
    <Home />
  )
}

It should be possible to switch themes somehow because it's already implemented in Ant design docs (https://ant.design/components/button/):

Do you have any idea how to do it?

Thanks!

Answer 1

you must create 2 components

the first one :

import './App.dark.css'

const DarkApp =() =>{
   //the app container
}

and the second :

import './App.light.css'

const LightApp =() =>{
   //the app container
}

and create HOC to handle darkMode like this :

const AppLayout = () =>{
const [isDark , setIsDark] = useState(false);


return (
 <>
  {
  isDark ? 
    <DarkApp /> :
      <LightApp />
  }
 </>
 )
}

Answer 2

Conditional require won't block using previously required module. So, whenever your condition matches the require will available in your app. So, your both required module will be used. Instead of requiring them, insert stylesheet and remove to toggle between them:

const head = document.head
const dark = document.createElement('link')
const light = document.createElement('link')
dark.rel = 'stylesheet'
light.rel = 'stylesheet'
dark.href = 'antd.dark.css'
light.href = 'antd.light.css'

useEffect(() => {
  const timer = setTimeout(() => {
    if (darkMode) {
      if (head.contains(light)) {
        head.removeChild(light)
      }
      head.appendChild(dark)
    } else {
      if (head.contains(dark)) {
        head.removeChild(dark)
      }
      head.appendChild(light)
    }
  }, 500)
 return () => clearTimeout(timer)
}, [darkMode])

Answer 3

In Ant's example one suggestion is to import your "dark mode" CSS or LESS file into your main style sheet.

// inside App.css
@import '~antd/dist/antd.dark.css';

Instead of trying to toggle stylesheets, the "dark" styles are combined with base styles in one stylesheet. There are different ways to accomplish this, but the common pattern will be:

1. have a dark-mode selector of some sort in your CSS
2. put that selector in your HTML
3. have a way to toggle it on or off.

Here is a working example:

https://codesandbox.io/s/compassionate-elbakyan-f7tun?file=/src/App.js

In this example, toggling the state of darkMode will add or remove a dark-mode className to the top level container.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div className={`App ${darkMode && "dark-mode"}`}>
      <label>
        <input
          type="checkbox"
          checked={darkMode}
          onChange={() => setDarkMode((darkMode) => !darkMode)}
        />
        Dark Mode?
      </label>
      <h1>Hello CodeSandbox</h1>
    </div>
  );
}

If darkMode is true, and the dark-mode className is present, those styles will be used:

h1 {
  padding: 0.5rem;
  border: 3px dotted red;
}

.dark-mode {
  background: black;
  color: white;
}

.dark-mode h1 {
  border-color: aqua;
}

Answer 4

1. Using less compiler in runtime:
   https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0

2. Import less code into wrapper
   https://github.com/less/less.js/issues/3232

.any-scope {
    @import url('~antd/dist/antd.dark.less');
}