fix: theme toggle to use classname instead of pressable state

Author: mrzachnugent

apps/showcase/components/ThemeToggle.tsx

@@ -3,7 +3,6 @@ import { setAndroidNavigationBar } from '~/lib/android-navigation-bar';
 import { MoonStar } from '~/lib/icons/MoonStar';
 import { Sun } from '~/lib/icons/Sun';
 import { useColorScheme } from '~/lib/useColorScheme';
-import { cn } from '~/lib/utils';
 
 export function ThemeToggle() {
   const { isDarkColorScheme, setColorScheme } = useColorScheme();
@@ -19,20 +18,13 @@ export function ThemeToggle() {
       onPress={toggleColorScheme}
       className='web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2'
     >
-      {({ pressed }) => (
-        <View
-          className={cn(
-            'flex-1 aspect-square pt-0.5 justify-center items-start web:px-5',
-            pressed && 'opacity-70'
-          )}
-        >
-          {isDarkColorScheme ? (
-            <MoonStar className='text-foreground' size={23} strokeWidth={1.25} />
-          ) : (
-            <Sun className='text-foreground' size={24} strokeWidth={1.25} />
-          )}
-        </View>
-      )}
+      <View className='flex-1 aspect-square pt-0.5 justify-center items-start web:px-5 active:opacity-70'>
+        {isDarkColorScheme ? (
+          <MoonStar className='text-foreground' size={23} strokeWidth={1.25} />
+        ) : (
+          <Sun className='text-foreground' size={24} strokeWidth={1.25} />
+        )}
+      </View>
     </Pressable>
   );
 }

packages/templates/starter-base/components/ThemeToggle.tsx

@@ -3,7 +3,6 @@ import { setAndroidNavigationBar } from '~/lib/android-navigation-bar';
 import { MoonStar } from '~/lib/icons/MoonStar';
 import { Sun } from '~/lib/icons/Sun';
 import { useColorScheme } from '~/lib/useColorScheme';
-import { cn } from '~/lib/utils';
 
 export function ThemeToggle() {
   const { isDarkColorScheme, setColorScheme } = useColorScheme();
@@ -19,20 +18,13 @@ export function ThemeToggle() {
       onPress={toggleColorScheme}
       className='web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2'
     >
-      {({ pressed }) => (
-        <View
-          className={cn(
-            'flex-1 aspect-square pt-0.5 justify-center items-start web:px-5',
-            pressed && 'opacity-70'
-          )}
-        >
-          {isDarkColorScheme ? (
-            <MoonStar className='text-foreground' size={23} strokeWidth={1.25} />
-          ) : (
-            <Sun className='text-foreground' size={24} strokeWidth={1.25} />
-          )}
-        </View>
-      )}
+      <View className='flex-1 aspect-square pt-0.5 justify-center items-start web:px-5 active:opacity-70'>
+        {isDarkColorScheme ? (
+          <MoonStar className='text-foreground' size={23} strokeWidth={1.25} />
+        ) : (
+          <Sun className='text-foreground' size={24} strokeWidth={1.25} />
+        )}
+      </View>
     </Pressable>
   );
 }