From 5673a2aafe0d3be4bbab4e15d0613fc3ac627a9a Mon Sep 17 00:00:00 2001
From: Waled Khatiz <waledkhatiz@waleds-air.lan>
Date: Sat, 31 Aug 2024 11:50:23 +1000
Subject: [PATCH 1/4] fix: Use system color preference

---
 src/app/globals.css | 33 +++++++++++++++++++++++++++++++++
 src/app/layout.tsx  |  1 -
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 28eb341..7833c82 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -50,6 +50,39 @@
      */
    }
 
+   [data-theme='dark'] {
+      --background: 0 0% 0%;
+      --foreground: 0 0% 98%;
+
+      --surface: rgb(23, 23, 23);
+
+      --card: 0 0% 3.9%;
+      --card-foreground: 0 0% 98%;
+
+      --popover: 0 0% 3.9%;
+      --popover-foreground: 0 0% 98%;
+
+      --primary: 0 0% 98%;
+      --primary-foreground: 0 0% 9%;
+
+      --secondary: 0 0% 14.9%;
+      --secondary-foreground: 0 0% 98%;
+
+      --muted: 0 0% 14.9%;
+      --muted-foreground: 0 0% 63.9%;
+
+      --accent: 0 0% 14.9%;
+      --accent-foreground: 0 0% 98%;
+
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 0 0% 98%;
+
+      --border: 0 0% 14.9%;
+      --input: 0 0% 14.9%;
+      --ring: 0 0% 83.1%;
+      --color-one: #6aa8e2;
+   }
+
    .dark {
       --background: 0 0% 0%;
       --foreground: 0 0% 98%;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e68eabb..99c7914 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -33,7 +33,6 @@ export default async function RootLayout({
         <NextIntlClientProvider messages={messages}>
           <ThemeProvider
             attribute="class"
-            defaultTheme="dark"
             enableSystem
             disableTransitionOnChange
           >

From 24c9e13f8167dcb708f9085bfce1611dad2a2d70 Mon Sep 17 00:00:00 2001
From: Waled Khatiz <waledkhatiz@waleds-air.lan>
Date: Sat, 31 Aug 2024 12:03:38 +1000
Subject: [PATCH 2/4] fix: css multi-selector

---
 src/app/globals.css | 37 ++-----------------------------------
 1 file changed, 2 insertions(+), 35 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 7833c82..9683b82 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -50,44 +50,11 @@
      */
    }
 
-   [data-theme='dark'] {
+   [data-theme='dark'], .dark {
       --background: 0 0% 0%;
       --foreground: 0 0% 98%;
 
-      --surface: rgb(23, 23, 23);
-
-      --card: 0 0% 3.9%;
-      --card-foreground: 0 0% 98%;
-
-      --popover: 0 0% 3.9%;
-      --popover-foreground: 0 0% 98%;
-
-      --primary: 0 0% 98%;
-      --primary-foreground: 0 0% 9%;
-
-      --secondary: 0 0% 14.9%;
-      --secondary-foreground: 0 0% 98%;
-
-      --muted: 0 0% 14.9%;
-      --muted-foreground: 0 0% 63.9%;
-
-      --accent: 0 0% 14.9%;
-      --accent-foreground: 0 0% 98%;
-
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 0 0% 98%;
-
-      --border: 0 0% 14.9%;
-      --input: 0 0% 14.9%;
-      --ring: 0 0% 83.1%;
-      --color-one: #6aa8e2;
-   }
-
-   .dark {
-      --background: 0 0% 0%;
-      --foreground: 0 0% 98%;
-
-      --surface: rgb(23, 23, 23);
+      --surface: rgb(23, 23, 23); 
 
       --card: 0 0% 3.9%;
       --card-foreground: 0 0% 98%;

From 64f07fa73da0a9479ae5fbb30759d8bd9e421f43 Mon Sep 17 00:00:00 2001
From: Waled Khatiz <waledkhatiz@waleds-air.lan>
Date: Sat, 31 Aug 2024 23:50:21 +1000
Subject: [PATCH 3/4] feat: System preferences icon

---
 src/components/mode-toggle.tsx | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
index 2d1018c..e9e45f0 100644
--- a/src/components/mode-toggle.tsx
+++ b/src/components/mode-toggle.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import {useEffect, useState} from "react";
+import { MoonIcon, SunIcon, GlobeIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 import { Button } from "./ui/button";
 import {
@@ -12,14 +12,36 @@ import {
 } from "./ui/dropdown-menu";
 
 export function ModeToggle() {
+  const [mounted, setMounted] = useState(false);
   const { theme, setTheme } = useTheme();
   const toggleTheme = () => {
-    setTheme(theme === "light" ? "dark" : "light");
+    switch (theme) {
+      case 'system':
+        setTheme("dark");
+        break;
+      case 'dark':
+        setTheme("light");
+        break;
+      case 'light':
+        setTheme('system');
+        break;
+    }
   };
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null; 
+  }
+
+  console.log(theme);
   return (
     <Button variant="ghost" size="icon" onClick={toggleTheme}>
-      <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <GlobeIcon className={`${ (theme === 'system') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
+      <SunIcon className={`${ (theme === 'light') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
+      <MoonIcon className={`${ (theme === 'dark') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
       <span className="sr-only">Toggle theme</span>
     </Button>
   );

From 26d75c5128fbbab8d1ff51044e91ca8f7d82336d Mon Sep 17 00:00:00 2001
From: Waled Khatiz <waledkhatiz@waleds-air.lan>
Date: Sun, 1 Sep 2024 00:11:27 +1000
Subject: [PATCH 4/4] feat: Switch to <Half2Icon />

---
 src/components/mode-toggle.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
index e9e45f0..7df6eb6 100644
--- a/src/components/mode-toggle.tsx
+++ b/src/components/mode-toggle.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import {useEffect, useState} from "react";
-import { MoonIcon, SunIcon, GlobeIcon } from "@radix-ui/react-icons";
+import { MoonIcon, SunIcon, Half2Icon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 import { Button } from "./ui/button";
 import {
@@ -39,7 +39,7 @@ export function ModeToggle() {
   console.log(theme);
   return (
     <Button variant="ghost" size="icon" onClick={toggleTheme}>
-      <GlobeIcon className={`${ (theme === 'system') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
+      <Half2Icon className={`${ (theme === 'system') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
       <SunIcon className={`${ (theme === 'light') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
       <MoonIcon className={`${ (theme === 'dark') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
       <span className="sr-only">Toggle theme</span>