Can not switch between multiple themes


Topic: Can not switch between multiple themes

femski asked 3 years ago

Expected behavior

Create Two themes - light and dark and switch between them at run time.MDB applies the correct theme.

Actual behavior

MDB applies theme created last

Resources (screenshots, code snippets etc.)

$my-theme-primary-light: #134074; // theme primary color, change this value to customize theme $my-theme-secondary-light: #03CC01; // theme secondary color, change this value to customize theme

$my-theme-primary-dark: #616161; // Grey[700] $my-theme-secondary-dark: #03CC01;

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

// include theme styles @include mdb-theme($light-theme);

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

@include mdb-theme($dark-theme);

// include theme styles // this seems to override the first one@include mdb-theme($dark-theme);

// Does not work

if (isDarkTheme) { document.body.classList.remove('light-theme') document.body.classList.add('dark-theme') } else { document.body.classList.remove('dark-theme') document.body.classList.add('light-theme') }

Its apparently not as easy as it sounds, based on here (Angular): https://stackoverflow.com/questions/62455188/how-to-use-multiple-theme-in-bootstrap-with-sass

but has been done before in Vue at least for templates: https://mdbootstrap.com/support/vue/switch-between-light-and-dark-theme-for-mdb-vue-template/

What about React ? can we have multiple skins and switch between them at run time and how ?


Krzysztof Wilk staff answered 3 years ago

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!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 1.4.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: Yes