First, we have to define the context. Instead of defining it in the src/App.js file, in our blog app, we are going to create a separate file for the context. Having a separate file for contexts makes it easier to maintain them later on. Furthermore, we always know where to import the contexts from, because it is clear from the filename.

Let's start defining a theme context:

1. Create a new src/contexts.js file.
2. Then, we import React:

import React from 'react'

3. Next, we define the ThemeContext. As before in our small example, we set the default primaryColor to deepskyblue. Additionally, we set the secondaryColor to coral:

export const ThemeContext = React.createContext({
    primaryColor: 'deepskyblue',
    secondaryColor: 'coral'
})

Now that we have defined our context, we can move on to defining the Context Hooks.