feat: optimize ssr side, and add compatibility with dark mode

pages/_app.tsx

@@ -1,22 +1,21 @@
 import "./swiper.css";
 import type { AppProps } from "next/app";
 import { ApolloProvider } from "@apollo/client";
-import { ChakraProvider } from "@chakra-ui/react";
 
 import "@fontsource/lexend/500.css";
 import "@fontsource/roboto-slab/500.css";
 
+import { Chakra } from "src/context/chakra.context";
 import { useApollo } from "src/hooks/apollo";
-import theme from "theme";
 
 export default function App({ Component, pageProps }: AppProps) {
   const apolloClient = useApollo(pageProps.initialApolloState);
 
   return (
     <ApolloProvider client={apolloClient}>
-      <ChakraProvider theme={theme}>
+      <Chakra>
         <Component {...pageProps} />
-      </ChakraProvider>
+      </Chakra>
     </ApolloProvider>
   );
 }

pages/new.tsx

@@ -1,4 +1,4 @@
-import { Box, Input, VStack } from "@chakra-ui/react";
+import { Box, Input, useColorModeValue, VStack } from "@chakra-ui/react";
 import UploadImage from "components/fileUpload";
 import MainLayout from "components/layout/main.layout";
 import TagInput from "src/context/tag.context";
@@ -14,7 +14,7 @@ const NewPost = () => {
   return (
     <MainLayout title={"New Post"}>
       <Box px={4}>
-        <VStack as="form" maxW="50rem" w="full" alignItems={"stretch"} spacing={4} bg="cyan.100" p={10} mx="auto" rounded="lg">
+        <VStack as="form" maxW="50rem" w="full" alignItems={"stretch"} spacing={4} bg={useColorModeValue("cyan.100", "cyan.900")} p={10} mx="auto" rounded="lg">
           <UploadImage />
           <Input type={"text"} fontSize="5xl" size="lg" border="none" background="transparent" _focus={{ boxShadow: "none" }} placeholder="New post title here..." _placeholder={{ fontWeight: 700 }} />
           <TagInput />

src/components/editor/ImageTooltip.tsx

@@ -1,4 +1,4 @@
-import { Box, FormControl, FormLabel, HStack, Input } from "@chakra-ui/react";
+import { Box, FormControl, FormLabel, HStack, Input, useColorModeValue } from "@chakra-ui/react";
 import { commandsCtx } from "@milkdown/core";
 import { TooltipProvider, tooltipFactory } from "@milkdown/plugin-tooltip";
 import { updateImageCommand } from "@milkdown/preset-commonmark";
@@ -68,7 +68,7 @@ export const ImageTooltip: React.FC = () => {
 
   return (
     <Box display="none">
-      <HStack ref={ref} bg="gray.100" p="5" rounded="lg">
+      <HStack ref={ref} bg={useColorModeValue("gray.100", "gray.900")} p="5" rounded="lg">
         <FormControl>
           <FormLabel>Link</FormLabel>
           <Input

src/components/editor/MilkdownEditor.tsx

@@ -1,5 +1,5 @@
 import { CmdKey } from "@milkdown/core";
-import { Box, HStack, IconButton, VStack } from "@chakra-ui/react";
+import { Box, HStack, IconButton, useColorModeValue, VStack } from "@chakra-ui/react";
 import { GrUndo, GrRedo, GrBold, GrItalic, GrStrikeThrough, GrOrderedList, GrUnorderedList, GrBlockQuote } from "react-icons/gr";
 import { useMilkdownEditor } from "src/hooks/useEditor";
 import { callCommand } from "@milkdown/utils";
@@ -18,7 +18,7 @@ const MilkdownEditor: React.FC = () => {
 
   return (
     <VStack h="33rem" alignItems="stretch">
-      <Box bg="gray.50" p="3" rounded="md">
+      <Box bg={useColorModeValue("gray.50", "gray.800")} p="3" rounded="md">
         <HStack>
           <IconButton icon={<GrUndo />} aria-label="Undo" onClick={() => call(undoCommand.key)} />
           <IconButton icon={<GrRedo />} aria-label="Redo" onClick={() => call(redoCommand.key)} />
@@ -30,7 +30,7 @@ const MilkdownEditor: React.FC = () => {
           <IconButton icon={<GrBlockQuote />} aria-label="Quote" onClick={() => call(wrapInBlockquoteCommand.key)} />
         </HStack>
       </Box>
-      <Prose bg="gray.50" h="full" overflow="auto" overscroll="none" shadow="xl" rounded="xl">
+      <Prose bg={useColorModeValue("gray.50", "gray.800")} h="full" overflow="auto" overscroll="none" shadow="xl" rounded="xl">
         <Milkdown />
       </Prose>
     </VStack>

src/components/fileUpload.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useRef } from "react";
-import { Button, FormControl, FormErrorMessage, Icon, InputGroup } from "@chakra-ui/react";
+import { Button, FormControl, FormErrorMessage, Icon, InputGroup, useColorModeValue } from "@chakra-ui/react";
 import { useForm, UseFormRegisterReturn } from "react-hook-form";
 import { FiImage } from "react-icons/fi";
 
@@ -66,7 +66,7 @@ const App = () => {
     <>
       <FormControl isInvalid={!!errors.file_} isRequired>
         <FileUpload accept={"image/*"} multiple register={register("file_", { validate: validateFiles })}>
-          <Button leftIcon={<Icon as={FiImage} />} bg="gray.50">
+          <Button leftIcon={<Icon as={FiImage} />} bg={useColorModeValue("gray.50", "gray.800")}>
             Add a cover image
           </Button>
         </FileUpload>

src/components/tag/index.tsx

@@ -1,4 +1,4 @@
-import { Box, HStack, Input, Tag, TagCloseButton, TagLabel } from "@chakra-ui/react";
+import { Box, HStack, Input, Tag, TagCloseButton, TagLabel, useColorModeValue } from "@chakra-ui/react";
 
 import { Suggestion } from "./suggestion";
 import { useTag } from "src/context/tag.context";
@@ -67,7 +67,7 @@ const Tags = () => {
 
   return (
     <Box>
-      <HStack p={1} px={3} spacing={0} bg={readOnly ? "gray.100" : "gray.50"} rounded="xl" roundedBottom={suggestionTags.length || query.length ? "none" : "xl"}>
+      <HStack p={1} px={3} spacing={0} bg={useColorModeValue(readOnly ? "gray.100" : "gray.50", readOnly ? "gray.900" : "gray.800")} rounded="xl" roundedBottom={suggestionTags.length || query.length ? "none" : "xl"}>
         <StoredTags />
         <Input
           value={query}

src/components/tag/suggestion.tsx

@@ -1,4 +1,4 @@
-import { Box, VStack, Divider } from "@chakra-ui/react";
+import { Box, VStack, Divider, useColorModeValue } from "@chakra-ui/react";
 import { useEffect, useRef } from "react";
 import { useTag } from "src/context/tag.context";
 
@@ -40,7 +40,7 @@ export const Suggestion: React.FC = () => {
                 listStyleType="none"
                 p={3}
                 rounded={0}
-                bgColor={suggestionTags.indexOf(selectedTag) == index ? "gray.100" : "gray.50"}
+                bg={useColorModeValue(suggestionTags.indexOf(selectedTag) == index ? "gray.100" : "gray.50", suggestionTags.indexOf(selectedTag) == index ? "gray.900" : "gray.800")}
                 cursor="pointer"
                 key={item}
                 id={suggestionTags.indexOf(selectedTag) == index ? "selected" : undefined}
@@ -52,7 +52,7 @@ export const Suggestion: React.FC = () => {
               </Box>
             ))
           ) : (
-            <Box as={"li"} listStyleType="none" p={3} rounded={0} _hover={{ bgColor: "gray.100", cursor: "not-allowed" }}>
+            <Box as={"li"} listStyleType="none" p={3} rounded={0} _hover={{ bg: useColorModeValue("gray.100", "gray.900"), cursor: "not-allowed" }}>
               Tag not found!
             </Box>
           )}

src/context/chakra.context.tsx

@@ -0,0 +1,27 @@
+// e.g. src/Chakra.js
+// a) import `ChakraProvider` component as well as the storageManagers
+import { ChakraProvider, cookieStorageManagerSSR, localStorageManager } from "@chakra-ui/react";
+import { GetServerSidePropsContext } from "next";
+import theme from "theme";
+
+export function Chakra({ cookies, children }: { cookies?: string | undefined; children: React.ReactNode }) {
+  // b) Pass `colorModeManager` prop
+  const colorModeManager = typeof cookies === "string" ? cookieStorageManagerSSR(cookies) : localStorageManager;
+
+  return (
+    <ChakraProvider colorModeManager={colorModeManager} theme={theme}>
+      {children}
+    </ChakraProvider>
+  );
+}
+
+// also export a reusable function getServerSideProps
+export function getServerSideProps({ req }: GetServerSidePropsContext) {
+  return {
+    props: {
+      // first time users will not have any cookies and you may not return
+      // undefined here, hence ?? is necessary
+      cookies: req.headers.cookie ?? "",
+    },
+  };
+}