From f3313a517ba09c1c5a4325c551d26f35320471d0 Mon Sep 17 00:00:00 2001
From: sam <cjsam6@yahoo.com>
Date: Wed, 26 Feb 2025 15:54:07 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20theme=20switch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/layouts/header.tsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/components/layouts/header.tsx b/components/layouts/header.tsx
index 4ead732..11958da 100644
--- a/components/layouts/header.tsx
+++ b/components/layouts/header.tsx
@@ -165,6 +165,36 @@ const Header = () => {
 
                     <div className="flex items-center justify-end space-x-1.5 ltr:ml-auto rtl:mr-auto rtl:space-x-reverse dark:text-[#d0d2d6] sm:flex-1 ltr:sm:ml-0 sm:rtl:mr-0 lg:space-x-2">
 
+                        {/* ------------------- Start Theme Switch ------------------- */}
+                        <div>
+                            {themeConfig.theme === 'light' ? (
+                                <button
+                                    className={`${
+                                        themeConfig.theme === 'light' &&
+                                        'flex items-center rounded-full bg-white-light/40 p-2 hover:bg-white-light/90 hover:text-primary dark:bg-dark/40 dark:hover:bg-dark/60'
+                                    }`}
+                                    onClick={() => dispatch(toggleTheme('dark'))}
+                                >
+                                    <IconSun />
+                                </button>
+                            ) : (
+                                ''
+                            )}
+                            {themeConfig.theme === 'dark' && (
+                                <button
+                                    className={`${
+                                        themeConfig.theme === 'dark' &&
+                                        'flex items-center rounded-full bg-white-light/40 p-2 hover:bg-white-light/90 hover:text-primary dark:bg-dark/40 dark:hover:bg-dark/60'
+                                    }`}
+                                    onClick={() => dispatch(toggleTheme('light'))}
+                                >
+                                    <IconMoon />
+                                </button>
+                            )}
+                        </div>
+                        {/* ------------------- End Theme Switch ------------------- */}
+
+
                         <div className="dropdown flex shrink-0">
                             <Dropdown
                                 offset={[0, 8]}