From 588ad4313a0eadb8823a05411fa702736f803f04 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 29 Jul 2023 22:06:21 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20color=20scheme=20toggle=20for?=
 =?UTF-8?q?=20new=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/new-header/AvatarMenu.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/new-header/AvatarMenu.tsx b/src/components/layout/new-header/AvatarMenu.tsx
index 250c709d9..7cf10347a 100644
--- a/src/components/layout/new-header/AvatarMenu.tsx
+++ b/src/components/layout/new-header/AvatarMenu.tsx
@@ -5,6 +5,7 @@ import {
   IconInfoCircle,
   IconLogin,
   IconLogout,
+  IconMoonStars,
   IconSun,
   IconUserSearch,
 } from '@tabler/icons-react';
@@ -13,11 +14,15 @@ import { signOut, useSession } from 'next-auth/react';
 import Link from 'next/link';
 import { forwardRef } from 'react';
 import { AboutModal } from '~/components/Dashboard/Modals/AboutModal/AboutModal';
+import { useColorScheme } from '~/hooks/use-colorscheme';
 
 export const AvatarMenu = () => {
   const newVersionAvailable = '0.13.0';
   const [aboutModalOpened, aboutModal] = useDisclosure(false);
   const { data: sessionData } = useSession();
+  const { colorScheme, toggleColorScheme } = useColorScheme();
+
+  const Icon = colorScheme === 'dark' ? IconSun : IconMoonStars;
 
   return (
     <>
@@ -27,7 +32,9 @@ export const AvatarMenu = () => {
             <CurrentUserAvatar user={sessionData?.user ?? null} />
           </Menu.Target>
           <Menu.Dropdown>
-            <Menu.Item icon={<IconSun size="1rem" />}>Switch theme</Menu.Item>
+            <Menu.Item icon={<Icon size="1rem" />} onClick={toggleColorScheme}>
+              Switch theme
+            </Menu.Item>
             {sessionData?.user && (
               <>
                 <Menu.Item icon={<IconUserSearch size="1rem" />}>View Profile</Menu.Item>