React Context

// context
import {
  createContext,
  Dispatch,
  SetStateAction
} from "react";

type State<T> = [
  T,
  Dispatch<SetStateAction<T>>
];

type InitValue = {
  isDarkTheme: boolean
}

type ContextType = {
  isDarkThemeState: State<boolean>
}

export const initValue: InitValue = {
    isDarkTheme: window.localStorage.getItem("isDarkTheme") === "true"
    ? true
    : window.matchMedia &&
        window.matchMedia("(prefers-color-scheme: dark)").matches,
}

const globalContext = createContext(
  (initValue as unknown) as ContextType
);

export const GlobalContextProvider = globalContext.Provider;

export default globalContext;
// App Provider
import { useState, ReactNode } from "react";

interface AppProviderProperties {
  children: ReactNode;
}

const { isDarkTheme } = initValue;

const AppProvider = ({ children }: AppProviderProperties): JSX.Element => {
  const isDarkThemeState = useState(isDarkTheme);
  return (
    <GlobalContextProvider value={{
      isDarkThemeState,
    }}>{children}</GlobalContextProvider>
  );
}

export default AppProvider;
// Nested components
import { useContext } from "react";

const Example = (): JSX.Element => {
  const { isDarkThemeState } = useContext(globalContext);
  const [isDarkTheme, setIsDarkTheme] = isDarkThemeState;
  return <></>;
}

export default Example;