Page doesn't re-render when react context variable changes

I am using React context to keep a global theme state.

import React, { useState, createContext } from "react"
const ThemeContext = createContext(localStorage.getItem("theme") || "light")
export const ThemeStore = ({ children }) => {
const [theme, setTheme] = useState(localStorage.getItem("theme") || "light")
const handleThemeChange = theme => {
setTheme(theme)
localStorage.setItem("theme", theme === "dark" ? "dark" : "light")
}
return (
<ThemeContext.Provider value={{ theme, changeTheme: handleThemeChange }}>
{children}
</ThemeContext.Provider>
)
}
export default ThemeContext

I am providing this context in my Layout Component so that my entire app can access the store. Below is my Layout component.

import React, { useContext } from "react"
import PropTypes from "prop-types"
import Header from "./header"
import "../styles/layout.css"
import ThemeContext, { ThemeStore } from "../contexts/ThemeContext"
import MobileBottomNav from "../components/mobileBottomNav"
// Wrapper for background color
const Wrapper = ({ children }) => {
const theme = useContext(ThemeContext)
return (
<div className={`${theme.theme === "dark" ? "theme-dark" : "theme-light"}`}>
{children}
</div>
)
}
const Layout = ({ children, hideHeader, hideFooterNavBar }) => {
return (
<ThemeStore>
<Wrapper>
<div className="bg-bg-primary">
<Header hideHeader={hideHeader} />
<main>{children}</main>
<MobileBottomNav hideFooterNavBar={hideFooterNavBar} />
</div>
</Wrapper>
</ThemeStore>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout

I have a button in my Header component that changes the theme from light to dark and vice versa. And my menu component etc. all change their colors, as I've added conditional classnames.

But in my signin page, which is also wrapped around the <Layout> provider doesn't update when the state is changed. So if I change the theme from dark to light but it doesn't re-render the signup page, and hence the colors don't change. Why is it so? How do I make the page re-render when the theme changes so the new colors are applied.

Here is my signin page.

import React, { useContext } from "react"
import SEO from "../components/seo"
import Layout from "../components/layout"
import ThemeContext from "../contexts/ThemeContext"
const SignInPage = () => {
const theme = useContext(ThemeContext)
// This just logs the initial value of theme, but when I change 
// the theme from the header component, this value doesn't log again. 
// The component doesn't re-render.
console.log(theme)
return (
<Layout hideFooterNavBar={true}>
<SEO title="Sign In" />
<div>
<div
style={{
paddingTop: "150px",
}}
className="container mx-auto"
>
<p
className={`${
theme.theme === "dark" ? "theme-dark" : "theme-light"
} text-text-primary mb-10`}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non
sapien blandit, aliquet lorem quis, consectetur tellus. Maecenas ac
nibh eu enim auctor volutpat. Mauris a lacus magna. Proin
sollicitudin mauris sit amet auctor feugiat. Nulla facilisi.
Pellentesque eget massa nec massa porta tristique in vitae ante.
Donec rutrum imperdiet urna.
</p>
</div>
</div>
</Layout>
)
}
export default SignInPage

Your issue is that you are consuming ThemeContext beneath where you're providing a value to ThemeContext.Provider.

If you check the React devtools you should see that your tree looks something like this:

• SignInPage
  • Layout
    • ThemeStore
      • ThemeContext.Provider
        • Wrapper

What you can do instead is consume the context in a component that is a child of Layout or use a higher order component to inject the ThemeContext into SignInPage:

const SignInPage = ({ theme }) => {
  // ...
}

export default props => (
  <ThemeContext.Consumer>
    {theme => 
      <SignInPage theme={theme} {...props} />
    }
  </ThemeContext.Consumer>
)