CoastalCommitsPastes/client/pages/_app.tsx

45 lines
1.3 KiB
TypeScript
Raw Normal View History

2022-03-06 19:46:59 -05:00
import '../styles/globals.css'
import { GeistProvider, CssBaseline } from '@geist-ui/core'
2022-03-09 05:06:03 -05:00
import { useEffect, useState } from 'react'
2022-03-06 19:46:59 -05:00
import type { AppProps as NextAppProps } from "next/app";
import useSharedState from '../lib/hooks/use-shared-state';
2022-03-06 19:46:59 -05:00
2022-03-09 20:11:37 -05:00
import 'react-loading-skeleton/dist/skeleton.css'
2022-03-06 19:46:59 -05:00
export type ThemeProps = {
theme: "light" | "dark" | string,
changeTheme: () => void
}
type AppProps<P = any> = {
pageProps: P;
} & Omit<NextAppProps<P>, "pageProps">;
export type DriftProps = ThemeProps
function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
const [themeType, setThemeType] = useSharedState<string>('theme', 'light')
2022-03-09 05:06:03 -05:00
useEffect(() => {
if (typeof window === 'undefined' || !window.localStorage) return
const storedTheme = window.localStorage.getItem('drift-theme')
if (storedTheme) setThemeType(storedTheme)
// TODO: useReducer?
}, [setThemeType, themeType])
2022-03-07 19:42:47 -05:00
2022-03-06 19:46:59 -05:00
const changeTheme = () => {
const newTheme = themeType === 'dark' ? 'light' : 'dark'
localStorage.setItem('drift-theme', newTheme)
2022-03-07 19:42:47 -05:00
setThemeType(last => (last === 'dark' ? 'light' : 'dark'))
2022-03-06 19:46:59 -05:00
}
return (
<GeistProvider themeType={themeType} >
<CssBaseline />
<Component {...pageProps} theme={themeType || 'light'} changeTheme={changeTheme} />
2022-03-07 21:36:36 -05:00
</GeistProvider>
2022-03-06 19:46:59 -05:00
)
}
export default MyApp