Discussion on: how to theme your gatsby site

[Kira]

Hi, I found the solution. Before, I wrapped ThemeContext inside layout

export const Layout = (props)=>{
    <ThemeContext.Provider value={themes}>
    <Header/>
        {props.children}
    <Footer/>
    </ThemeContext.Provider>
}

Then in my page Blog, I coudln't get themeContext

export const Page = ()=>{
    const themes = useContext(ThemeContext) //can't get the value
    ...

    return (
        <Layout>
            page
        </Layout>
    )
}

The solution is to create a wrapRootElement in gatsby-browser.js. Then all pages could get ThemeContext's value.

const wrapRootElement =({element})=>{
    return(
    <ThemeContext.Provider value={themes}>
        {element}    
    </ThemeContext.Provider>
    )
}