theming + material you

src/components/sync/SyncConflictDetails.tsx

@@ -1,7 +1,8 @@
 import { StyleSheet, View } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { Text } from '@/components/Text';
-import { colors, radius, spacing } from '@/theme';
+import { radius, spacing } from '@/theme';
+import { createThemedStyles, useColors } from '@/theme/themed';
 import { formatRelativeTime } from '@/lib/format';
 import {
   buildSyncPlaylistEntryDiff,
@@ -77,6 +78,8 @@ function TrackDiffRow({
   side: 'desktop' | 'phone';
   previewResolution: DesktopSyncConflictResolution | null;
 }) {
+  const styles = useStyles();
+  const colors = useColors();
   const subtitle = [row.artist, row.album].filter((part) => part.trim().length > 0).join(' · ');
   const previewLabel = previewStatusLabel(row, side, previewResolution);
   const moveLabel = row.status === 'moved' && !previewLabel ? moveStatusLabel(row, side) : null;
@@ -125,6 +128,8 @@ function SideTrackList({
   previewResolution: DesktopSyncConflictResolution | null;
   maxRows: number;
 }) {
+  const styles = useStyles();
+  const colors = useColors();
   const rows = [...sideOnlyRows, ...movedRows].slice(0, maxRows);
   const hiddenCount = Math.max(0, sideOnlyRows.length + movedRows.length - rows.length);
   const sideName = side === 'desktop' ? 'desktop' : 'phone';
@@ -177,6 +182,8 @@ export function SyncConflictDetails({
   maxRows?: number;
   previewResolution?: DesktopSyncConflictResolution | null;
 }) {
+  const styles = useStyles();
+  const colors = useColors();
   const desktop = syncPlaylistToSnapshot(conflict.remote);
   const phone = syncPlaylistToSnapshot(conflict.local);
   const isNormal = desktop.kind === 'normal' && phone.kind === 'normal';
@@ -266,7 +273,7 @@ export function SyncConflictDetails({
   );
 }
 
-const styles = StyleSheet.create({
+const useStyles = createThemedStyles((colors) => ({
   container: {
     gap: spacing.sm,
   },
@@ -344,4 +351,4 @@ const styles = StyleSheet.create({
     padding: spacing.sm,
     gap: spacing.xs,
   },
-});
+}));

src/components/sync/SyncConflictPrompt.tsx

@@ -11,7 +11,8 @@ import { Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { router, usePathname } from 'expo-router';
 import { Text } from '@/components/Text';
-import { colors, radius, spacing } from '@/theme';
+import { radius, spacing } from '@/theme';
+import { createThemedStyles, useColors } from '@/theme/themed';
 import { formatRelativeTime } from '@/lib/format';
 import {
   buildSyncConflictResolutionPreview,
@@ -62,6 +63,8 @@ function diffLine(desktop: SyncPlaylistSnapshot, phone: SyncPlaylistSnapshot): s
 }
 
 export function SyncConflictPrompt() {
+  const styles = useStyles();
+  const colors = useColors();
   const conflicts = useDesktopSyncStore((s) => s.conflicts);
   const status = useDesktopSyncStore((s) => s.status);
   const promptVisible = useDesktopSyncStore((s) => s.conflictPromptVisible);
@@ -209,10 +212,10 @@ export function SyncConflictPrompt() {
   );
 }
 
-const styles = StyleSheet.create({
+const useStyles = createThemedStyles((colors) => ({
   backdrop: {
     flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.55)',
+    backgroundColor: colors.backdrop,
     alignItems: 'center',
     justifyContent: 'center',
     padding: spacing.xl,
@@ -311,4 +314,4 @@ const styles = StyleSheet.create({
   disabled: {
     opacity: 0.5,
   },
-});
+}));