title: How to switch custom themes in react js
body: <p>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.</p>
  <p><code>app.jsx</code></p>
  <pre class="lang-js prettyprint-override"><code>import &quot;./styles.css&quot;;
  import { dark, light } from &quot;./comp/themes&quot;;
  
  export default function App() {
    const isDarkMode = true;
    const DarkMode = isDarkMode ? dark : light
  document.body.style.background={DarkMode};
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;hi&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><code>./comp/themes.jsx</code></p>
  <pre class="lang-js prettyprint-override"><code>export const dark = { backgroundColor: &quot;rgb(38, 38, 38)&quot;, color: &quot;white&quot; };
  
  export const light = { backgroundColor: &quot;white&quot;, color: &quot;black&quot; };
  </code></pre>
  <p>help me to achieve to change the themes. Thanks in advance</p>