Stitches styles config and theme switcher logic

2021-11-19 15:26:12 +02:00
parent 9f3978c8a7
commit 359df6966e
2 changed files with 20 additions and 4 deletions
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -6,6 +6,8 @@ import Document, {
  DocumentContext,
 } from "next/document";

+import { globalStyles, getCssText } from "../stitches.config";
+
 class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);
@@ -13,6 +15,7 @@ class MyDocument extends Document {
    return initialProps;
  }
  render() {
+    globalStyles();
    return (
      <Html>
        <Head>
@@ -28,6 +31,10 @@ class MyDocument extends Document {
            href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&family=Work+Sans:wght@400;600;700&display=swap"
            rel="stylesheet"
          />
+          <style
+            id="stitches"
+            dangerouslySetInnerHTML={{ __html: getCssText() }}
+          />
        </Head>
        <body>
          <Main />