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
I think you are trying to assign the object's background property and not a string.
document.body.style.background={DarkMode.backgroundColor}
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>
);
}