How to switch custom themes in react js-CodePudding

I want to change themes in React.js according to condition being true or false, but when I change inserted styles in app class it only changes innerElements not the entire body.

app.jsx

import "./styles.css";
import { dark, light } from "./comp/themes";

export default function App() {
  const isDarkMode = true;
  const DarkMode = isDarkMode ? dark : light
document.body.style.background={DarkMode};
  return (
    <div className="App">
      <h1>hi</h1>
    </div>
  );
}

./comp/themes.jsx

export const dark = { backgroundColor: "rgb(38, 38, 38)", color: "white" };

export const light = { backgroundColor: "white", color: "black" };

help me to achieve to change the themes. Thanks in advance

CodePudding user response：

I think you are trying to assign the object's background property and not a string. document.body.style.background={DarkMode.backgroundColor}

CodePudding user response：

figured it out

app.js

import "./styles.css";
import { dark, light } from "./comp/themes";
import Toggler from "./comp/Switch";

export default function App() {
  const isDarkMode = false;
  const DarkMode = isDarkMode ? dark : light
  document.body.style.backgroundColor=DarkMode.backgroundColor;
  document.body.style.color=DarkMode.color;

  

  return (
    <div className="App">
      <h1>hi</h1>
    </div>
  );
}