|
1 | 1 | import Head from 'next/head' |
2 | 2 | import BLOG from '../blog.config' |
| 3 | +import { PrismBaseline } from '@zeit-ui/react-prism' |
| 4 | +import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react' |
3 | 5 | import React, { useCallback, useState, useEffect, useMemo } from 'react' |
| 6 | +import useDomClean from 'lib/use-dom-clean' |
4 | 7 | import { getDNSPrefetchValue } from 'lib/data-transform' |
5 | 8 | import ThemeConfigProvider from 'lib/components/theme-config-provider' |
6 | | -import { ZEITUIProvider, useTheme, CSSBaseline } from '@zeit-ui/react' |
7 | | -import useDomClean from 'lib/use-dom-clean' |
8 | 9 |
|
9 | 10 | const Application = ({ Component, pageProps }) => { |
10 | | - const theme = useTheme() |
11 | 11 | const [themeType, setThemeType] = useState('light') |
12 | 12 | const domain = useMemo(() => getDNSPrefetchValue(BLOG.domain), []) |
13 | 13 | const changeHandle = useCallback(isDark => { |
@@ -46,52 +46,12 @@ const Application = ({ Component, pageProps }) => { |
46 | 46 | <meta name="viewport" content="initial-scale=1, maximum-scale=5, minimum-scale=1, viewport-fit=cover" /> |
47 | 47 | </Head> |
48 | 48 | <ZEITUIProvider theme={{ type: themeType }}> |
49 | | - <CSSBaseline> |
| 49 | + <CSSBaseline /> |
| 50 | + <PrismBaseline /> |
50 | 51 | <ThemeConfigProvider onChange={changeHandle}> |
51 | 52 | <Component {...pageProps} /> |
52 | 53 | </ThemeConfigProvider> |
53 | | - </CSSBaseline> |
54 | 54 | <style global jsx>{` |
55 | | - .tag { |
56 | | - color: ${theme.palette.accents_5}; |
57 | | - } |
58 | | - |
59 | | - .punctuation { |
60 | | - color: ${theme.palette.accents_5}; |
61 | | - } |
62 | | - |
63 | | - .attr-name { |
64 | | - color: ${theme.palette.accents_6}; |
65 | | - } |
66 | | - |
67 | | - .attr-value { |
68 | | - color: ${theme.palette.accents_4}; |
69 | | - } |
70 | | - |
71 | | - .language-javascript { |
72 | | - color: ${theme.palette.accents_4}; |
73 | | - } |
74 | | - |
75 | | - span[class*="class-name"] { |
76 | | - color: ${theme.palette.purple}; |
77 | | - } |
78 | | - |
79 | | - span.token.string { |
80 | | - color: ${theme.palette.accents_5}; |
81 | | - } |
82 | | - |
83 | | - span.keyword { |
84 | | - color: ${theme.palette.success} |
85 | | - } |
86 | | - |
87 | | - span.plain-text { |
88 | | - color: ${theme.palette.accents_3}; |
89 | | - } |
90 | | - |
91 | | - body { |
92 | | - overflow-x: hidden; |
93 | | - } |
94 | | - |
95 | 55 | @media only screen and (max-width: 767px) { |
96 | 56 | html { |
97 | 57 | font-size: 15px; |
|
0 commit comments