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/_app.tsx
+++ b/pages/_app.tsx
@@ -1,19 +1,28 @@
-/** @jsxImportSource theme-ui */
 import "../styles/globals.css";
 import type { AppProps } from "next/app";
-import { ThemeProvider } from "theme-ui";
 import { SessionProvider } from "next-auth/react";
+import { ThemeProvider } from "next-themes";
+import { Toaster } from "react-hot-toast";

-import { theme } from "../theme";
+import { darkTheme } from "../stitches.config";
 import Navigation from "../components/Navigation";

 function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  return (
    <>
      <SessionProvider session={session}>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem={false}
+          value={{
+            light: "light",
+            dark: darkTheme.className,
+          }}
+        >
          <Navigation />
          <Component {...pageProps} />
+          <Toaster />
        </ThemeProvider>
      </SessionProvider>
    </>
--- 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 />