| pineafan | f1f5e2b | 2021-11-04 18:22:01 +0000 | [diff] [blame] | 1 | import Doc, { Html, Head, Main, NextScript } from 'next/document'; |
| 2 | import { ThemeProvider } from 'theme-ui'; |
| 3 | |
| 4 | const theme = { |
| 5 | config: { |
| 6 | useColorSchemeMediaQuery: true, |
| 7 | initialColorModeName: 'light', |
| 8 | }, |
| 9 | colors: { |
| 10 | text: '#424242', |
| 11 | background: '#ffffff', |
| 12 | primary: '#6576CC', |
| 13 | cardText: '#ffffff', |
| 14 | cardBackground: 'rgba(255, 255, 255, 0.65)', |
| 15 | cardBorder: '#C4C4C4', |
| 16 | cardFilter: 'rgba(0, 0, 0, 0)', |
| 17 | cardOverlay: '#00000080', |
| 18 | hint: '#f1f1f1', |
| 19 | |
| 20 | modes: { |
| 21 | dark: { |
| 22 | text: '#ffffff', |
| 23 | background: '#252525', |
| 24 | primary: '#6576CC', |
| 25 | cardText: '#424242', |
| 26 | cardBackground: 'rgba(0, 0, 0, 0.65)', |
| 27 | cardBorder: '#424242', |
| 28 | cardFilter: 'brightness(0.7)', |
| 29 | cardOverlay: '#42424280', |
| 30 | hint: '#101010', |
| 31 | } |
| 32 | } |
| 33 | }, |
| 34 | }; |
| 35 | |
| 36 | class Document extends Doc { |
| 37 | static async getInitialProps(ctx) { |
| 38 | const initialProps = await Doc.getInitialProps(ctx) |
| 39 | return { ...initialProps } |
| 40 | } |
| 41 | |
| 42 | render() { |
| 43 | return ( |
| 44 | <Html> |
| 45 | <Head /> |
| 46 | <body> |
| 47 | <ThemeProvider theme={theme}> |
| 48 | <Main /> |
| 49 | <NextScript /> |
| 50 | </ThemeProvider> |
| 51 | </body> |
| 52 | </Html> |
| 53 | ) |
| 54 | } |
| 55 | } |
| 56 | |
| 57 | export default Document; |