_app.tsx

const App = ({ Component, pageProps }: AppProps) => {
   return (
      <AppContextProvider>
         <Theme>
            <Header />
            <Component {...pageProps} />
         </Theme>
      </AppContextProvider>
   );
};

export default App;

AppContext.tsx

import React, { useState } from 'react';
import useMatchMedia from 'hooks/useMatchMedia';
import { breakpoints } from 'Theme/breakpoints';

type ThemeStateType = 'light' | 'dark' | 'contrast';

export type MainContextType = {
   theme: ThemeStateType;
   setTheme: (value: ThemeStateType) => void;
   medium: boolean;
   large: boolean;
};

/** Create context */
const AppContext = React.createContext<MainContextType>(undefined!);

/**Context Provider */
const AppContextProvider = ({ children }: { children: React.ReactNode }) => {
   const medium = useMatchMedia(breakpoints.large);
   const large = useMatchMedia(breakpoints.medium);
   const [theme, setTheme] = useState<ThemeStateType>('light');

   const value: MainContextType = {
      medium,
      large,
      theme,
      setTheme,
   };

   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
};

export { AppContextProvider, AppContext };

useMatchMedia.tsx

import { useState, useEffect } from 'react';

/**
 *
 * @param mediaQuery breakpoint to provide
 * @returns boolean
 */
const useMatchMedia = (mediaQuery: string) => {
   if (process.browser) {
      const [isMatches, setIsMatches] = useState(
         window.matchMedia(mediaQuery).matches
      );
      useEffect(() => {
         const updateStateisMatches = (event: MediaQueryListEvent) =>
            setIsMatches(event.matches);

         const mediaQueryList = window.matchMedia(mediaQuery);
         setIsMatches(mediaQueryList.matches);
         mediaQueryList.addListener(updateStateisMatches);

         return () => mediaQueryList.removeListener(updateStateisMatches);
      }, [mediaQuery]);

      return isMatches;
   } else return false;
};

export default useMatchMedia;