<script src="//msrt-integration-api.fittingbox.com/index.js" type="text/javascript"></script>

<button id="toggle-btn" onclick="toggleDarkMode()">Set Light mode</button>

<div class='wrapper'>
  <div id="msrt-container"></div>
</div>

#msrt-container {
  width: 400px;
  height: 690px;
}

.wrapper{
  padding-top: 5rem;
  display: grid;
  place-content : center;
}

.darkBackground {
  background-color: black;
}

.lightBackground {
  background-color: white;
}

document.body.className = "darkBackground";

let darkMode = false;

function toggleDarkMode() {
  darkMode = !darkMode;
  
  Msrt.createWidget("msrt-container", {
    apiKey: "J31RjpMySewnZu8LNyjzQgjUochRFiZIqTsGMJsL",
    darkMode: darkMode // default to false
  });
  
  document.getElementById('toggle-btn').innerHTML = darkMode ? "Set Light mode" : "Set Dark mode";
  
  document.body.className = darkMode ? "darkBackground" : "lightBackground";
  
}

toggleDarkMode();