Merge pull request #100 from albbus-stack/theme-toggle

Added ThemeToggle component

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">

packages/ui/src/ThemeToggle.tsx

@@ -0,0 +1,29 @@
+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("system");
+
+  useIsomorphicLayoutEffect(() => {
+    setClientTheme(themeSetting.current || "system");
+  }, [themeSetting.current]);
+
+  return (
+    <Button
+      size="$4"
+      onPress={themeSetting.toggle}
+      aria-label="Toggle color scheme"
+      icon={icons[clientTheme]}
+      {...props}
+    />
+  );
+};