59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import '/styles/globals.css'
|
|
import { Fragment, ReactElement, ReactNode } from 'react'
|
|
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';
|
|
import Themes from '../public/data/themes.json';
|
|
|
|
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
|
|
getLayout?: (page: ReactElement) => ReactNode
|
|
}
|
|
|
|
export type AppPropsWithLayout = AppProps & {
|
|
Component: NextPageWithLayout
|
|
}
|
|
|
|
export const ThemeUpdateContext = createContext(
|
|
(theme: DefaultTheme) => console.error("attempted to set theme outside of a ThemeUpdateContext.Provider")
|
|
)
|
|
|
|
export const useUpdateTheme = () => useContext(ThemeUpdateContext);
|
|
|
|
|
|
export default function Website({ Component, pageProps }: AppPropsWithLayout) {
|
|
const loadedThemes = Themes.themes;
|
|
const [selectedTheme, setselectedTheme] = useState(darkTheme);
|
|
const [themes, setThemes] = useState(loadedThemes);
|
|
|
|
|
|
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), themes))
|
|
}
|
|
}, [selectedTheme, themes])
|
|
|
|
// 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>
|
|
|
|
)
|
|
}
|