title: ThemeProvider: "theme" prop is required. → React.js
body: <h3> Issue</h3>
  <p>I created a Custom Hook to switch themes, but I'm facing this problem and I don't exactly what could it be.</p>
  <p>Basically, when I try to change the theme, it works perfectly. But, after refreshing the page, it doesn't stay with the correct one and gives me this error.</p>
  <h3>⚙️ Reproduce the issue</h3>
  <p>You can reproduce this issue, cloning the <a href="https://github.com/Edite-App/Edite-Webapp" rel="nofollow noreferrer">Edite GitHub repository</a> and follow <a href="https://github.com/Edite-App/Edite#-running-edite-locally" rel="nofollow noreferrer">the guide</a> to set up the services.</p>
  <h3> Code</h3>
  <p><strong>Note:</strong> <em>see that src is the root</em></p>
  <p><code>hooks/useThemeSwitcher.js</code></p>
  <pre class="lang-js prettyprint-override"><code>import { useState, useEffect } from 'react';
  
  function useThemeSwitcher(key, initialTheme) {
    const [theme, setTheme] = useState(
      () =&gt; {
        let storagedTheme = localStorage.getItem(key);
        storagedTheme = JSON.parse(storagedTheme) || initialTheme;
      }
    );
  
    useEffect(() =&gt; {
      localStorage.setItem(key, JSON.stringify(theme));
    }, [key, theme]);
  
    return [theme, setTheme];
  }
  
  export default useThemeSwitcher;
  </code></pre>
  <p><code>App.js</code></p>
  <pre class="lang-js prettyprint-override"><code>function App() {
    // Current theme state (light/dark);
    const [theme, setTheme] = useThemeSwitcher('theme', dark);
  
    const toggleTheme = () =&gt; {
      setTheme(theme.title === 'dark' ? light : dark)
    }
  
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;Global /&gt;
        {/* ...components */}
        &lt;ToolbarLeft toggleTheme={toggleTheme} /&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  </code></pre>
  <p><code>components/Switch/index.js</code></p>
  <pre class="lang-js prettyprint-override"><code>// Components (styles)
  import { CustomSwitch } from './switch.styles';
  
  function Switch({ isToggled, onSwitch }) {
    return (
      &lt;CustomSwitch&gt;
        &lt;input
          type=&quot;checkbox&quot;
          checked={isToggled}
          onChange={onSwitch}
        /&gt;
        &lt;span /&gt;
      &lt;/CustomSwitch&gt;
    )
  }
  
  export default Switch;
  </code></pre>
  <p><code>components/Toolbar/Left/index.js</code></p>
  <pre class="lang-js prettyprint-override"><code>// Components (styles)
  import { LeftContainer } from '../toolbar.styles';
  // Components (children)
  import ToolsList from './tools';
  
  function ToolbarLeft({ toggleTheme }) {
    return (
      &lt;LeftContainer&gt;
        &lt;ul&gt;
          &lt;ToolsList toggleTheme={toggleTheme} /&gt;
        &lt;/ul&gt;
      &lt;/LeftContainer&gt;
    )
  }
  
  export default ToolbarLeft;
  </code></pre>
  <p><code>components/Toolbar/Left/tools.js</code></p>
  <pre class="lang-js prettyprint-override"><code>function ToolsList({ toggleTheme }) {
    // Access and set the theme colors
    const { title } = useContext(ThemeContext);
  
    return (
      &lt;&gt;
        {/* ...components */}
        {/* Theme switcher */}
        &lt;Switch
          isToggled={title === 'dark'}
          onSwitch={toggleTheme}
        &lt;/Switch&gt;
      &lt;/&gt;
    )
  }
  </code></pre>