@entropy-softworks/ui 2026.8.15 → 2026.8.17

package/src/components/password-generator.tsx

@@ -157,9 +157,9 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
 
   return (
     <>
-      <View className="mb-4 rounded-lg border border-border bg-card p-4 dark:bg-neutral-900/50">
+      <View className="mb-4 rounded-lg border border-border dark:border-neutral-800 bg-card p-4 dark:bg-neutral-900/50">
         <View className="mb-3 flex-row items-center justify-between">
-          <Text className="text-sm font-medium text-muted-foreground">Generated Password</Text>
+          <Text className="text-sm font-medium text-muted-foreground dark:text-neutral-400">Generated Password</Text>
           <View className="flex-row items-center">
             <View
               className="h-2 w-2 rounded-full"
@@ -171,9 +171,9 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
           </View>
         </View>
 
-        <View className="mb-2 rounded-lg bg-background p-3">
+        <View className="mb-2 rounded-lg bg-background dark:bg-black p-3">
           <Text
-            className="font-mono text-base text-foreground"
+            className="font-mono text-base text-foreground dark:text-white"
             selectable
             numberOfLines={2}
             testID="generator-output"
@@ -187,7 +187,7 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
           {breach === "checking" ? (
             <>
               <ActivityIndicator size="small" color={isDark ? "#a3a3a3" : "#737373"} />
-              <Text className="text-xs text-muted-foreground">Checking breach database…</Text>
+              <Text className="text-xs text-muted-foreground dark:text-neutral-400">Checking breach database…</Text>
             </>
           ) : breach === "safe" ? (
             <>
@@ -203,7 +203,7 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
                 size={12}
                 color={isDark ? "#a3a3a3" : "#737373"}
               />
-              <Text className="text-xs text-muted-foreground">
+              <Text className="text-xs text-muted-foreground dark:text-neutral-400">
                 Couldn&apos;t check breaches (offline)
               </Text>
             </>
@@ -213,14 +213,14 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
         <View className="flex-row gap-2">
           <Pressable
             onPress={handleGenerate}
-            className="active:scale-98 flex-1 rounded-lg bg-primary px-4 py-3"
+            className="active:scale-98 flex-1 rounded-lg bg-primary dark:bg-white px-4 py-3"
             accessibilityRole="button"
             accessibilityLabel="Generate password"
             testID="generator-generate"
           >
             <View className="flex-row items-center justify-center">
               <Ionicons name="refresh" size={18} color={isDark ? "black" : "white"} />
-              <Text className="ml-2 font-semibold text-primary-foreground">Generate</Text>
+              <Text className="ml-2 font-semibold text-primary-foreground dark:text-black">Generate</Text>
             </View>
           </Pressable>
 
@@ -228,14 +228,14 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
             <Pressable
               onPress={handleCopy}
               disabled={!password}
-              className="active:scale-98 rounded-lg bg-secondary px-4 py-3"
+              className="active:scale-98 rounded-lg bg-secondary dark:bg-neutral-800 px-4 py-3"
               accessibilityRole="button"
               accessibilityLabel="Copy password"
               accessibilityState={{ disabled: !password }}
             >
               <View className="flex-row items-center justify-center">
                 <Ionicons name="copy-outline" size={18} color={isDark ? "white" : "black"} />
-                <Text className="ml-2 font-semibold text-foreground">Copy</Text>
+                <Text className="ml-2 font-semibold text-foreground dark:text-white">Copy</Text>
               </View>
             </Pressable>
           )}
@@ -244,27 +244,27 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
             <Pressable
               onPress={() => onSelect(password)}
               disabled={!password}
-              className="active:scale-98 rounded-lg bg-secondary px-4 py-3"
+              className="active:scale-98 rounded-lg bg-secondary dark:bg-neutral-800 px-4 py-3"
               accessibilityRole="button"
               accessibilityLabel="Use password"
               accessibilityState={{ disabled: !password }}
             >
               <View className="flex-row items-center justify-center">
                 <Ionicons name="checkmark" size={18} color={isDark ? "white" : "black"} />
-                <Text className="ml-2 font-semibold text-foreground">Use</Text>
+                <Text className="ml-2 font-semibold text-foreground dark:text-white">Use</Text>
               </View>
             </Pressable>
           )}
         </View>
       </View>
 
-      <View className="rounded-lg border border-border bg-card p-4 dark:bg-neutral-900/50">
-        <Text className="mb-4 text-base font-semibold text-foreground">Options</Text>
+      <View className="rounded-lg border border-border dark:border-neutral-800 bg-card p-4 dark:bg-neutral-900/50">
+        <Text className="mb-4 text-base font-semibold text-foreground dark:text-white">Options</Text>
 
         <View className="mb-5">
           <View className="mb-2 flex-row items-center justify-between">
-            <Text className="text-sm text-foreground">Password Length</Text>
-            <Text className="font-mono text-sm font-semibold text-primary">{length}</Text>
+            <Text className="text-sm text-foreground dark:text-white">Password Length</Text>
+            <Text className="font-mono text-sm font-semibold text-primary dark:text-white">{length}</Text>
           </View>
           <Slider
             value={length}
