@entropy-softworks/ui 2026.8.15 → 2026.8.18

package/src/screens/auth/ServerConfigScreen.tsx

@@ -223,7 +223,7 @@ export function ServerConfigScreen({
 
   if (isLoading) {
     return (
-      <SafeAreaView className="flex-1 bg-background">
+      <SafeAreaView className="flex-1 bg-background dark:bg-black">
         <View className="flex-1 items-center justify-center">
           <ActivityIndicator size="large" color={isDark ? "white" : "black"} />
         </View>
@@ -238,7 +238,7 @@ export function ServerConfigScreen({
   ];
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style="auto" />
       <ScrollView className="flex-1">
         <View className="px-6 py-6">
@@ -247,15 +247,15 @@ export function ServerConfigScreen({
               onPress={withClickTracking("auth.server_config.back", () => router.back())}
               accessibilityRole="button"
               accessibilityLabel="Go back"
-              className="active:scale-98 h-10 w-10 items-center justify-center rounded-lg bg-secondary"
+              className="active:scale-98 h-10 w-10 items-center justify-center rounded-lg bg-secondary dark:bg-neutral-800"
             >
               <Ionicons name="close" size={24} color={isDark ? "white" : "black"} />
             </Pressable>
-            <Text className="text-lg font-semibold text-foreground">Server Configuration</Text>
+            <Text className="text-lg font-semibold text-foreground dark:text-white">Server Configuration</Text>
             <View className="h-10 w-10" />
           </View>
 
-          <View className="mb-6 rounded-lg bg-secondary p-4">
+          <View className="mb-6 rounded-lg bg-secondary dark:bg-neutral-800 p-4">
             <View className="flex-row items-start">
               <Ionicons
                 name="information-circle"
@@ -263,10 +263,10 @@ export function ServerConfigScreen({
                 color={isDark ? "#3b82f6" : "#2563eb"}
               />
               <View className="ml-3 flex-1">
-                <Text className="mb-1 text-sm font-semibold text-foreground">
+                <Text className="mb-1 text-sm font-semibold text-foreground dark:text-white">
                   Self-Hosted Server
                 </Text>
-                <Text className="text-xs text-muted-foreground">
+                <Text className="text-xs text-muted-foreground dark:text-neutral-400">
                   Configure your own {appName} server for complete control over your data. Default
                   server: {defaultUrl}
                 </Text>
@@ -275,8 +275,8 @@ export function ServerConfigScreen({
           </View>
 
           <View className="mb-6">
-            <Text className="mb-2 text-sm font-medium text-foreground">Server URL</Text>
-            <View className="flex-row items-center rounded-lg border border-border bg-background px-3 py-3">
+            <Text className="mb-2 text-sm font-medium text-foreground dark:text-white">Server URL</Text>
+            <View className="flex-row items-center rounded-lg border border-border dark:border-neutral-800 bg-background dark:bg-black px-3 py-3">
               <Ionicons
                 name="globe-outline"
                 size={20}
@@ -294,7 +294,7 @@ export function ServerConfigScreen({
                 autoCorrect={false}
                 keyboardType="url"
                 accessibilityLabel="Server URL"
-                className="ml-2 flex-1 text-base text-foreground"
+                className="ml-2 flex-1 text-base text-foreground dark:text-white"
               />
               {connectionStatus === "success" && (
                 <Ionicons name="checkmark-circle" size={20} color="#22c55e" />
@@ -310,12 +310,12 @@ export function ServerConfigScreen({
             disabled={isTestingConnection}
             accessibilityRole="button"
             accessibilityLabel="Test connection"
-            className="active:scale-98 mb-3 w-full rounded-lg border border-border bg-background px-6 py-4"
+            className="active:scale-98 mb-3 w-full rounded-lg border border-border dark:border-neutral-800 bg-background dark:bg-black px-6 py-4"
           >
             {isTestingConnection ? (
               <View className="flex-row items-center justify-center">
                 <ActivityIndicator size="small" color={isDark ? "white" : "black"} />
-                <Text className="ml-2 text-base font-semibold text-foreground">
+                <Text className="ml-2 text-base font-semibold text-foreground dark:text-white">
                   Testing Connection
                   {testAttempt > 0 ? ` (Attempt ${testAttempt}/${defaultMaxRetries})` : "..."}
                 </Text>
@@ -323,7 +323,7 @@ export function ServerConfigScreen({
             ) : (
               <View className="flex-row items-center justify-center">
                 <Ionicons name="wifi-outline" size={20} color={isDark ? "white" : "black"} />
-                <Text className="ml-2 text-base font-semibold text-foreground">
+                <Text className="ml-2 text-base font-semibold text-foreground dark:text-white">
                   Test Connection
                 </Text>
               </View>
@@ -334,11 +334,11 @@ export function ServerConfigScreen({
             onPress={withClickTracking("auth.server_config.use_default", handleUseDefault)}
             accessibilityRole="button"
             accessibilityLabel="Use default server"
-            className="active:scale-98 mb-3 w-full rounded-lg border border-border bg-background px-6 py-4"
+            className="active:scale-98 mb-3 w-full rounded-lg border border-border dark:border-neutral-800 bg-background dark:bg-black px-6 py-4"
           >
             <View className="flex-row items-center justify-center">
               <Ionicons name="cloud-outline" size={20} color={isDark ? "white" : "black"} />
-              <Text className="ml-2 text-base font-semibold text-foreground">
+              <Text className="ml-2 text-base font-semibold text-foreground dark:text-white">
                 Use Default Server
               </Text>
             </View>
@@ -348,11 +348,11 @@ export function ServerConfigScreen({
             onPress={withClickTracking("auth.server_config.clear_configuration", handleClearConfiguration)}
             accessibilityRole="button"
             accessibilityLabel="Clear all settings"
-            className="active:scale-98 mb-3 w-full rounded-lg border border-destructive bg-background px-6 py-3"
+            className="active:scale-98 mb-3 w-full rounded-lg border border-destructive dark:border-red-900 bg-background dark:bg-black px-6 py-3"
           >
             <View className="flex-row items-center justify-center">
               <Ionicons name="trash-outline" size={20} color="#ef4444" />
-              <Text className="ml-2 text-base font-medium text-destructive">
+              <Text className="ml-2 text-base font-medium text-destructive dark:text-red-900">
                 Clear All Settings
               </Text>
             </View>
@@ -362,20 +362,20 @@ export function ServerConfigScreen({
             onPress={withClickTracking("auth.server_config.save", handleSave)}
             accessibilityRole="button"
             accessibilityLabel="Save configuration"
-            className="active:scale-98 mb-6 w-full rounded-lg bg-primary px-6 py-4"
+            className="active:scale-98 mb-6 w-full rounded-lg bg-primary dark:bg-white px-6 py-4"
           >
-            <Text className="text-center text-base font-semibold text-primary-foreground">
+            <Text className="text-center text-base font-semibold text-primary-foreground dark:text-black">
               Save Configuration
             </Text>
           </Pressable>
 
-          <View className="rounded-lg bg-card p-4">
-            <Text className="mb-3 text-sm font-semibold text-foreground">Need Help?</Text>
+          <View className="rounded-lg bg-card dark:bg-neutral-900/50 p-4">
+            <Text className="mb-3 text-sm font-semibold text-foreground dark:text-white">Need Help?</Text>
             <View className="space-y-2">
               {bullets.map((bullet, idx) => (
                 <View key={idx} className="flex-row items-start">
-                  <Text className="mr-2 text-sm text-muted-foreground">•</Text>
-                  <Text className="flex-1 text-sm text-muted-foreground">{bullet}</Text>
+                  <Text className="mr-2 text-sm text-muted-foreground dark:text-neutral-400">•</Text>
+                  <Text className="flex-1 text-sm text-muted-foreground dark:text-neutral-400">{bullet}</Text>
                 </View>
               ))}
             </View>

package/src/screens/auth/VerifyEmailScreen.tsx

@@ -214,7 +214,7 @@ export function VerifyEmailScreen() {
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"

package/src/screens/auth/WelcomeScreen.tsx

@@ -30,7 +30,7 @@ export function WelcomeScreen({ decoration, topAccessory }: WelcomeScreenProps)
   const { appName, Logo, routes, tagline } = useAppConfig();
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <View className="flex-1 items-center justify-center px-6 py-8">
         {topAccessory}