feat(website): add dark mode toggle (#14064)

packages/website/components/ThemeToggle/ThemeToggle.module.css

@@ -0,0 +1,48 @@
+/* source: https://github.com/drizzle-team/drizzle-orm-docs */
+.container {
+  cursor: pointer;
+  margin: 8px;
+  user-select: none;
+  width: 36px;
+  height: 24px;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+html[class~="dark"] .line {
+  background-color: rgba(249, 250, 251, 0.1);
+}
+
+.line {
+  height: 10px;
+  width: 32px;
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+html[class~="dark"] .circle {
+  background-color: #484848;
+}
+
+.circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background-color: rgb(229, 231, 235);
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: all ease-in-out 0.1s;
+}
+
+.dark {
+  left: 72%;
+}
+
+.light {
+  left: 16%;
+}

packages/website/components/ThemeToggle/ThemeToggle.tsx

@@ -0,0 +1,78 @@
+// source: https://github.com/drizzle-team/drizzle-orm-docs
+import React, { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+import styles from "./ThemeToggle.module.css";
+
+const ThemeToggle = () => {
+  const [isDark, setIsDark] = useState<boolean | null>(null);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setIsDark(theme === "dark");
+  }, [theme]);
+
+  useEffect(() => {
+    if (theme === "system") {
+      const isLight = document.documentElement.classList.contains("light");
+      setTheme(isLight ? "light" : "dark");
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+  return (
+    <div className={styles.container} onClick={toggleTheme}>
+      {isDark !== null && (
+        <>
+          <div className={styles.line} />
+          <div
+            className={`${styles.circle} ${
+              isDark ? styles.dark : styles.light
+            }`}
+          >
+            {isDark ? (
+              <div>
+                <svg
+                  fill="none"
+                  viewBox="2 2 20 20"
+                  width="12"
+                  height="12"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    fill="currentColor"
+                    d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+                  />
+                </svg>
+              </div>
+            ) : (
+              <div>
+                <svg
+                  fill="none"
+                  viewBox="3 3 18 18"
+                  width="12"
+                  height="12"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    fill="currentColor"
+                    d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+                  />
+                </svg>
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ThemeToggle;

packages/website/package.json

@@ -9,17 +9,17 @@
   },
   "dependencies": {
     "@vercel/analytics": "^1.0.1",
-    "next": "^13.4.6",
+    "next": "^13.4.7",
     "next-themes": "^0.2.1",
-    "nextra": "^2.7.1",
-    "nextra-theme-docs": "^2.7.1",
+    "nextra": "^2.8.0",
+    "nextra-theme-docs": "^2.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@heroicons/react": "^2.0.18",
-    "@types/node": "^20.3.1",
-    "@types/react": "^18.2.13",
+    "@types/node": "^20.3.2",
+    "@types/react": "^18.2.14",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2",

packages/website/pages/docs/guides/run-a-sepolia-node.mdx

@@ -36,11 +36,12 @@ ARCHIVE_NODE=true
 ### Complete the eth-docker quickstart
 
 Complete the eth-docker quickstart: https://eth-docker.net/Usage/QuickStart/.
-</Steps>
 
-### Harden your network
+### Harden your network (recommended)
 
 This is important especially if you `ssh` into machine or open ports to the internet (be careful about that). Here are some recommended resources: 
 - https://eth-docker.net/Usage/LinuxSecurity
 - https://www.coincashew.com/coins/overview-eth/guide-or-how-to-setup-a-validator-on-eth2-mainnet/part-i-installation/guide-or-security-best-practices-for-a-eth2-validator-beaconchain-node
 - https://tailscale.com/kb/1077/secure-server-ubuntu-18-04/ (but also see: https://danthesalmon.com/ufw-docker-tailscale/, `tailscale0` may not behave as you think)
+
+</Steps>

packages/website/theme.config.tsx

@@ -2,6 +2,7 @@ import Footer from "./components/Footer";
 import ThemedImage from "./components/ThemedImage";
 import { useConfig } from "nextra-theme-docs";
 import { useRouter } from "next/router";
+import ThemeToggle from "./components/ThemeToggle/ThemeToggle";
 
 export default {
   banner: {
@@ -15,7 +16,7 @@ export default {
   chat: {
     link: "https://discord.gg/taikoxyz",
   },
-  darkMode: true,
+  darkMode: false,
   docsRepositoryBase:
     "https://github.com/taikoxyz/taiko-mono/blob/main/packages/website",
   editLink: {
@@ -50,6 +51,12 @@ export default {
     );
   },
   logo: <ThemedImage />,
+  navbar: {
+    extraContent:
+  <>
+    <ThemeToggle />
+  </>,
+  },
   nextThemes: {
     defaultTheme: "light",
   },