Built Session Context and used with theme

components/pages/StyledApp.tsx

@@ -1,16 +1,17 @@
+import { SessionConsumer } from 'contexts/session';
 import type { FC } from 'react';
 import { ThemeProvider } from 'styled-components';
 import GlobalStyle from 'styles/GlobalStyle';
 import themes from 'styles/themes.json';
-import type { StyledAppProps } from 'types/components/pages/StyledApp';
 
-const StyledApp: FC<StyledAppProps> = ({
-  children,
-  theme = themes.default
-}) => (
+const StyledApp: FC = ({ children }) => (
   <>
     <GlobalStyle />
-    <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    <SessionConsumer>
+      {({ theme = themes.default }) => (
+        <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      )}
+    </SessionConsumer>
   </>
 );
 

contexts/session.tsx

@@ -0,0 +1,14 @@
+import useSessionContextState from 'hooks/useSessionContextState';
+import type { FC } from 'react';
+import { createContext } from 'react';
+import type { SessionContextState } from 'types/contexts/session';
+
+const SessionContext = createContext<SessionContextState>({});
+
+export const SessionProvider: FC = ({ children }) => (
+  <SessionContext.Provider value={useSessionContextState()}>
+    {children}
+  </SessionContext.Provider>
+);
+
+export const SessionConsumer = SessionContext.Consumer;

hooks/useSessionContextState.ts

@@ -0,0 +1,7 @@
+import type { SessionContextState } from 'types/contexts/session';
+
+const useSessionContextState = (): SessionContextState => ({
+  theme: undefined // TODO: Load user theme from localStorage
+});
+
+export default useSessionContextState;

pages/_app.tsx

@@ -1,5 +1,6 @@
 import Metadata from 'components/pages/Metadata';
 import StyledApp from 'components/pages/StyledApp';
+import { SessionProvider } from 'contexts/session';
 import type { AppProps } from 'next/app';
 import type { ReactElement } from 'react';
 
@@ -7,9 +8,11 @@ export default function App({ Component, pageProps }: AppProps): ReactElement {
   return (
     <>
       <Metadata />
-      <StyledApp>
-        <Component {...pageProps} />
-      </StyledApp>
+      <SessionProvider>
+        <StyledApp>
+          <Component {...pageProps} />
+        </StyledApp>
+      </SessionProvider>
     </>
   );
 }

types/contexts/session.ts

@@ -1,5 +1,5 @@
 import type { DefaultTheme } from 'styled-components';
 
-export type StyledAppProps = {
+export type SessionContextState = {
   theme?: DefaultTheme;
 };