43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { ColorScheme, ColorSchemeProvider, MantineProvider } from "@mantine/core";
|
|
import { Notifications } from "@mantine/notifications";
|
|
import { getCookie, setCookie } from "cookies-next";
|
|
import NextApp, { AppContext, AppProps } from "next/app";
|
|
import Head from "next/head";
|
|
import { useState } from "react";
|
|
|
|
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);
|
|
setCookie("mantine-color-scheme", nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Mantine next example</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>
|
|
<Component {...pageProps} />
|
|
<Notifications />
|
|
</MantineProvider>
|
|
</ColorSchemeProvider>
|
|
</>
|
|
);
|
|
}
|
|
|
|
App.getInitialProps = async (appContext: AppContext) => {
|
|
const appProps = await NextApp.getInitialProps(appContext);
|
|
return {
|
|
...appProps,
|
|
colorScheme: getCookie("mantine-color-scheme", appContext.ctx) || "dark",
|
|
};
|
|
};
|