|
- import NextDocument, {Html, Head as NextHead, Main, NextScript, DocumentContext} from 'next/document';
- import { extractCss } from '@tesseract-design/viewfinder-react';
-
- export default class Document extends NextDocument {
- static async getInitialProps(ctx: DocumentContext) {
- const page = await ctx.renderPage()
-
- const style = extractCss();
-
- const initialProps = await NextDocument.getInitialProps(ctx)
-
- return {
- ...initialProps,
- ...page,
- style,
- }
- }
-
- render() {
- const { style: rawStyle } = this.props as Record<string, unknown>
- const style = rawStyle as string
-
- return (
- <Html>
- <NextHead>
- {
- style.length > 0
- && (
- <style
- id="_goober_ssr"
- dangerouslySetInnerHTML={{ __html: style }}
- />
- )
- }
- <style>
- {`
- :root {
- --base-width: 360px;
- --color-background: white;
- }
-
- html,
- body {
- padding: 0;
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
- Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
- line-height: 1.75;
- }
-
- a {
- color: inherit;
- text-decoration: none;
- }
-
- * {
- box-sizing: border-box;
- }
-
- @media (prefers-color-scheme: dark) {
- :root {
- --color-background: black;
- }
-
- html {
- color-scheme: dark;
- }
- body {
- color: white;
- background-color: var(--color-background);
- }
- }
-
- #__next {
- display: contents;
- background-color: inherit;
- }
-
- `}
- </style>
- </NextHead>
- <body>
- <Main />
- <NextScript />
- </body>
- </Html>
- )
- }
- }
|