Add dark mode and light mode switcher

playground/nextjs-app-router/components/Demo.tsx

@@ -1,9 +1,8 @@
-'use client';
+import React, { useContext, useEffect, useState } from 'react';
 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 IdentityDemo from './demo/Identity';
 import SwapDemo from './demo/Swap';
 import TransactionDemo from './demo/Transaction';
@@ -12,15 +11,31 @@ import { ActiveComponent } from './form/active-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
+          onClick={toggleDarkMode}
+          className="px-3 py-2 bg-white text-black border border-gray-300 rounded hover:bg-gray-100 transition-colors dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700"
+        >
+          {isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
+        </button>
+        <form className="grid gap-8 mt-4">
           <ActiveComponent />
           <WalletType />
           <Chain />
@@ -55,4 +70,4 @@ function Demo() {
   );
 }
 
-export default Demo;
+export default Demo;