fix: tweak

apps/mochi-web/components/Header/Header.tsx

@@ -44,6 +44,8 @@ import {
   LinkSquircledSolid,
   WalletAddSolid,
   ScanLine,
+  MoonLine,
+  SunLine,
 } from '@mochi-ui/icons'
 import NotificationList from '~cpn/NotificationList'
 import clsx from 'clsx'
@@ -57,6 +59,7 @@ import { useFetchChangelogLatest } from '~hooks/app/useFetchChangelogLatest'
 import { MobileNavAccordionItem } from './MobileNavAccordionItem'
 import { DashboardMobileSidebar } from './DashboardMobileSidebar'
 import { useIsNavOpenStore } from './util'
+import { useTheme } from '~context/theme'
 
 const authenticatedRoute = [
   ROUTES.MY_PROFILE,
@@ -95,6 +98,7 @@ export const Header = () => {
   const { profile, isLoggedIn, socials } = useLoginWidget()
   const { setIsNavOpen } = useIsNavOpenStore()
   const { data: changelogData } = useFetchChangelogLatest()
+  const { theme, setTheme } = useTheme()
 
   const redirectToTipWidget = useCallback(async () => {
     if (pathname !== ROUTES.HOME) {
@@ -467,6 +471,20 @@ export const Header = () => {
           >
             <div className="w-full h-6 bg-[#eeedec]" />
           </div>,
+          <IconButton
+            label="dark/light mode toggle button"
+            key="dark/light mode toggle"
+            variant="outline"
+            color="neutral"
+            className="!p-1.5"
+            onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+          >
+            {theme === 'light' ? (
+              <MoonLine className="w-5 h-5" />
+            ) : (
+              <SunLine className="w-5 h-5" />
+            )}
+          </IconButton>,
           <LoginPopover key="desktop-login-popover" />,
         ]),
   ]