Application.jsx

import React, { useContext } from 'react'

import Counter from './Counter'
import { ColorContext, ColorContextProvider } from './ColorContext'

function Application() {
    return (
        <ColorContextProvider>
            <Workspace />
        </ColorContextProvider>
    )
}

function Workspace() {
    const { color, toggleColor } = useContext(ColorContext)

    return (
        <div>
            <h1 style={{ color }}>Making sense of React Hooks</h1>
            <Counter />
            <button onClick={toggleColor}>Toggle color</button>
        </div>
    )
}

export default Application

ColorContext.jsx

import React, { useState } from 'react'

export const ColorContext = React.createContext()

export function ColorContextProvider({ children }) {
    const [color, setColor] = useState('#35CE8D')

    const toggleColor = () => {
        color === '#35CE8D' ? setColor('#721817') : setColor('#35CE8D')
    }

    const value = { color, toggleColor }

    return <ColorContext.Provider value={value}>{children}</ColorContext.Provider>
}