mirror of
https://github.com/hsjobeki/noogle.git
synced 2024-12-20 20:31:32 +03:00
57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import type { AppProps } from "next/app";
|
||
|
|
import { CacheProvider, EmotionCache } from "@emotion/react";
|
||
|
|
import { ThemeProvider, CssBaseline, createTheme } from "@mui/material";
|
||
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
||
|
|
|
||
|
|
import "@fontsource/roboto/300.css";
|
||
|
|
import "@fontsource/roboto/400.css";
|
||
|
|
import "@fontsource/roboto/500.css";
|
||
|
|
import "@fontsource/roboto/700.css";
|
||
|
|
|
||
|
|
import createEmotionCache from "../createEmotionCache";
|
||
|
|
import { lightThemeOptions, darkThemeOptions } from "../styles/theme";
|
||
|
|
import "../styles/globals.css";
|
||
|
|
import { Layout } from "../components/layout";
|
||
|
|
import Head from "next/head";
|
||
|
|
|
||
|
|
interface MyAppProps extends AppProps {
|
||
|
|
emotionCache?: EmotionCache;
|
||
|
|
}
|
||
|
|
|
||
|
|
const clientSideEmotionCache = createEmotionCache();
|
||
|
|
|
||
|
|
const lightTheme = createTheme(lightThemeOptions);
|
||
|
|
const darkTheme = createTheme(darkThemeOptions);
|
||
|
|
|
||
|
|
const MyApp: React.FunctionComponent<MyAppProps> = (props) => {
|
||
|
|
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
|
||
|
|
const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)");
|
||
|
|
|
||
|
|
const getContent = () => {
|
||
|
|
return (
|
||
|
|
<Layout>
|
||
|
|
<Component {...pageProps} />
|
||
|
|
</Layout>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Head>
|
||
|
|
<title>noogle</title>
|
||
|
|
<meta name="description" content="Search nix functions" />
|
||
|
|
<link rel="icon" href="/favicon.png" />
|
||
|
|
</Head>
|
||
|
|
|
||
|
|
<CacheProvider value={emotionCache}>
|
||
|
|
<ThemeProvider theme={userPrefersDarkmode ? darkTheme : lightTheme}>
|
||
|
|
<CssBaseline />
|
||
|
|
{getContent()}
|
||
|
|
</ThemeProvider>
|
||
|
|
</CacheProvider>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default MyApp;
|