Add dark mode with next-themes

components/DarkModeBtn.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from 'next-themes';
+import { FC, useEffect, useState } from 'react';
+import { FiMoon, FiSun } from 'react-icons/fi';
+
+const DarkModeBtn: FC = () => {
+  const [mounted, setMounted] = useState(false);
+  const { systemTheme, theme, setTheme } = useTheme();
+  // When mounted on client, now we can show the UI
+  useEffect(() => setMounted(true), []);
+
+  const currentTheme = theme === 'system' ? systemTheme : theme;
+
+  if (!mounted) return null;
+
+  return (
+    <>
+      {currentTheme === 'dark' ? (
+        <button>
+          <FiSun className="w-5 h-5" onClick={() => setTheme('light')} />
+        </button>
+      ) : (
+        <button>
+          <FiMoon className="w-5 h-5" onClick={() => setTheme('dark')} />
+        </button>
+      )}
+    </>
+  );
+};
+
+export default DarkModeBtn;

components/NavBar.tsx

@@ -2,6 +2,9 @@ import cn from 'classnames';
 import Link from 'next/link';
 import { FC, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
+import dynamic from 'next/dynamic';
+
+const DarkModeBtn = dynamic(() => import('components/DarkModeBtn'));
 
 const txtMenu = [
   {
@@ -68,6 +71,15 @@ const HeadBar: FC = () => {
                 <Link href={m.path}>{m.name}</Link>
               </li>
             ))}
+            <li
+              className={cn(
+                'mb-2 last:mb-0 md:mb-0',
+                'md:mr-4 md:last:mr-0',
+                'flex items-center'
+              )}
+            >
+              <DarkModeBtn />
+            </li>
           </ul>
         </nav>
       </header>

next.config.js

@@ -10,6 +10,9 @@ const withMDX = require('@next/mdx')({
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  // experimental: {
+  //    reactMode: 'concurrent',
+  // },
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
 };
 

package.json

@@ -13,8 +13,9 @@
     "@next/mdx": "^12.1.0",
     "classnames": "^2.3.1",
     "next": "12.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "next-themes": "^0.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-icons": "^4.3.1"
   },
   "devDependencies": {

pages/_app.tsx

@@ -1,15 +1,7 @@
 import 'styles/globals.css';
-import type { AppProps } from 'next/app';
-import { NextPage } from 'next';
-import { ReactElement, ReactNode } from 'react';
 import Head from 'next/head';
-
-type NextPageWithLayout = NextPage & {
-  getLayout?: (page: ReactElement) => ReactNode;
-};
-type AppPropsWithLayout = AppProps & {
-  Component: NextPageWithLayout;
-};
+import { AppPropsWithLayout } from 'types';
+import { ThemeProvider } from 'next-themes';
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
@@ -24,7 +16,15 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         <title>RUA</title>
       </Head>
 
-      {getLayout(<Component {...pageProps} />)}
+      <ThemeProvider
+        attribute="class"
+        storageKey="rua-theme"
+        themes={['light', 'dark']}
+        enableSystem
+        defaultTheme="system"
+      >
+        {getLayout(<Component {...pageProps} />)}
+      </ThemeProvider>
     </>
   );
 }

tailwind.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  darkMode: 'class',
   content: [
     './pages/**/*.{js,ts,jsx,tsx,md,mdx}',
     './components/**/*.{js,ts,jsx,tsx}',

types/index.ts

@@ -1,6 +1,11 @@
 import { NextPage } from 'next';
+import { AppProps } from 'next/app';
 import { ReactElement } from 'react';
 
 export type NextPageWithLayout = {
   getLayout(page: ReactElement): JSX.Element;
 } & NextPage;
+
+export type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};

yarn.lock

@@ -2088,6 +2088,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+next-themes@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.npmmirror.com/next-themes/-/next-themes-0.1.1.tgz#122113a458bf1d1be5ffed66778ab924c106f82a"
+  integrity sha512-Iqxt6rhS/KfK/iHJ0tfFjTcdLEAI0AgwFuAFrMwLOPK5e+MI3I+fzyvBoS+VaOS+NldUiazurhgwYhrfV0VXsQ==
+
 next@12.1.0:
   version "12.1.0"
   resolved "https://registry.yarnpkg.com/next/-/next-12.1.0.tgz#c33d753b644be92fc58e06e5a214f143da61dd5d"
@@ -2390,9 +2395,9 @@ quick-lru@^5.1.1:
   resolved "https://registry.npmmirror.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
-react-dom@17.0.2:
+react-dom@^17.0.2:
   version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  resolved "https://registry.npmmirror.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
   dependencies:
     loose-envify "^1.1.0"
@@ -2409,9 +2414,9 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react@17.0.2:
+react@^17.0.2:
   version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  resolved "https://registry.npmmirror.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
   dependencies:
     loose-envify "^1.1.0"
@@ -2519,7 +2524,7 @@ sade@^1.7.3:
 
 scheduler@^0.20.2:
   version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  resolved "https://registry.npmmirror.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
   integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
   dependencies:
     loose-envify "^1.1.0"