From c204fbdef159e1a2b639b06990651bcb139e5630 Mon Sep 17 00:00:00 2001 From: Lucian Petri Date: Thu, 29 Dec 2022 22:46:22 +0200 Subject: [PATCH] reorganizing the theme configuration --- website/src/pages/_app.tsx | 33 ++++---------------------- website/src/pages/_document.tsx | 3 +-- website/src/styles/Theme.tsx | 42 +++++++++++++++++++++++++++++++-- 3 files changed, 46 insertions(+), 32 deletions(-) diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx index f602457f..c820f27c 100644 --- a/website/src/pages/_app.tsx +++ b/website/src/pages/_app.tsx @@ -1,48 +1,25 @@ -import { ChakraProvider } from "@chakra-ui/react"; import { SessionProvider } from "next-auth/react"; -import { Inter } from "@next/font/google"; -import { extendTheme } from "@chakra-ui/react"; import type { AppProps } from "next/app"; import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout"; import "../styles/globals.css"; import "focus-visible"; - -const inter = Inter({ - subsets: ["latin"], - variable: "--font-inter", -}); - -const theme = extendTheme({ - styles: { - global: { - body: { - bg: "white", - }, - main: { - fontFamily: "Inter", - }, - header: { - fontFamily: "Inter", - }, - }, - }, -}); +import { Chakra, getServerSideProps } from "../styles/Theme"; type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout; }; -function MyApp({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) { +function MyApp({ Component, pageProps: { session, cookies, ...pageProps } }: AppPropsWithLayout) { const getLayout = Component.getLayout ?? getDefaultLayout; const page = getLayout(); return ( - + {page} - + ); } - +export { getServerSideProps }; export default MyApp; diff --git a/website/src/pages/_document.tsx b/website/src/pages/_document.tsx index 308a9161..a95896d9 100644 --- a/website/src/pages/_document.tsx +++ b/website/src/pages/_document.tsx @@ -1,6 +1,5 @@ import { ColorModeScript } from "@chakra-ui/react"; import { Head, Html, Main, NextScript } from "next/document"; -import theme from "../styles/Theme"; export default function Document() { return ( @@ -9,7 +8,7 @@ export default function Document() { - +
diff --git a/website/src/styles/Theme.tsx b/website/src/styles/Theme.tsx index 75b49f10..02728b59 100644 --- a/website/src/styles/Theme.tsx +++ b/website/src/styles/Theme.tsx @@ -1,10 +1,48 @@ -import { extendTheme, type ThemeConfig } from "@chakra-ui/react"; +import { + extendTheme, + type ThemeConfig, + ChakraProvider, + cookieStorageManagerSSR, + localStorageManager, +} from "@chakra-ui/react"; const config: ThemeConfig = { initialColorMode: "light", useSystemColorMode: true, + disableTransitionOnChange: false, }; -const theme = extendTheme({ config }); +const styles = { + global: { + body: { + bg: "white", + }, + main: { + fontFamily: "Inter", + }, + header: { + fontFamily: "Inter", + }, + }, +}; +const theme = extendTheme({ config, styles }); + + +export function Chakra({ cookies, children }) { + const colorModeManager = typeof cookies === "string" ? cookieStorageManagerSSR(cookies) : localStorageManager; + + return {children}; +} + +// also export a reusable function getServerSideProps +export function getServerSideProps({ req }) { + return { + props: { + // first time users will not have any cookies and you may not return + // undefined here, hence ?? is necessary + cookies: req.headers.cookie ?? "", + }, + }; +} export default theme;