wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-07-15 01:00:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

reorganizing the theme configuration

Browse Source
This commit is contained in:
Lucian Petri
2022-12-29 22:46:22 +02:00
parent 2431a5207e
commit c204fbdef1
3 changed files with 46 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/pages/_app.tsx
+5 -28
View File
@@ -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(<Component {...pageProps} />);
return (
<ChakraProvider theme={theme}>
<Chakra cookies={cookies}>
<SessionProvider session={session}>{page}</SessionProvider>
</ChakraProvider>
</Chakra>
);
}
export { getServerSideProps };
export default MyApp;
website/src/pages/_document.tsx
+1 -2
View File
@@ -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() {
<link rel="shortcut icon" type="image/png" href="/images/logos/favicon.png" />
</Head>
<body className="flex h-full flex-col bg-gray-50">
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<ColorModeScript type='localStorage' />
<Main />
<NextScript />
</body>
website/src/styles/Theme.tsx
+40 -2
View File
@@ -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 <ChakraProvider theme={theme} colorModeManager={colorModeManager}>{children}</ChakraProvider>;
}
// 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;