Add dark mode

* add dark mode switch button
* modify footer
* fix nav menu opening issue
* add paging number
* remove post card a link focus shadow
* add _document
* remove archive card border on last child
* add post image zoom margin on desktop
* add post index image
* remove TOC scroll bar on firefox

components/ArchiveCard.tsx

@@ -5,6 +5,7 @@ import Date from './DateFormater';
 import { useDispatch } from 'react-redux';
 import { setFromPath } from '../features/router/routerSlice';
 import { useRouter } from 'next/router';
+import useGetColors from '../lib/hooks/useGetColors';
 
 interface Props {
   post: AllPostsData;
@@ -14,6 +15,8 @@ const ArchiveCard: FC<Props> = ({ post }) => {
   const dispatch = useDispatch();
   const router = useRouter();
 
+  const { borderColor, headingColor } = useGetColors();
+
   const goToPost: MouseEventHandler<HTMLAnchorElement> = (e) => {
     e.preventDefault();
     dispatch(setFromPath(location.pathname));
@@ -22,18 +25,25 @@ const ArchiveCard: FC<Props> = ({ post }) => {
 
   return (
     <>
-      <Box as="article" w={['full', 'full', '55rem']}>
-        <Link href={`/posts/${post.url}`} onClick={goToPost}>
+      <Box
+        as="article"
+        w={['full', 'full', '55rem']}
+        borderBottom="1px"
+        borderColor={borderColor}
+      >
+        <Link
+          href={`/posts/${post.url}`}
+          onClick={goToPost}
+          _focus={{ boxShadow: 'unset' }}
+        >
           <Flex
             p="1.25rem"
             key={post.url}
             cursor="pointer"
-            borderBottom="1px"
-            borderColor="gray.300"
             justifyContent="space-between"
           >
             <Box>
-              <Heading mb="0.6rem" fontSize="lg">
+              <Heading mb="0.6rem" fontSize="lg" color={headingColor}>
                 {post.title}
               </Heading>
               <Date dateString={post.date} />

components/Footer.tsx

@@ -10,7 +10,7 @@ const Footer: FC = () => {
           ©{new Date().getFullYear()} 小肥羊
         </Text>
         <Text color={'gray.400'} fontSize="small">
-          Powered by Next.js ❤️
+          Powered by Next.js ❤️ Chakra UI
         </Text>
       </Flex>
     </>

components/NavBar.tsx

@@ -9,11 +9,14 @@ import {
   useDisclosure,
   Collapse,
   useMediaQuery,
+  useColorMode,
+  Button,
 } from '@chakra-ui/react';
 import UseAnimations from 'react-useanimations';
 import menu2 from 'react-useanimations/lib/menu2';
-import { FiHome, FiArchive, FiUser } from 'react-icons/fi';
+import { FiHome, FiArchive, FiUser, FiSun, FiMoon } from 'react-icons/fi';
 import Link from 'next/link';
+import useGetColors from '../lib/hooks/useGetColors';
 
 const menu = [
   {
@@ -38,17 +41,21 @@ const menu = [
 
 const NavBar: FC = () => {
   const [isLargerThan768] = useMediaQuery('(min-width: 768px)');
-  const { isOpen, onToggle } = useDisclosure();
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false });
+
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  const { boxBg, bioColor, textColor, headingColor } = useGetColors();
 
   useEffect(() => {
-    isLargerThan768 ? onToggle() : void 0;
+    if (!isOpen && isLargerThan768) onToggle();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLargerThan768]);
 
   return (
     <>
       <Box
-        color={'gray.700'}
+        color={textColor}
         w={[null, null, '120px']}
         p={['3rem 1rem 1rem 1rem', null, 'unset']}
         position={'relative'}
@@ -72,7 +79,7 @@ const NavBar: FC = () => {
             bottom={0}
             right={0}
             rounded={'full'}
-            bg="white"
+            bg={boxBg}
             h="40px"
             w="40px"
             justify="center"
@@ -82,21 +89,36 @@ const NavBar: FC = () => {
           </Flex>
         </Box>
 
-        <Heading size={'lg'} mt="0.8rem" mb="0.5rem">
-          肥羊
-        </Heading>
-        <Text color={'gray.400'}>This is bio.</Text>
+        <Flex
+          justifyContent="space-between"
+          alignItems="center"
+          mt="0.8rem"
+          mb="0.5rem"
+        >
+          <Heading color={headingColor} size={'lg'}>
+            肥羊
+          </Heading>
+          <Button
+            background="transparent"
+            fontSize={['18', null, '22']}
+            onClick={toggleColorMode}
+          >
+            {colorMode === 'light' ? <Icon as={FiSun} /> : <Icon as={FiMoon} />}
+          </Button>
+        </Flex>
+
+        <Text color={bioColor}>一条咸鱼.</Text>
 
         {/* Menu */}
         <Box mx={['-2rem', '-4rem', 'unset']}>
           <Collapse in={isOpen} animateOpacity>
             <Flex
               as="nav"
-              mt={['1.5rem', null, '2.5rem']}
+              mt={['1.5rem', null]}
               flexFlow={['column']}
               py={['1rem', null, 'unset']}
               px={['2rem', '4rem', 'unset']}
-              bg={['white', null, 'unset']}
+              bg={[boxBg, null, 'unset']}
               shadow={['card', null, 'unset']}
             >
               {menu.map((item) => {
@@ -107,7 +129,6 @@ const NavBar: FC = () => {
                       alignItems="center"
                       justifyContent={['unset', null, 'space-between']}
                       fontSize={['18', null, '22']}
-                      color="gray.600"
                       my={['0.5rem', null, '0.5rem']}
                       cursor="pointer"
                     >

components/Paging.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router';
 import { FC } from 'react';
-import { Button, Flex } from '@chakra-ui/react';
+import { Button, Flex, Text } from '@chakra-ui/react';
+import useGetColors from '../lib/hooks/useGetColors';
 
 interface Props {
   allPages: number;
@@ -11,6 +12,8 @@ const paging: FC<Props> = ({ allPages, num }) => {
   const router = useRouter();
   const startIndex = Number(num);
 
+  const { textColor } = useGetColors();
+
   const goPrev = () => {
     startIndex == 2 ? router.push('/') : router.push(`/page/${startIndex - 1}`);
   };
@@ -20,7 +23,7 @@ const paging: FC<Props> = ({ allPages, num }) => {
 
   return (
     <>
-      <Flex>
+      <Flex alignItems="center">
         {startIndex > 1 ? (
           <Button onClick={goPrev} mr={'auto'} size="lg">
             上一页
@@ -29,6 +32,10 @@ const paging: FC<Props> = ({ allPages, num }) => {
           void 0
         )}
 
+        <Text fontSize="xl" fontWeight="bold" color={textColor}>
+          {num} / {allPages}
+        </Text>
+
         {startIndex != allPages ? (
           <Button onClick={goNext} ml={'auto'} size="lg">
             下一页

components/PostCard.tsx

@@ -7,6 +7,7 @@ import { FiCalendar, FiTag } from 'react-icons/fi';
 import { useDispatch } from 'react-redux';
 import { setFromPath } from '../features/router/routerSlice';
 import { useRouter } from 'next/router';
+import useGetColors from '../lib/hooks/useGetColors';
 
 interface Props {
   post: AllPostsData;
@@ -22,18 +23,24 @@ const PostCard: FC<Props> = ({ post }) => {
     router.push(`/posts/${post.url}`);
   };
 
+  const { boxBg, textColor, headingColor } = useGetColors();
+
   return (
     <>
       <Box
         as="article"
         maxW={['full', 'full', '55rem']}
         borderRadius="10px"
-        bg="white"
+        bg={boxBg}
         overflow="hidden"
         boxShadow="card"
         mb="2.5rem"
       >
-        <Link href={`/posts/${post.url}`} onClick={goToPost}>
+        <Link
+          href={`/posts/${post.url}`}
+          onClick={goToPost}
+          _focus={{ boxShadow: 'unset' }}
+        >
           <Image
             src={post.index_img}
             maxH="18rem"
@@ -46,14 +53,18 @@ const PostCard: FC<Props> = ({ post }) => {
 
         <Box p="1.75rem" key={post.url}>
           {/* Title */}
-          <Link href={`/posts/${post.url}`} onClick={goToPost}>
-            <Heading mb="0.6rem" fontSize="22">
+          <Link
+            href={`/posts/${post.url}`}
+            onClick={goToPost}
+            _focus={{ boxShadow: 'unset' }}
+          >
+            <Heading color={headingColor} mb="0.6rem" fontSize="22">
               {post.title}
             </Heading>
           </Link>
 
           {/* Description */}
-          <Text mb="0.6rem" color="gray.600">
+          <Text mb="0.6rem" color={textColor}>
             {post.desc}
           </Text>
 

components/post/CopyButton.tsx

@@ -1,7 +1,9 @@
-import { Button, useClipboard } from '@chakra-ui/react';
+import { Button, useClipboard, useColorModeValue } from '@chakra-ui/react';
 import { FC, MouseEventHandler, useEffect, useState } from 'react';
 
 const CopyButton: FC = ({ children }) => {
+  const copyButtonTheme = useColorModeValue('teal', 'pink');
+
   // Copy code
   const [codeContent, setCodeContent] = useState('');
   const { hasCopied, onCopy } = useClipboard(codeContent);
@@ -22,7 +24,7 @@ const CopyButton: FC = ({ children }) => {
       <pre>
         <Button
           size="xs"
-          colorScheme="teal"
+          colorScheme={copyButtonTheme}
           position="absolute"
           top="5px"
           right="5px"