Right now, our Context Hooks use the default value that is specified by the context, when no provider is defined. To be able to change the value, we need to define a provider.

Let's start defining the provider:

1. Edit src/App.js, and import the ThemeContext:

import { ThemeContext } from './contexts'

2. Wrap the whole app with the ThemeContext.Provider component, providing the same theme that we set as the default value earlier:

    return (
        <ThemeContext.Provider value={{ primaryColor: 'deepskyblue', secondaryColor: 'coral' }}>
            <div style={{ padding: 8 }}>
                <Header text="React Hooks Blog" />
                ...
                <PostList posts={posts} />
            </div>
        </ThemeContext.Provider>
    )

Our app should look exactly the same way as before, but now we are using the value from the provider!