import 'tailwindcss/tailwind.css'
import UIState from 'libs/web/state/ui'
import { AppProps } from 'next/app'
import Head from 'next/head'
import { ThemeProvider, useTheme } from 'next-themes'
import { StylesProvider } from '@material-ui/styles'
import PortalState from 'libs/web/state/portal'
import Div100vh from 'react-div-100vh'
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core'
import { useMemo } from 'react'
const handleRejection = (event: any) => {
// react-beautiful-dnd 会捕获到 `ResizeObserver loop limit exceeded`
// 但实际这个错误对性能没有影响
// see https://github.com/atlassian/react-beautiful-dnd/issues/1548
if (/^ResizeObserver/.test(event.message)) {
// todo catch
event.stopImmediatePropagation()
}
if (event.reason === 'canceled') {
event.preventDefault()
}
}
if (typeof window !== 'undefined') {
window.addEventListener('unhandledrejection', handleRejection)
window.addEventListener('error', handleRejection)
}
function DocumentHead() {
const { title } = UIState.useContainer()
return (
{title.value}
)
}
const AppInner = ({ Component, pageProps }: AppProps) => {
const { theme } = useTheme()
const muiTheme = useMemo(
() =>
createMuiTheme({
palette: {
type: theme ? 'dark' : 'light',
primary: {
/**
* colors https://tailwindcss.com/docs/customizing-colors
* primary.main: blue 500
* secondary.main: gray 500
*/
main: '#3B82F6',
},
secondary: {
main: '#6B7280',
},
},
}),
[theme]
)
return (
)
}
function MyApp(props: AppProps) {
return (
)
}
export default MyApp