From 9eeb23f27f664692c0fdde8bd02f7f8d10669beb Mon Sep 17 00:00:00 2001
From: Paul Shippy <pshippy@gmail.com>
Date: Mon, 25 May 2026 21:25:26 +0000
Subject: [PATCH 1/2] Add dark mode support to study mode

Replace hardcoded colors in study.tsx with theme-aware values using
useThemeColor. Add studyCardBack and disabled color keys to Colors.ts
for both light and dark palettes.
---
 front/app/flashcards/study.tsx | 65 +++++++++++++++++++++++-----------
 front/constants/Colors.ts      |  4 +++
 2 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/front/app/flashcards/study.tsx b/front/app/flashcards/study.tsx
index a854bef..580dbd8 100644
--- a/front/app/flashcards/study.tsx
+++ b/front/app/flashcards/study.tsx
@@ -21,6 +21,7 @@ import * as Haptics from "expo-haptics";
 
 import { fetchFlashcards, Flashcard } from "@/api/flashcards";
 import { PlatformPressable } from "@react-navigation/elements";
+import { useThemeColor } from "@/hooks/useThemeColor";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("window");
 const CARD_WIDTH = SCREEN_WIDTH - 40;
@@ -33,6 +34,14 @@ export default function Study() {
   const [isFlipped, setIsFlipped] = useState(false);
   const flip = useSharedValue(0);
 
+  const cardBackground = useThemeColor({}, "cardBackground");
+  const studyCardBack = useThemeColor({}, "studyCardBack");
+  const textColor = useThemeColor({}, "text");
+  const iconColor = useThemeColor({}, "icon");
+  const tint = useThemeColor({}, "tint");
+  const disabledColor = useThemeColor({}, "disabled");
+  const navButtonBg = useThemeColor({}, "border");
+
   useEffect(() => {
     const loadCards = async () => {
       if (!deckId) {
@@ -118,30 +127,55 @@ export default function Study() {
         onPress={flipCard}
         activeOpacity={0.9}
       >
-        <Animated.View style={[styles.card, styles.cardFront, frontAnimatedStyle]}>
-          <ThemedText style={styles.cardText}>{currentCard?.front}</ThemedText>
-          <ThemedText style={styles.tapHint}>Tap to reveal</ThemedText>
+        <Animated.View
+          style={[
+            styles.card,
+            styles.cardFront,
+            frontAnimatedStyle,
+            { backgroundColor: cardBackground },
+          ]}
+        >
+          <ThemedText style={[styles.cardText, { color: textColor }]}>
+            {currentCard?.front}
+          </ThemedText>
+          <ThemedText style={[styles.tapHint, { color: iconColor }]}>
+            Tap to reveal
+          </ThemedText>
         </Animated.View>
-        <Animated.View style={[styles.card, styles.cardBack, backAnimatedStyle]}>
-          <ThemedText style={styles.cardText}>{currentCard?.back}</ThemedText>
+        <Animated.View
+          style={[
+            styles.card,
+            styles.cardBack,
+            backAnimatedStyle,
+            { backgroundColor: studyCardBack },
+          ]}
+        >
+          <ThemedText style={[styles.cardText, { color: textColor }]}>
+            {currentCard?.back}
+          </ThemedText>
         </Animated.View>
       </TouchableOpacity>
 
       <View style={styles.navigation}>
         <PlatformPressable
-          style={[styles.navButton, currentIndex === 0 && styles.navButtonDisabled]}
+          style={[
+            styles.navButton,
+            { backgroundColor: navButtonBg },
+            currentIndex === 0 && styles.navButtonDisabled,
+          ]}
           onPress={goToPrev}
           disabled={currentIndex === 0}
         >
           <IconSymbol
             name="chevron.left"
             size={30}
-            color={currentIndex === 0 ? "#ccc" : "#03465b"}
+            color={currentIndex === 0 ? disabledColor : tint}
           />
         </PlatformPressable>
         <PlatformPressable
           style={[
             styles.navButton,
+            { backgroundColor: navButtonBg },
             currentIndex === cards.length - 1 && styles.navButtonDisabled,
           ]}
           onPress={goToNext}
@@ -150,7 +184,7 @@ export default function Study() {
           <IconSymbol
             name="chevron.right"
             size={30}
-            color={currentIndex === cards.length - 1 ? "#ccc" : "#03465b"}
+            color={currentIndex === cards.length - 1 ? disabledColor : tint}
           />
         </PlatformPressable>
       </View>
@@ -180,7 +214,6 @@ const styles = StyleSheet.create({
     position: "absolute",
     width: "100%",
     height: "100%",
-    backgroundColor: "#fff",
     borderRadius: 16,
     padding: 20,
     justifyContent: "center",
@@ -191,22 +224,16 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 5,
   },
-  cardFront: {
-    backgroundColor: "#fff",
-  },
-  cardBack: {
-    backgroundColor: "#f0f8ff",
-  },
+  cardFront: {},
+  cardBack: {},
   cardText: {
     fontSize: 20,
     textAlign: "center",
-    color: "#333",
   },
   tapHint: {
     position: "absolute",
     bottom: 20,
     fontSize: 14,
-    color: "#888",
   },
   navigation: {
     flexDirection: "row",
@@ -217,15 +244,13 @@ const styles = StyleSheet.create({
   navButton: {
     padding: 20,
     borderRadius: 30,
-    backgroundColor: "#f0f0f0",
   },
   navButtonDisabled: {
     opacity: 0.5,
   },
   emptyText: {
     fontSize: 18,
-    color: "#888",
     textAlign: "center",
     marginTop: 100,
   },
-});
\ No newline at end of file
+});
diff --git a/front/constants/Colors.ts b/front/constants/Colors.ts
index a63e7b0..acae77a 100644
--- a/front/constants/Colors.ts
+++ b/front/constants/Colors.ts
@@ -15,6 +15,8 @@ export const Colors = {
     cardBackground: '#fff',
     cardBackgroundSelected: tintColorLight,
     border: '#ccc',
+    studyCardBack: '#f0f8ff',
+    disabled: '#ccc',
   },
   dark: {
     text: '#ECEDEE',
@@ -24,5 +26,7 @@ export const Colors = {
     cardBackground: '#1C1C1E',
     cardBackgroundSelected: tintColorDark,
     border: '#444',
+    studyCardBack: '#1a2a3a',
+    disabled: '#555',
   },
 };

From 8914ceb75dfc5e44101596c7e385e5c06308a1ce Mon Sep 17 00:00:00 2001
From: Paul Shippy <pshippy@gmail.com>
Date: Mon, 25 May 2026 21:31:28 +0000
Subject: [PATCH 2/2] Fix nav button visibility in dark mode

Use dedicated navButton/navButtonIcon colors with proper contrast
instead of reusing border/tint which were too dark on dark backgrounds.
---
 front/app/flashcards/study.tsx | 8 ++++----
 front/constants/Colors.ts      | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/front/app/flashcards/study.tsx b/front/app/flashcards/study.tsx
index 580dbd8..fb2f65f 100644
--- a/front/app/flashcards/study.tsx
+++ b/front/app/flashcards/study.tsx
@@ -38,9 +38,9 @@ export default function Study() {
   const studyCardBack = useThemeColor({}, "studyCardBack");
   const textColor = useThemeColor({}, "text");
   const iconColor = useThemeColor({}, "icon");
-  const tint = useThemeColor({}, "tint");
   const disabledColor = useThemeColor({}, "disabled");
-  const navButtonBg = useThemeColor({}, "border");
+  const navButtonBg = useThemeColor({}, "navButton");
+  const navButtonIcon = useThemeColor({}, "navButtonIcon");
 
   useEffect(() => {
     const loadCards = async () => {
@@ -169,7 +169,7 @@ export default function Study() {
           <IconSymbol
             name="chevron.left"
             size={30}
-            color={currentIndex === 0 ? disabledColor : tint}
+            color={currentIndex === 0 ? disabledColor : navButtonIcon}
           />
         </PlatformPressable>
         <PlatformPressable
@@ -184,7 +184,7 @@ export default function Study() {
           <IconSymbol
             name="chevron.right"
             size={30}
-            color={currentIndex === cards.length - 1 ? disabledColor : tint}
+            color={currentIndex === cards.length - 1 ? disabledColor : navButtonIcon}
           />
         </PlatformPressable>
       </View>
diff --git a/front/constants/Colors.ts b/front/constants/Colors.ts
index acae77a..c91b042 100644
--- a/front/constants/Colors.ts
+++ b/front/constants/Colors.ts
@@ -17,6 +17,8 @@ export const Colors = {
     border: '#ccc',
     studyCardBack: '#f0f8ff',
     disabled: '#ccc',
+    navButton: '#f0f0f0',
+    navButtonIcon: '#03465b',
   },
   dark: {
     text: '#ECEDEE',
@@ -28,5 +30,7 @@ export const Colors = {
     border: '#444',
     studyCardBack: '#1a2a3a',
     disabled: '#555',
+    navButton: '#333',
+    navButtonIcon: '#00a4c9',
   },
 };