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 PortalState from 'libs/web/state/portal' import Div100vh from 'react-div-100vh' import { createMuiTheme, MuiThemeProvider, StylesProvider, } from '@material-ui/core' import { useEffect, useMemo } from 'react' import { zhCN, enUS, Localization } from '@material-ui/core/locale' import { Locale, Settings } from 'libs/shared/settings' import I18nProvider from 'libs/web/utils/i18n-provider' import CsrfTokenState from 'libs/web/state/csrf-token' const muiLocale: Record = { [Locale.ZH_CN]: zhCN, [Locale.EN]: enUS, } 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 { resolvedTheme } = useTheme() const settings = pageProps?.settings as Settings const muiTheme = useMemo( () => createMuiTheme( { palette: { type: resolvedTheme === 'dark' ? 'dark' : 'light', primary: { /** * colors https://tailwindcss.com/docs/customizing-colors * primary.main: blue 500 * secondary.main: gray 500 */ main: '#3B82F6', }, secondary: { main: '#6B7280', }, }, }, muiLocale[settings?.locale] ), [resolvedTheme, settings] ) useEffect(() => { // Remove the server-side injected CSS. const jssStyles = document.querySelector('#jss-server-side') if (jssStyles) { jssStyles.parentElement?.removeChild(jssStyles) } }, []) return ( ) } function MyApp(props: AppProps) { return ( ) } export default MyApp