From 0db1896405d15c2dc361f6276a54f9ed471894a2 Mon Sep 17 00:00:00 2001
From: Dennis Alund <dennis.alund@gmail.com>
Date: Wed, 31 Jul 2024 10:51:36 +0800
Subject: [PATCH 1/2] Removing dark mode from header

---
 hosting/src/components/Header/index.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/hosting/src/components/Header/index.tsx b/hosting/src/components/Header/index.tsx
index 195909ce..52880fa4 100644
--- a/hosting/src/components/Header/index.tsx
+++ b/hosting/src/components/Header/index.tsx
@@ -1,4 +1,3 @@
-import DarkModeSwitcher from "@/components/Header/DarkModeSwitcher";
 import DropdownUser from "@/components/Header/DropdownUser";
 import Image from "next/image";
 import Link from "next/link";
@@ -71,9 +70,6 @@ const Header = (props: {sidebarOpen: string | boolean | undefined; setSidebarOpe
         </div>
 
         <div className="flex items-center gap-2 2xsm:gap-4">
-          <ul className="flex items-center gap-2 2xsm:gap-4">
-            <DarkModeSwitcher />
-          </ul>
           <DropdownUser />
         </div>
       </div>

From 5e2a17585542f04a4fabaae87fcb7961802e5944 Mon Sep 17 00:00:00 2001
From: Dennis Alund <dennis.alund@gmail.com>
Date: Wed, 31 Jul 2024 10:51:48 +0800
Subject: [PATCH 2/2] Adding dark mode to settings

---
 hosting/src/app/(protected)/settings/page.tsx | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/hosting/src/app/(protected)/settings/page.tsx b/hosting/src/app/(protected)/settings/page.tsx
index 6e98b7aa..b5e54004 100644
--- a/hosting/src/app/(protected)/settings/page.tsx
+++ b/hosting/src/app/(protected)/settings/page.tsx
@@ -1,12 +1,8 @@
+"use client";
 import PageHeader from "@/components/common/PageHeader";
-import {Metadata} from "next";
+import DarkModeSwitcher from "@/components/Header/DarkModeSwitcher";
 import Image from "next/image";
 
-export const metadata: Metadata = {
-  title: "Next.js Settings | TailAdmin - Next.js Dashboard Template",
-  description: "This is Next.js Settings page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
-};
-
 const Settings = () => {
   return (
     <>
@@ -127,6 +123,7 @@ const Settings = () => {
               </div>
             </div>
           </div>
+
           <div className="col-span-5 xl:col-span-2">
             <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
               <div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
@@ -184,6 +181,24 @@ const Settings = () => {
               </div>
             </div>
           </div>
+
+          <div className="col-span-5 xl:col-span-2">
+            <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
+              <div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
+                <h3 className="font-medium text-black dark:text-white">System</h3>
+              </div>
+              <div className="p-7">
+                <div className="mb-4 flex items-center gap-3">
+                  <label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="emailAddress">
+                    Dark mode
+                  </label>
+                  <div className="relative">
+                    <DarkModeSwitcher />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </>