feat: add dark mode

Author: Chocolate1999

src/components/buttons/ThemeButton.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import { useTheme } from 'next-themes';
+import * as React from 'react';
+import { FiMoon, FiSun } from 'react-icons/fi';
+
+import useLoaded from '@/hooks/useLoaded';
+
+type ThemeButtonProps = React.ComponentPropsWithoutRef<'button'>;
+
+export default function ThemeButton({ className, ...rest }: ThemeButtonProps) {
+  const { theme, setTheme } = useTheme();
+  const isLoaded = useLoaded();
+
+  return (
+    <button
+      className={clsx(className)}
+      {...rest}
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+    >
+      {theme === 'light' && isLoaded ? <FiMoon /> : <FiSun />}
+    </button>
+  );
+}

src/components/layout/Footer.tsx

@@ -1,7 +1,9 @@
+import UnderlineLink from '@/components/links/UnderlineLink';
+
 export default function Footer() {
   return (
     <footer className='mt-16 text-right text-[#b3b3b3] dark:text-gray-200'>
-      <section className='flex flex-col'>
+      <section className='flex flex-col items-end'>
         <div>
           <a
             href='https://creativecommons.org/licenses/by-nc-sa/4.0/'
@@ -17,12 +19,12 @@ export default function Footer() {
             className='pl-1'
             rel='noreferrer'
           >
-            © Chocolate
+            © Yang Chao Yi
           </a>
         </div>
-        <a href='https://beian.miit.gov.cn/' rel='noreferrer' target='_blank'>
+        <UnderlineLink href='https://beian.miit.gov.cn/'>
           湘ICP备20002952号
-        </a>
+        </UnderlineLink>
       </section>
     </footer>
   );

src/components/layout/Icon.tsx

@@ -1,7 +1,8 @@
 import { BsGithub } from 'react-icons/bs';
-import { FiSun } from 'react-icons/fi';
 import { SiBilibili } from 'react-icons/si';
 
+import ThemeButton from '@/components/buttons/ThemeButton';
+
 const Logo = () => {
   return (
     <div className='flex cursor-pointer gap-[24px] text-[22px]'>
@@ -19,7 +20,7 @@ const Logo = () => {
       >
         <SiBilibili />
       </a>
-      <FiSun />
+      <ThemeButton />
     </div>
   );
 };

src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import { AppProps } from 'next/app';
 import Router from 'next/router';
+import { ThemeProvider } from 'next-themes';
 import nProgress from 'nprogress';
 import { RecoilRoot } from 'recoil';
 
@@ -21,7 +22,9 @@ Router.events.on('routeChangeComplete', nProgress.done);
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
-      <Component {...pageProps} />
+      <ThemeProvider attribute='class' enableSystem={false}>
+        <Component {...pageProps} />
+      </ThemeProvider>
     </RecoilRoot>
   );
 }

src/pages/index.tsx

@@ -1,15 +1,11 @@
 import * as React from 'react';
-import { SiGithub, SiWechat } from 'react-icons/si';
 
-import { trackEvent } from '@/lib/analytics';
 import clsxm from '@/lib/clsxm';
 import useLoaded from '@/hooks/useLoaded';
 
 import Layout from '@/components/layout/Layout';
 import CustomLink from '@/components/links/CustomLink';
-import UnstyledLink from '@/components/links/UnstyledLink';
 import Seo from '@/components/Seo';
-import Tooltip from '@/components/Tooltip';
 
 export default function HomePage() {
   const isLoaded = useLoaded();
@@ -55,47 +51,6 @@ export default function HomePage() {
                     Learn more about me
                   </CustomLink>
                 </div>
-                <div className='flex'>
-                  <Tooltip content={<p>Chocolate1999</p>}>
-                    <div
-                      data-fade='6'
-                      className='mt-8 flex flex-wrap gap-4 gap-y-2'
-                    >
-                      <UnstyledLink
-                        href='https://github.com/Chocolate1999'
-                        className={clsxm(
-                          'inline-flex items-center gap-1 text-base font-medium',
-                          'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
-                          'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
-                          'transition-colors'
-                        )}
-                        onClick={() => {
-                          trackEvent('Social Link: Github', 'link');
-                        }}
-                      >
-                        <SiGithub className='shrink-0' />
-                      </UnstyledLink>
-                    </div>
-                  </Tooltip>
-                  <Tooltip content={<p>小狮子前端</p>}>
-                    <div
-                      data-fade='6'
-                      className='mt-8 ml-4 flex flex-wrap gap-4 gap-y-2'
-                    >
-                      <UnstyledLink
-                        href='https://github.com/Chocolate1999'
-                        className={clsxm(
-                          'inline-flex items-center gap-1 text-base font-medium',
-                          'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white',
-                          'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
-                          'transition-colors'
-                        )}
-                      >
-                        <SiWechat className='shrink-0' />
-                      </UnstyledLink>
-                    </div>
-                  </Tooltip>
-                </div>
               </div>
             </article>
           </div>