add theme toggle

components/ThemeToggle.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from 'next-themes'
+import { IconButton } from './shared/Button'
+import { useState } from 'react'
+import { MoonIcon, SunIcon } from '@heroicons/react/20/solid'
+
+const ThemeToggle = () => {
+  const { setTheme } = useTheme()
+  const [isDarkTheme, setIsDarkTheme] = useState(false)
+
+  const handleToggleTheme = (isDark: boolean) => {
+    setIsDarkTheme(!isDark)
+    if (isDark) {
+      setTheme('Light')
+    } else {
+      setTheme('Dark')
+    }
+  }
+
+  return (
+    <IconButton onClick={() => handleToggleTheme(isDarkTheme)} size="medium">
+      {isDarkTheme ? (
+        <SunIcon className="h-5 w-5" />
+      ) : (
+        <MoonIcon className="h-5 w-5" />
+      )}
+    </IconButton>
+  )
+}
+
+export default ThemeToggle

components/TopBar.tsx

@@ -10,6 +10,7 @@ import { useRouter } from 'next/router'
 // import SolanaTps from './SolanaTps'
 import useOnlineStatus from 'hooks/useOnlineStatus'
 import mangoStore from '@store/mangoStore'
+import ThemeToggle from './ThemeToggle'
 
 const TopBar = () => {
   const { connected } = useWallet()
@@ -27,7 +28,7 @@ const TopBar = () => {
 
   return (
     <div className="mb-8 flex h-16 items-center justify-between px-6 shadow">
-      <div className="flex w-full items-center justify-between md:space-x-4">
+      <div className="flex w-full items-center justify-between">
         <span className="mb-0 flex items-center">
           {query.token || query.market ? (
             <button
@@ -53,7 +54,8 @@ const TopBar = () => {
             </p>
           </div>
         ) : null}
-        <div className="flex items-center">
+        <div className="flex items-center space-x-4">
+          <ThemeToggle />
           {connected ? <ConnectedMenu /> : <ConnectWalletButton />}
         </div>
       </div>