Can not switch between multiple themes

Hi!

The links you provided are according to MDB4 packages. In the specification of the issue I see you are using an MDB5 React one, so I will write a solution for that (they are different).

The problem is that the mdb-theme sass function overwrites all of MDB styles, so that's why you have the last included one. However - you can assign includes to some classes (exactly as it is mentioned in the solution to the Angular you provided) and load them more dynamically even if you rendered it once. So the guide for this case looks like this:

Setup your project as it is written here: https://mdbootstrap.com/docs/b5/react/content-styles/theme/ (or download our package and setup sass in this way)

In the index.scss file put this code:

@import "./mdb.pro.scss";

$my-theme-primary-light: #741357;
$my-theme-secondary-light: #03cc01;

$my-theme: mdb-light-theme($my-theme-primary-light, $my-theme-secondary-light);

$my-theme-primary-dark: #616161;
$my-theme-secondary-dark: #03cc01;

$dark-theme: mdb-dark-theme($my-theme-primary-dark, $my-theme-secondary-dark);

// include theme styles
.dark-skin {
  @include mdb-theme($dark-theme);
}

.light-skin {
  @include mdb-theme($my-theme);
}

Then use dark-skin and light-skin classes in your App using state control or something similar, in example:

import React, { useState } from "react";
import { MDBBtn, MDBContainer } from "mdb-react-ui-kit";

function App() {
  const [currentTheme, setCurrentTheme] = useState("light-skin");

  return (
    <MDBContainer fluid className={currentTheme}>
      <div
        className="d-flex justify-content-center align-items-center"
        style={{ height: "50vh" }}
      >
        <div className="text-center">
          <img
            className="mb-4"
            src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
            style={{ width: 250, height: 90 }}
          />
          <h5 className="mb-3">
            Thank you for using our product. We're glad you're with us.
          </h5>
          <p className="mb-3">MDB Team</p>
          <MDBBtn
            tag="a"
            href="https://mdbootstrap.com/docs/standard/getting-started/"
            target="_blank"
            role="button"
          >
            Start MDB tutorial
          </MDBBtn>
        </div>
      </div>
      <div
        className="d-flex justify-content-center align-items-center"
        style={{ height: "1vh" }}
      >
        <div className="text-center">
          <MDBBtn color="light" onClick={() => setCurrentTheme("light-skin")}>
            Light theme
          </MDBBtn>
          <MDBBtn color="dark" onClick={() => setCurrentTheme("dark-skin")}>
            Dark theme
          </MDBBtn>
        </div>
      </div>
    </MDBContainer>
  );
}

export default App;

Keep coding!