From 3563f5405e444bd591e87b0f17caf5db3b134889 Mon Sep 17 00:00:00 2001
From: Alberto Del Buono Paolini <alberto.delbuonopaolini@gmail.com>
Date: Wed, 1 Nov 2023 18:16:50 +0000
Subject: [PATCH 1/2] Added theme toggle component

---
 packages/app/features/home/screen.tsx |  6 ++++-
 packages/ui/src/ThemeToggle.tsx       | 38 +++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/ThemeToggle.tsx

diff --git a/packages/app/features/home/screen.tsx b/packages/app/features/home/screen.tsx
index c13ac8edf..0bf70a900 100644
--- a/packages/app/features/home/screen.tsx
+++ b/packages/app/features/home/screen.tsx
@@ -20,6 +20,7 @@ import { SolitoImage } from 'solito/image'
 import { trpc } from 'app/utils/trpc'
 import { useSupabase } from 'app/utils/supabase/hooks/useSupabase'
 import { useUser } from 'app/utils/supabase/hooks/useUser'
+import { ThemeToggle } from '@t4/ui/src/ThemeToggle'
 
 export function HomeScreen() {
   const utils = trpc.useContext()
@@ -77,7 +78,10 @@ export function HomeScreen() {
           </Anchor>
         </Paragraph>
 
-        <Button onPress={() => Linking.openURL('https://t4stack.com/')}>Learn More...</Button>
+        <XStack gap="$5">
+          <Button onPress={() => Linking.openURL('https://t4stack.com/')}>Learn More...</Button>
+          <ThemeToggle/>
+        </XStack>
 
         <H3>🦮🐴 App Demos</H3>
         <YStack space="$2">
diff --git a/packages/ui/src/ThemeToggle.tsx b/packages/ui/src/ThemeToggle.tsx
new file mode 100644
index 000000000..d69db72f5
--- /dev/null
+++ b/packages/ui/src/ThemeToggle.tsx
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { useThemeSetting } from "@tamagui/next-theme";
+import { Monitor, Sun, Moon } from "@tamagui/lucide-icons";
+import type { ButtonProps } from "tamagui";
+import { Button, useIsomorphicLayoutEffect } from "tamagui";
+
+const icons = {
+  system: Monitor,
+  light: Sun,
+  dark: Moon
+}
+export const ThemeToggle = (props: ButtonProps) => {
+  const themeSetting = useThemeSetting()!;
+  const [clientTheme, setClientTheme] = useState<string>("system");
+
+  useIsomorphicLayoutEffect(() => {
+    if (themeSetting.resolvedTheme !== "system") {
+      document
+        .querySelector("#theme-color")
+        ?.setAttribute(
+          "content",
+          themeSetting.resolvedTheme === "light" ? "#fff" : "#050505"
+        );
+    }
+
+    setClientTheme(themeSetting.current || "system");
+  }, [themeSetting.current, themeSetting.resolvedTheme]);
+
+  return (
+    <Button
+      size="$4"
+      onPress={themeSetting.toggle}
+      {...props}
+      aria-label="Toggle color scheme"
+      icon={icons[clientTheme]}
+    />
+  );
+};

From 99b0ac2101a8b9c024fc90456887c8ba80684025 Mon Sep 17 00:00:00 2001
From: Alberto Del Buono Paolini <alberto.delbuonopaolini@gmail.com>
Date: Wed, 1 Nov 2023 18:28:25 +0000
Subject: [PATCH 2/2] Cleaned up theme toggle component

---
 packages/ui/src/ThemeToggle.tsx | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/ThemeToggle.tsx b/packages/ui/src/ThemeToggle.tsx
index d69db72f5..3ccdc00f8 100644
--- a/packages/ui/src/ThemeToggle.tsx
+++ b/packages/ui/src/ThemeToggle.tsx
@@ -11,28 +11,19 @@ const icons = {
 }
 export const ThemeToggle = (props: ButtonProps) => {
   const themeSetting = useThemeSetting()!;
-  const [clientTheme, setClientTheme] = useState<string>("system");
+  const [clientTheme, setClientTheme] = useState("system");
 
   useIsomorphicLayoutEffect(() => {
-    if (themeSetting.resolvedTheme !== "system") {
-      document
-        .querySelector("#theme-color")
-        ?.setAttribute(
-          "content",
-          themeSetting.resolvedTheme === "light" ? "#fff" : "#050505"
-        );
-    }
-
     setClientTheme(themeSetting.current || "system");
-  }, [themeSetting.current, themeSetting.resolvedTheme]);
+  }, [themeSetting.current]);
 
   return (
     <Button
       size="$4"
       onPress={themeSetting.toggle}
-      {...props}
       aria-label="Toggle color scheme"
       icon={icons[clientTheme]}
+      {...props}
     />
   );
 };