From 1c733055a900251a6fcbf77fbe7e8a4ce90c9e3d Mon Sep 17 00:00:00 2001
From: Paul Cramer <paulccramer@gmail.com>
Date: Tue, 27 Aug 2024 17:15:53 -0700
Subject: [PATCH] chore: added light and dark mode in Playground (#1175)

---
 .../nextjs-app-router/components/Demo.tsx     | 28 +++++++++++++++++--
 .../nextjs-app-router/tailwind.config.ts      |  2 ++
 tailwind.config.js                            |  1 +
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/playground/nextjs-app-router/components/Demo.tsx b/playground/nextjs-app-router/components/Demo.tsx
index efff0b6275..9998a1c036 100644
--- a/playground/nextjs-app-router/components/Demo.tsx
+++ b/playground/nextjs-app-router/components/Demo.tsx
@@ -3,24 +3,46 @@ import { AppContext, OnchainKitComponent } from '@/components/AppProvider';
 import { Chain } from '@/components/form/chain';
 import { PaymasterUrl } from '@/components/form/paymaster';
 import { WalletType } from '@/components/form/wallet-type';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import IdentityDemo from './demo/Identity';
 import SwapDemo from './demo/Swap';
 import TransactionDemo from './demo/Transaction';
 import WalletDemo from './demo/Wallet';
 import { ActiveComponent } from './form/active-component';
 
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO Refactor this component
 function Demo() {
   const { activeComponent } = useContext(AppContext);
+  const [isDarkMode, setIsDarkMode] = useState(true);
+
   useEffect(() => {
     console.log('Playground.activeComponent:', activeComponent);
   }, [activeComponent]);
 
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', isDarkMode);
+  }, [isDarkMode]);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+
   return (
     <>
       <div className="hidden w-1/4 min-w-120 flex-col border-r bg-background p-6 sm:flex">
         <div className="mb-12 font-semibold text-lg">OnchainKit Playground</div>
-        <form className="grid gap-8">
+        <button
+          type="button"
+          onClick={toggleDarkMode}
+          className={`rounded border px-3 py-2 transition-colors ${
+            isDarkMode
+              ? 'border-gray-600 bg-gray-800 text-white hover:bg-gray-700'
+              : 'border-gray-300 bg-white text-black hover:bg-gray-100'
+          }`}
+        >
+          {isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
+        </button>
+        <form className="mt-4 grid gap-8">
           <ActiveComponent />
           <WalletType />
           <Chain />
@@ -36,7 +58,7 @@ function Demo() {
           View Github
         </a>
       </div>
-      <div className="flex flex-1 flex-col bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]">
+      <div className="linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] flex flex-1 flex-col bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px), bg-[size:6rem_4rem]">
         <div className="flex h-full w-full flex-col justify-center">
           {activeComponent === OnchainKitComponent.Identity ? (
             <IdentityDemo />
diff --git a/playground/nextjs-app-router/tailwind.config.ts b/playground/nextjs-app-router/tailwind.config.ts
index f9a2bac218..50d7d4b26e 100644
--- a/playground/nextjs-app-router/tailwind.config.ts
+++ b/playground/nextjs-app-router/tailwind.config.ts
@@ -6,6 +6,8 @@ const config: Config = {
     './components/**/*.{js,ts,jsx,tsx,mdx}',
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
+  darkMode: ['class'],
+  safelist: ['dark'],
   theme: {
     extend: {
       backgroundImage: {
diff --git a/tailwind.config.js b/tailwind.config.js
index 3762c3625e..6f7fd72469 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{ts,tsx}'],
+  darkMode: ['class'],
   safelist: ['dark'],
   theme: {
     fontFamily: {