main-site/pages/_app.tsx

58 lines
1.8 KiB
TypeScript
Raw Normal View History

2022-12-03 20:02:13 +00:00
import '/styles/globals.css'
import { Fragment, ReactElement, ReactNode } from 'react'
2022-12-03 20:02:13 +00:00
import Layout from '../components/layout'
import type { NextPage } from 'next'
import { AppProps } from 'next/app';
import { DefaultTheme, ThemeProvider } from 'styled-components';
import { createContext, useContext, useEffect, useState } from 'react'
import { darkTheme, GlobalStyle } from '../components/themes';
import { getTheme } from '../components/themeselector';
2022-12-03 20:02:13 +00:00
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode
}
export type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout
}
const ThemeUpdateContext = createContext(
(theme: DefaultTheme) => console.error("attempted to set theme outside of a ThemeUpdateContext.Provider")
)
export const useUpdateTheme = () => useContext(ThemeUpdateContext);
2022-12-03 20:02:13 +00:00
export default function Website({ Component, pageProps }: AppPropsWithLayout) {
const [selectedTheme, setselectedTheme] = useState(darkTheme);
useEffect(() => {
const storedThemeIdTemp = localStorage.getItem("theme");
// get stored theme data
// if theme data differs set it
// if not just exit
if (storedThemeIdTemp && parseInt(storedThemeIdTemp) !== selectedTheme.themeId) {
setselectedTheme(getTheme(parseInt(storedThemeIdTemp)))
}
}, [selectedTheme])
2022-12-03 20:02:13 +00:00
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout ?? ((page) => (
<Layout>{page}</Layout>))
return (
<Fragment>
<GlobalStyle />
<ThemeProvider theme={selectedTheme}>
<ThemeUpdateContext.Provider value={setselectedTheme}>
{getLayout(<Component {...pageProps} />)}
</ThemeUpdateContext.Provider>
</ThemeProvider>
</Fragment>
)
}