mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-14 17:26:26 +01:00
c95df0a07b
We can now load as much data as we want in the services and settings values. This solves the issue of using multiple localStorages boxes
47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
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';
|
|
import Layout from '../components/layout/Layout';
|
|
import { ConfigProvider } from '../tools/state';
|
|
|
|
export default function App(props: AppProps & { colorScheme: ColorScheme }) {
|
|
const { Component, pageProps } = props;
|
|
const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
|
|
|
|
const toggleColorScheme = (value?: ColorScheme) => {
|
|
const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
|
|
setColorScheme(nextColorScheme);
|
|
setCookies('mantine-color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>MyHomePage - Your new browser homepage!</title>
|
|
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
|
|
<link rel="shortcut icon" href="/favicon.svg" />
|
|
</Head>
|
|
|
|
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
|
|
<MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
|
|
<NotificationsProvider position="top-right">
|
|
<ConfigProvider>
|
|
<Layout>
|
|
<Component {...pageProps} />
|
|
</Layout>
|
|
</ConfigProvider>
|
|
</NotificationsProvider>
|
|
</MantineProvider>
|
|
</ColorSchemeProvider>
|
|
</>
|
|
);
|
|
}
|
|
|
|
App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
|
|
colorScheme: getCookie('mantine-color-scheme', ctx) || 'light',
|
|
});
|