@@ -280,8 +280,8 @@ export const PasswordGenerator = React.memo(function PasswordGenerator({
             accessibilityRole="adjustable"
           />
           <View className="mt-1 flex-row justify-between">
-            <Text className="text-xs text-muted-foreground">8</Text>
-            <Text className="text-xs text-muted-foreground">128</Text>
+            <Text className="text-xs text-muted-foreground dark:text-neutral-400">8</Text>
+            <Text className="text-xs text-muted-foreground dark:text-neutral-400">128</Text>
           </View>
         </View>
 

package/src/components/pin-pad.tsx

@@ -107,9 +107,9 @@ export function PinPad({
             className={
               i < pin.length
                 ? error
-                  ? "h-3.5 w-3.5 rounded-full bg-destructive"
-                  : "h-3.5 w-3.5 rounded-full bg-primary"
-                : "h-3.5 w-3.5 rounded-full border-2 border-border"
+                  ? "h-3.5 w-3.5 rounded-full bg-destructive dark:bg-red-900"
+                  : "h-3.5 w-3.5 rounded-full bg-primary dark:bg-white"
+                : "h-3.5 w-3.5 rounded-full border-2 border-border dark:border-neutral-800"
             }
           />
         ))}
@@ -144,11 +144,13 @@ function Key({
   return (
     <Pressable
       onPress={onPress}
-      className="h-20 w-20 items-center justify-center rounded-full active:bg-secondary"
+      className="h-20 w-20 items-center justify-center rounded-full active:bg-secondary dark:active:bg-neutral-800"
       accessibilityRole="button"
       accessibilityLabel={label ?? "key"}
     >
-      {icon ?? <Text className="font-sans-medium text-2xl text-foreground">{label}</Text>}
+      {icon ?? (
+        <Text className="font-sans-medium text-2xl text-foreground dark:text-white">{label}</Text>
+      )}
     </Pressable>
   );
 }

package/src/components/popover.tsx

@@ -23,7 +23,7 @@ const PopoverContent = React.forwardRef<
         align={align}
         side={side}
         className={cn(
-          "z-50 w-72 rounded-lg border border-border p-4",
+          "z-50 w-72 rounded-lg border border-border dark:border-neutral-800 p-4",
           isDark ? "bg-neutral-900" : "bg-white",
           Platform.OS === "web" && "shadow-lg",
           className

package/src/components/settings-row.tsx

@@ -72,7 +72,7 @@ export function SettingsRow({
         <Text
           className={cn(
             "text-sm font-medium",
-            destructive ? "text-destructive" : "text-foreground"
+            destructive ? "text-destructive dark:text-red-900" : "text-foreground"
           )}
         >
           {label}
@@ -113,7 +113,7 @@ export function SettingsSection({ title, destructive, children }: SettingsSectio
       <Text
         className={cn(
           "mb-2 text-xs font-semibold tracking-wider",
-          destructive ? "text-destructive" : "text-muted-foreground"
+          destructive ? "text-destructive dark:text-red-900" : "text-muted-foreground dark:text-neutral-400"
         )}
       >
         {title}

package/src/screens/auth/AccountPickerScreen.tsx

@@ -47,7 +47,7 @@ export function AccountPickerScreen({
   const isDark = colorScheme === "dark";
 
   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/AuthScreen.tsx

@@ -666,7 +666,7 @@ export function AuthScreen({
                               </>
                             )}
                           </CardContent>
-                          <CardFooter className="flex-col gap-3 border-t-0 pt-0">
+                          <CardFooter className="flex-col items-stretch gap-3 border-t-0 pt-0">
                             {forgotSent ? (
                               <Button
                                 className="w-full"
@@ -908,7 +908,7 @@ export function AuthScreen({
                               )}
                             </CardContent>
 
-                            <CardFooter className="flex-col gap-3 border-t-0 pt-0">
+                            <CardFooter className="flex-col items-stretch gap-3 border-t-0 pt-0">
                               <FormError message={firstError} />
 
                               <Button

package/src/screens/auth/ConsentScreen.tsx

@@ -51,7 +51,7 @@ export function ConsentScreen({
   const isDark = colorScheme === "dark";
 
   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"
@@ -85,11 +85,11 @@ export function ConsentScreen({
               ))
             )}
             {error ? (
-              <Text className="text-sm text-destructive">{error}</Text>
+              <Text className="text-sm text-destructive dark:text-red-900">{error}</Text>
             ) : null}
           </CardContent>
 
-          <CardFooter className="flex-col gap-3 border-t-0">
+          <CardFooter className="flex-col items-stretch gap-3 border-t-0">
             <Button
               className="w-full"
               telemetryId="auth.consent.allow"

package/src/screens/auth/ErrorScreen.tsx

@@ -43,7 +43,7 @@ export function ErrorScreen({
   const isDark = colorScheme === "dark";
 
   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"
@@ -63,7 +63,7 @@ export function ErrorScreen({
           ) : null}
 
           {onRetry || onHome ? (
-            <CardFooter className="flex-col gap-3 border-t-0">
+            <CardFooter className="flex-col items-stretch gap-3 border-t-0">
               {onRetry ? (
                 <Button
                   className="w-full"

package/src/screens/auth/ExpiredLinkScreen.tsx

@@ -40,7 +40,7 @@ export function ExpiredLinkScreen({
   const isDark = colorScheme === "dark";
 
   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"
@@ -54,7 +54,7 @@ export function ExpiredLinkScreen({
           </CardHeader>
 
           {onRequestNew || onHome ? (
-            <CardFooter className="flex-col gap-3 border-t-0">
+            <CardFooter className="flex-col items-stretch gap-3 border-t-0">
               {onRequestNew ? (
                 <Button
                   className="w-full"

package/src/screens/auth/ForgotPasswordScreen.tsx

@@ -70,7 +70,7 @@ export function ForgotPasswordScreen() {
   };
 
   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"
@@ -119,7 +119,7 @@ export function ForgotPasswordScreen() {
                 />
               </CardContent>
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <Button
                   className="w-full"
                   telemetryId="auth.forgot_password.submit"
@@ -145,7 +145,7 @@ export function ForgotPasswordScreen() {
               </CardFooter>
             </>
           ) : (
-            <CardFooter className="flex-col gap-3 border-t-0">
+            <CardFooter className="flex-col items-stretch gap-3 border-t-0">
               <Button
                 className="w-full"
                 telemetryId="auth.forgot_password.push_2"

package/src/screens/auth/ImportDataScreen.tsx

@@ -55,7 +55,7 @@ export function ImportDataScreen({ renderImport }: ImportDataScreenProps = {}) {
 
   if (renderImport) {
     return (
-      <SafeAreaView className="flex-1 bg-background">
+      <SafeAreaView className="flex-1 bg-background dark:bg-black">
         <StatusBar style={isDark ? "light" : "dark"} />
         {renderImport({ onComplete: completeAndNavigate, onSkip: completeAndNavigate })}
       </SafeAreaView>
@@ -63,7 +63,7 @@ export function ImportDataScreen({ renderImport }: ImportDataScreenProps = {}) {
   }
 
   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/LoginScreen.tsx

@@ -269,7 +269,7 @@ export function LoginScreen({
 
   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"
@@ -387,7 +387,7 @@ export function LoginScreen({
                   </View>
                 </CardContent>
 
-                <CardFooter className="flex-col gap-3 border-t-0">
+                <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                   <MutedText className="text-center text-sm">
                     Don&apos;t have an account?{" "}
                     <Text

package/src/screens/auth/MfaEnrollScreen.tsx

@@ -160,7 +160,7 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
   };
 
   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"
@@ -189,7 +189,7 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
                 <CardContent className="gap-3">{authenticatorAppPromo}</CardContent>
               ) : null}
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <Button
                   className="w-full"
                   telemetryId="auth.mfa_enroll.start_setup"
@@ -293,7 +293,7 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
                 </View>
               </CardContent>
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <Button
                   className="w-full"
                   telemetryId="auth.mfa_enroll.verify_code"

package/src/screens/auth/PasskeyEnrollScreen.tsx

@@ -39,7 +39,7 @@ export function PasskeyEnrollScreen({
   const isDark = colorScheme === "dark";
 
   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"
@@ -58,7 +58,7 @@ export function PasskeyEnrollScreen({
 
           <CardContent className="gap-2">
             {error ? (
-              <Text className="text-sm text-destructive">{error}</Text>
+              <Text className="text-sm text-destructive dark:text-red-900">{error}</Text>
             ) : (
               <MutedText className="text-sm">
                 You can always add or remove passkeys later in your account
@@ -67,7 +67,7 @@ export function PasskeyEnrollScreen({
             )}
           </CardContent>
 
-          <CardFooter className="flex-col gap-3 border-t-0">
+          <CardFooter className="flex-col items-stretch gap-3 border-t-0">
             <Button
               className="w-full"
               telemetryId="auth.passkey_enroll.enroll"

package/src/screens/auth/RegisterScreen.tsx

@@ -210,7 +210,7 @@ export function RegisterScreen({
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <KeyboardAvoidingView
         behavior={Platform.OS === "ios" ? "padding" : "height"}
@@ -381,7 +381,7 @@ export function RegisterScreen({
                   </ShakeField>
                 </CardContent>
 
-                <CardFooter className="flex-col gap-3 border-t-0">
+                <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                   <MutedText className="text-center text-sm">
                     Already have an account?{" "}
                     <Text

package/src/screens/auth/ResetPasswordScreen.tsx

@@ -219,7 +219,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
   };
 
   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"
@@ -267,7 +267,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
                 </ShakeField>
               </CardContent>
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <FormError message={firstError} />
 
                 <Button
@@ -345,7 +345,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
                 </ShakeField>
               </CardContent>
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <FormError message={firstError} />
 
                 <Button

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}