import { GetServerSidePropsContext } from 'next'; import { useState } from 'react'; import { AppProps } from 'next/app'; import { getCookie, setCookie } from 'cookies-next'; import Head from 'next/head'; import { MantineProvider, ColorScheme, ColorSchemeProvider, MantineTheme } from '@mantine/core'; import { NotificationsProvider } from '@mantine/notifications'; import { useHotkeys } from '@mantine/hooks'; import { ModalsProvider } from '@mantine/modals'; import { appWithTranslation } from 'next-i18next'; import { QueryClientProvider } from '@tanstack/react-query'; import { ConfigProvider } from '../tools/state'; import { theme } from '../tools/theme'; import { ColorTheme } from '../tools/color'; import { queryClient } from '../tools/queryClient'; function App(this: any, props: AppProps & { colorScheme: ColorScheme }) { const { Component, pageProps } = props; const [colorScheme, setColorScheme] = useState(props.colorScheme); const [primaryColor, setPrimaryColor] = useState('red'); const [secondaryColor, setSecondaryColor] = useState('orange'); const [primaryShade, setPrimaryShade] = useState(6); const colorTheme = { primaryColor, secondaryColor, setPrimaryColor, setSecondaryColor, primaryShade, setPrimaryShade, }; const toggleColorScheme = (value?: ColorScheme) => { const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark'); setColorScheme(nextColorScheme); setCookie('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 }); }; useHotkeys([['mod+J', () => toggleColorScheme()]]); return ( <> ); } App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({ colorScheme: getCookie('color-scheme', ctx) || 'light', }); export default appWithTranslation(App);