Question

0

90

Views

How to switch custom themes in react js

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

3 months ago ·

Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-04T15:15:49.352Z

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

Answer 2 · 2022-07-04T15:15:49.360Z

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>
  );
}