2022-04-24 22:36:47 +02:00
|
|
|
import { GetServerSidePropsContext } from 'next';
|
|
|
|
|
import { useState } from 'react';
|
|
|
|
|
import { AppProps } from 'next/app';
|
|
|
|
|
import { getCookie, setCookies } from 'cookies-next';
|
|
|
|
|
import Head from 'next/head';
|
|
|
|
|
import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
|
|
|
|
|
import { NotificationsProvider } from '@mantine/notifications';
|
2022-05-17 04:19:59 +02:00
|
|
|
import { useHotkeys } from '@mantine/hooks';
|
2022-04-25 00:11:32 +02:00
|
|
|
import Layout from '../components/layout/Layout';
|
2022-05-02 15:09:39 +02:00
|
|
|
import { ConfigProvider } from '../tools/state';
|
2022-05-10 18:57:41 +02:00
|
|
|
import { theme } from '../tools/theme';
|
2022-06-01 19:53:57 +02:00
|
|
|
import { styles } from '../tools/styles';
|
2022-04-24 22:36:47 +02:00
|
|
|
|
|
|
|
|
export default function App(props: AppProps & { colorScheme: ColorScheme }) {
|
|
|
|
|
const { Component, pageProps } = props;
|
2022-05-17 04:19:59 +02:00
|
|
|
const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
|
2022-04-24 22:36:47 +02:00
|
|
|
|
|
|
|
|
const toggleColorScheme = (value?: ColorScheme) => {
|
|
|
|
|
const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
|
|
|
|
|
setColorScheme(nextColorScheme);
|
2022-05-12 19:28:10 +02:00
|
|
|
setCookies('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
|
2022-04-24 22:36:47 +02:00
|
|
|
};
|
2022-05-15 12:42:53 +02:00
|
|
|
useHotkeys([['mod+J', () => toggleColorScheme()]]);
|
2022-04-24 22:36:47 +02:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
2022-05-16 12:46:27 +02:00
|
|
|
<title>Homarr 🦞</title>
|
2022-04-24 22:36:47 +02:00
|
|
|
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
|
2022-05-15 12:42:53 +02:00
|
|
|
<link rel="shortcut icon" href="/favicon.svg" />
|
2022-04-24 22:36:47 +02:00
|
|
|
</Head>
|
|
|
|
|
|
|
|
|
|
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
|
2022-05-10 18:57:41 +02:00
|
|
|
<MantineProvider
|
|
|
|
|
theme={{
|
|
|
|
|
...theme,
|
|
|
|
|
colorScheme,
|
|
|
|
|
}}
|
2022-06-01 19:53:57 +02:00
|
|
|
styles={{
|
|
|
|
|
...styles,
|
|
|
|
|
}}
|
2022-05-10 18:57:41 +02:00
|
|
|
withGlobalStyles
|
|
|
|
|
withNormalizeCSS
|
|
|
|
|
>
|
2022-05-26 18:16:24 +02:00
|
|
|
<NotificationsProvider limit={4} position="bottom-left">
|
2022-05-02 15:09:39 +02:00
|
|
|
<ConfigProvider>
|
2022-04-27 03:12:26 +02:00
|
|
|
<Layout>
|
|
|
|
|
<Component {...pageProps} />
|
|
|
|
|
</Layout>
|
2022-05-02 15:09:39 +02:00
|
|
|
</ConfigProvider>
|
2022-04-24 22:36:47 +02:00
|
|
|
</NotificationsProvider>
|
|
|
|
|
</MantineProvider>
|
|
|
|
|
</ColorSchemeProvider>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
|
2022-05-12 19:28:10 +02:00
|
|
|
colorScheme: getCookie('color-scheme', ctx) || 'light',
|
2022-04-24 22:36:47 +02:00
|
|
|
});
|
