Drift

import '@styles/globals.css' import { GeistProvider, CssBaseline, useTheme } from '@geist-ui/core' import { useEffect, useMemo, useState } from 'react' import type { AppProps as NextAppProps } from "next/app"; import useSharedState from '@lib/hooks/use-shared-state'; import 'react-loading-skeleton/dist/skeleton.css' import { SkeletonTheme } from 'react-loading-skeleton'; import Head from 'next/head'; export type ThemeProps = { theme: "light" | "dark" | string, changeTheme: () => void } export type PostProps = { renderedPost: any | null, // Still don't have an official data type for posts theme: "light" | "dark" | string, changeTheme: () => void } type AppProps

= { pageProps: P; } & Omit, "pageProps">; export type DriftProps = ThemeProps function MyApp({ Component, pageProps }: AppProps) { const [themeType, setThemeType] = useSharedState('theme', 'light') const theme = useTheme(); useEffect(() => { if (typeof window === 'undefined' || !window.localStorage) return const storedTheme = window.localStorage.getItem('drift-theme') if (storedTheme) setThemeType(storedTheme) // TODO: useReducer? }, [setThemeType, themeType]) const changeTheme = () => { const newTheme = themeType === 'dark' ? 'light' : 'dark' localStorage.setItem('drift-theme', newTheme) setThemeType(last => (last === 'dark' ? 'light' : 'dark')) } const skeletonBaseColor = useMemo(() => { if (themeType === 'dark') return '#333' return '#eee' }, [themeType]) const skeletonHighlightColor = useMemo(() => { if (themeType === 'dark') return '#555' return '#ddd' }, [themeType]) return ( <> Drift ) } export default MyApp