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;