Add toggle dark mode.

components/info-bar/SearchBox.tsx

@@ -58,7 +58,7 @@ const SearchBox: FC = () => {
             'w-full rounded-lg outline-none relative',
             'py-5 px-12 placeholder:font-semibold',
             'focus:px-5 focus:shadow-md focus:placeholder:font-normal',
-            'duration-300 transition-all focus:z-20',
+            'transition-all focus:z-20',
             'dark:bg-rua-gray-800'
           )}
           value={state.searchQuery}

components/nav/DarkModeBtn.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import cn from 'classnames';
+import { FiSun, FiMoon } from 'react-icons/fi';
+import useDarkMode from 'lib/hooks/useDarkMode';
+
+const DarkModeBtn = () => {
+  const { isDark, toggleDark } = useDarkMode();
+
+  return (
+    <button
+      className={cn(
+        'rounded-xl p-[10px] aspect-square text-2xl',
+        'focus:shadow-outline active:bg-gray-100 transition-all',
+        'dark:text-gray-400 dark:active:bg-gray-600',
+        'hover:bg-gray-200 dark:hover:bg-rua-gray-600'
+      )}
+      onClick={() => toggleDark()}
+    >
+      {isDark ? <FiMoon /> : <FiSun />}
+    </button>
+  );
+};
+
+export default DarkModeBtn;

components/nav/NavAvatar.tsx

@@ -1,6 +1,9 @@
 import { FC } from 'react';
 import cn from 'classnames';
 import Image from 'next/image';
+import dynamic from 'next/dynamic';
+
+const DarkModeBtn = dynamic(() => import('components/nav/DarkModeBtn'));
 
 const NavAvatar: FC = () => {
   return (
@@ -8,7 +11,7 @@ const NavAvatar: FC = () => {
       <div>
         <div className="w-32 h-32 shadow-lg rounded-full relative">
           <Image
-            className="rounded-full overflow-hidden dark:brightness-75"
+            className="rounded-full overflow-hidden"
             width="128"
             height="128"
             src="/images/img/avatar.svg"
@@ -28,7 +31,10 @@ const NavAvatar: FC = () => {
           </div>
         </div>
 
-        <h1 className="text-3xl font-semibold mt-4 mb-2">肥羊</h1>
+        <div className={'flex justify-between items-center pt-4 pb-2'}>
+          <h1 className="text-3xl font-semibold">肥羊</h1>
+          <DarkModeBtn />
+        </div>
         <span className="text-gray-400">恐惧是思维杀手..</span>
       </div>
     </>

lib/hooks/useDarkMode.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+const useDarkMode = () => {
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    setIsDark(document.documentElement.classList.contains('dark'));
+  }, []);
+
+  const toggleDark = () => {
+    if (isDark) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('rua-theme', 'light');
+      setIsDark(document.documentElement.classList.contains('dark'));
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('rua-theme', 'dark');
+      setIsDark(document.documentElement.classList.contains('dark'));
+    }
+  };
+
+  return { isDark, toggleDark };
+};
+export default useDarkMode;

pages/_app.tsx

@@ -8,6 +8,7 @@ import Head from 'next/head';
 import { MDXProvider } from '@mdx-js/react';
 import dynamic from 'next/dynamic';
 import RUAStore from '../lib/store';
+import Script from 'next/script';
 
 const H2 = dynamic(() => import('components/MDX/MDXH2'));
 
@@ -37,6 +38,8 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         <meta name="author" content="Arthur,i@rua.plus" />
       </Head>
 
+      <Script src={'/js/darkMode.js'} strategy={'beforeInteractive'} />
+
       <RUAStore>
         <MDXProvider components={mdxComponents}>
           {getLayout(<Component {...pageProps} />)}

public/js/darkMode.js

@@ -0,0 +1,12 @@
+(() => {
+  const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const isDark = localStorage.getItem('rua-theme') === 'dark';
+
+  if (isDark || (!('rua-theme' in localStorage) && preferDark)) {
+    document.documentElement.classList.add('dark');
+    localStorage.setItem('rua-theme', 'dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+    localStorage.setItem('rua-theme', 'light');
+  }
+})();

styles/globals.css

@@ -8,10 +8,14 @@
 
 @layer base {
   body {
-    @apply bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200;
+    @apply bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200 transition-colors;
     font-family: "-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif", sans-serif;
   }
 
+  img, iframe {
+    @apply dark:brightness-75
+  }
+
   /* 滚动槽 */
   ::-webkit-scrollbar {
     width: 7px;

tailwind.config.js

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