#2 Implements DarkMode toggle

package.json

@@ -26,7 +26,8 @@
     "remark-gfm": "^3.0.1",
     "remark-html": "13.0.1",
     "remark-math": "^5.1.1",
-    "typescript": "^4.2.4"
+    "typescript": "^4.2.4",
+    "usehooks-ts": "^2.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.1",

pages/_app.tsx

@@ -2,10 +2,11 @@ import { AppProps } from 'next/app'
 import Head from 'next/head';
 import '../public/app.css'
 import '../public/katex.min.css'
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import Image from 'next/image';
+import { useDarkMode } from 'usehooks-ts';
 import { getSiteName } from '../lib/configuration';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
@@ -50,8 +51,7 @@ function Header({ siteName, menus, socials }: HeaderProps) {
         <Link href="/">
           <a className="site-name">{siteName}</a>
         </Link>
-        {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
-        <a className="btn-dark" />
+        <DarkModeToggleButton />
       </h1>
       <MenuNav menus={menus} />
       <SocialNav socials={socials} />
@@ -87,6 +87,28 @@ function Footer({ siteName }: { siteName: string }) {
   )
 }
 
+function DarkModeToggleButton() {
+  const { isDarkMode, toggle } = useDarkMode()
+
+  useEffect(() => {
+    const body = document.body.classList
+    if (isDarkMode) {
+      body.add('dark')
+    } else {
+      body.remove('dark')
+    }
+  }, [isDarkMode])
+
+  return (
+    <button
+      aria-label="darkMode-toggle-button"
+      type="button"
+      className="btn-dark"
+      onClick={toggle}
+    />
+  )
+}
+
 function MenuNav({ menus }: { menus: MenuProps[] }) {
   const router = useRouter()
   return (