mirror of
https://github.com/zhigang1992/react.git
synced 2026-03-27 22:54:38 +08:00
120 lines
3.7 KiB
TypeScript
120 lines
3.7 KiB
TypeScript
import Head from 'next/head'
|
|
import { NextPage } from 'next'
|
|
import { AppProps } from 'next/app'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { CSSBaseline, ZEITUIProvider, useTheme, ZeitUIThemes } from 'components'
|
|
import Menu from 'lib/components/menu'
|
|
import ConfigContext from 'lib/config-provider'
|
|
import useDomClean from 'lib/use-dom-clean'
|
|
import { DeepPartial } from 'components/utils/types'
|
|
|
|
const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
|
|
const theme = useTheme()
|
|
const [customTheme, setCustomTheme] = useState<DeepPartial<ZeitUIThemes>>({})
|
|
const themeChangeHandle = (theme: DeepPartial<ZeitUIThemes>) => {
|
|
setCustomTheme(theme)
|
|
}
|
|
|
|
useEffect(() => {
|
|
const theme = window.localStorage.getItem('theme')
|
|
if (theme !== 'dark') return
|
|
themeChangeHandle({ type: 'dark' })
|
|
}, [])
|
|
useDomClean()
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>React - ZEIT UI</title>
|
|
<meta name="google" content="notranslate" />
|
|
<meta name="twitter:creator" content="@echo_witt" />
|
|
<meta name="referrer" content="strict-origin" />
|
|
<meta property="og:title" content="React - ZEIT UI" />
|
|
<meta property="og:url" content="https://react.zeit-ui.co" />
|
|
<link rel="dns-prefetch" href="//react.zeit-ui.co" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="generator" content="ZEIT UI" />
|
|
<meta name="description" content="React implementation for ZEIT design." />
|
|
<meta property="og:description" content="React implementation for ZEIT design." />
|
|
<meta
|
|
itemProp="image"
|
|
property="og:image"
|
|
content="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png"
|
|
/>
|
|
<meta
|
|
property="og:image"
|
|
content="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png"
|
|
/>
|
|
<meta
|
|
property="twitter:image"
|
|
content="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png"
|
|
/>
|
|
<meta
|
|
name="viewport"
|
|
content="initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover"
|
|
/>
|
|
</Head>
|
|
<ZEITUIProvider theme={customTheme}>
|
|
<CSSBaseline />
|
|
<ConfigContext onThemeChange={themeChangeHandle}>
|
|
<Menu />
|
|
<Component {...pageProps} />
|
|
</ConfigContext>
|
|
<style global jsx>{`
|
|
.tag {
|
|
color: ${theme.palette.accents_5};
|
|
}
|
|
|
|
.punctuation {
|
|
color: ${theme.palette.accents_5};
|
|
}
|
|
|
|
.attr-name {
|
|
color: ${theme.palette.accents_6};
|
|
}
|
|
|
|
.attr-value {
|
|
color: ${theme.palette.accents_4};
|
|
}
|
|
|
|
.language-javascript {
|
|
color: ${theme.palette.accents_4};
|
|
}
|
|
|
|
span.class-name {
|
|
color: ${theme.palette.warning};
|
|
}
|
|
|
|
span.maybe-class-name {
|
|
color: ${theme.palette.purple};
|
|
}
|
|
|
|
span.token.string {
|
|
color: ${theme.palette.accents_5};
|
|
}
|
|
|
|
span.keyword {
|
|
color: ${theme.palette.success};
|
|
}
|
|
|
|
span.plain-text {
|
|
color: ${theme.palette.accents_3};
|
|
}
|
|
|
|
body::-webkit-scrollbar {
|
|
width: 0;
|
|
background-color: ${theme.palette.accents_1};
|
|
}
|
|
|
|
body::-webkit-scrollbar-thumb {
|
|
background-color: ${theme.palette.accents_2};
|
|
border-radius: ${theme.layout.radius};
|
|
}
|
|
`}</style>
|
|
</ZEITUIProvider>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Application
|