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() {
-
+
+
+
+
🦮🐴 App Demos
diff --git a/packages/ui/src/ThemeToggle.tsx b/packages/ui/src/ThemeToggle.tsx
new file mode 100644
index 000000000..3ccdc00f8
--- /dev/null
+++ b/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 (
+
+ );
+};