diff --git a/apps/mochi-web/components/Header/Header.tsx b/apps/mochi-web/components/Header/Header.tsx
index c67f39fbb..ecdb7a819 100644
--- a/apps/mochi-web/components/Header/Header.tsx
+++ b/apps/mochi-web/components/Header/Header.tsx
@@ -44,7 +44,10 @@ import {
LinkSquircledSolid,
WalletAddSolid,
ScanLine,
+ MoonLine,
+ SunLine,
} from '@mochi-ui/icons'
+import { useTheme } from '~context/theme'
import NotificationList from '~cpn/NotificationList'
import clsx from 'clsx'
import { DISCORD_LINK, GITHUB_LINK, TELEGRAM_LINK } from '~envs'
@@ -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 = () => {
>
,
+ setTheme(theme === 'light' ? 'dark' : 'light')}
+ >
+ {theme === 'light' ? (
+
+ ) : (
+
+ )}
+ ,
,
]),
]
diff --git a/packages/icons/src/svg/line/moon.svg b/packages/icons/src/svg/line/moon.svg
new file mode 100644
index 000000000..3085d7b80
--- /dev/null
+++ b/packages/icons/src/svg/line/moon.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/icons/src/svg/line/sun.svg b/packages/icons/src/svg/line/sun.svg
new file mode 100644
index 000000000..ff3e9227e
--- /dev/null
+++ b/packages/icons/src/svg/line/sun.svg
@@ -0,0 +1,4 @@
+