feat: 添加饮水设置页面，支持每日饮水目标和快速添加默认值的配置

app/(tabs)/_layout.tsx

@@ -1,8 +1,8 @@
+import type { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
 import * as Haptics from 'expo-haptics';
 import { Tabs, usePathname } from 'expo-router';
 import React from 'react';
 import { Text, TouchableOpacity, View, ViewStyle } from 'react-native';
-import type { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
 
 import { IconSymbol } from '@/components/ui/IconSymbol';
 import { Colors } from '@/constants/Colors';
@@ -18,7 +18,7 @@ type TabConfig = {
 
 const TAB_CONFIGS: Record<string, TabConfig> = {
   statistics: { icon: 'chart.pie.fill', title: '健康' },
-  explore: { icon: 'magnifyingglass.circle.fill', title: '发现' },
+  // explore: { icon: 'magnifyingglass.circle.fill', title: '发现' },
   goals: { icon: 'flag.fill', title: '习惯' },
   personal: { icon: 'person.fill', title: '个人' },
 };
@@ -35,7 +35,7 @@ export default function TabLayout() {
       goals: ROUTES.TAB_GOALS,
       statistics: ROUTES.TAB_STATISTICS,
     };
-    
+
     return routeMap[routeName] === pathname || pathname.includes(routeName);
   };
 
@@ -43,11 +43,11 @@ export default function TabLayout() {
   const createTabButton = (routeName: string) => (props: any) => {
     const { onPress } = props;
     const tabConfig = TAB_CONFIGS[routeName];
-    
+
     if (!tabConfig) return null;
-    
+
     const isSelected = isTabSelected(routeName);
-    
+
     const handlePress = (event: any) => {
       if (process.env.EXPO_OS === 'ios') {
         Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

app/_layout.tsx

@@ -8,11 +8,11 @@ import 'react-native-reanimated';
 import PrivacyConsentModal from '@/components/PrivacyConsentModal';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { clearAiCoachSessionCache } from '@/services/aiCoachSession';
+import { backgroundTaskManager } from '@/services/backgroundTaskManager';
 import { notificationService } from '@/services/notifications';
 import { store } from '@/store';
 import { rehydrateUser, setPrivacyAgreed } from '@/store/userSlice';
 import { MoodNotificationHelpers, NutritionNotificationHelpers } from '@/utils/notificationHelpers';
-import { backgroundTaskManager } from '@/services/backgroundTaskManager';
 import React from 'react';
 import RNExitApp from 'react-native-exit-app';
 
@@ -140,6 +140,7 @@ export default function RootLayout() {
                 <Stack.Screen name="legal/user-agreement" options={{ headerShown: true, title: '用户协议' }} />
                 <Stack.Screen name="legal/privacy-policy" options={{ headerShown: true, title: '隐私政策' }} />
                 <Stack.Screen name="article/[id]" options={{ headerShown: false }} />
+                <Stack.Screen name="water-settings" options={{ headerShown: false }} />
                 <Stack.Screen name="+not-found" />
               </Stack>
               <StatusBar style="dark" />

app/water-settings.tsx

@@ -0,0 +1,661 @@
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { useWaterDataByDate } from '@/hooks/useWaterData';
+import { getQuickWaterAmount, setQuickWaterAmount } from '@/utils/userPreferences';
+import { Ionicons } from '@expo/vector-icons';
+import { Picker } from '@react-native-picker/picker';
+import { Image } from 'expo-image';
+import { router, useLocalSearchParams } from 'expo-router';
+import React, { useEffect, useState } from 'react';
+import {
+  Alert,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View
+} from 'react-native';
+import { Swipeable } from 'react-native-gesture-handler';
+
+import { HeaderBar } from '@/components/ui/HeaderBar';
+import dayjs from 'dayjs';
+
+interface WaterSettingsProps {
+  selectedDate?: string;
+}
+
+const WaterSettings: React.FC<WaterSettingsProps> = () => {
+  const { selectedDate } = useLocalSearchParams<{ selectedDate?: string }>();
+  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
+  const colorTokens = Colors[theme];
+
+  const [dailyGoal, setDailyGoal] = useState<string>('2000');
+  const [quickAddAmount, setQuickAddAmount] = useState<string>('250');
+
+  // 编辑弹窗状态
+  const [goalModalVisible, setGoalModalVisible] = useState(false);
+  const [quickAddModalVisible, setQuickAddModalVisible] = useState(false);
+
+  // 临时选中值
+  const [tempGoal, setTempGoal] = useState<number>(parseInt(dailyGoal));
+  const [tempQuickAdd, setTempQuickAdd] = useState<number>(parseInt(quickAddAmount));
+
+  // 使用新的 hook 来处理指定日期的饮水数据
+  const { waterRecords, dailyWaterGoal, updateWaterGoal, removeWaterRecord } = useWaterDataByDate(selectedDate);
+
+  const goalPresets = [1500, 2000, 2500, 3000, 3500, 4000];
+  const quickAddPresets = [100, 150, 200, 250, 300, 350, 400, 500];
+
+
+  // 打开饮水目标弹窗时初始化临时值
+  const openGoalModal = () => {
+    setTempGoal(parseInt(dailyGoal));
+    setGoalModalVisible(true);
+  };
+
+  // 打开快速添加弹窗时初始化临时值
+  const openQuickAddModal = () => {
+    setTempQuickAdd(parseInt(quickAddAmount));
+    setQuickAddModalVisible(true);
+  };
+
+  // 处理饮水目标确认
+  const handleGoalConfirm = async () => {
+    setDailyGoal(tempGoal.toString());
+    setGoalModalVisible(false);
+
+    try {
+      const success = await updateWaterGoal(tempGoal);
+      if (!success) {
+        Alert.alert('设置失败', '无法保存饮水目标，请重试');
+      }
+    } catch {
+      Alert.alert('设置失败', '无法保存饮水目标，请重试');
+    }
+  };
+
+  // 处理快速添加默认值确认
+  const handleQuickAddConfirm = async () => {
+    setQuickAddAmount(tempQuickAdd.toString());
+    setQuickAddModalVisible(false);
+
+    try {
+      await setQuickWaterAmount(tempQuickAdd);
+    } catch {
+      Alert.alert('设置失败', '无法保存快速添加默认值，请重试');
+    }
+  };
+
+
+  // 删除饮水记录
+  const handleDeleteRecord = async (recordId: string) => {
+    await removeWaterRecord(recordId);
+  };
+
+  // 加载用户偏好设置和当前饮水目标
+  useEffect(() => {
+    const loadUserPreferences = async () => {
+      try {
+        const amount = await getQuickWaterAmount();
+        setQuickAddAmount(amount.toString());
+
+        // 设置当前的饮水目标
+        if (dailyWaterGoal) {
+          setDailyGoal(dailyWaterGoal.toString());
+        }
+      } catch (error) {
+        console.error('加载用户偏好设置失败:', error);
+      }
+    };
+
+    loadUserPreferences();
+  }, [dailyWaterGoal]);
+
+  // 当dailyGoal或quickAddAmount更新时，同步更新临时状态
+  useEffect(() => {
+    setTempGoal(parseInt(dailyGoal));
+  }, [dailyGoal]);
+
+  useEffect(() => {
+    setTempQuickAdd(parseInt(quickAddAmount));
+  }, [quickAddAmount]);
+
+  // 新增：饮水记录卡片组件
+  const WaterRecordCard = ({ record, onDelete }: { record: any; onDelete: () => void }) => {
+    const swipeableRef = React.useRef<Swipeable>(null);
+
+    // 处理删除操作
+    const handleDelete = () => {
+      Alert.alert(
+        '确认删除',
+        '确定要删除这条饮水记录吗？此操作无法撤销。',
+        [
+          {
+            text: '取消',
+            style: 'cancel',
+          },
+          {
+            text: '删除',
+            style: 'destructive',
+            onPress: () => {
+              onDelete();
+              swipeableRef.current?.close();
+            },
+          },
+        ]
+      );
+    };
+
+    // 渲染右侧删除按钮
+    const renderRightActions = () => {
+      return (
+        <TouchableOpacity
+          style={styles.deleteSwipeButton}
+          onPress={handleDelete}
+          activeOpacity={0.8}
+        >
+          <Ionicons name="trash" size={20} color="#FFFFFF" />
+          <Text style={styles.deleteSwipeButtonText}>删除</Text>
+        </TouchableOpacity>
+      );
+    };
+
+    return (
+      <View style={styles.recordCardContainer}>
+        <Swipeable
+          ref={swipeableRef}
+          renderRightActions={renderRightActions}
+          rightThreshold={40}
+          overshootRight={false}
+        >
+          <View style={[styles.recordCard, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
+            <View style={styles.recordMainContent}>
+              <View style={[styles.recordIconContainer, { backgroundColor: colorTokens.background }]}>
+                <Image
+                  source={require('@/assets/images/icons/IconGlass.png')}
+                  style={styles.recordIcon}
+                />
+              </View>
+              <View style={styles.recordInfo}>
+                <Text style={[styles.recordLabel, { color: colorTokens.text }]}>水</Text>
+                <View style={styles.recordTimeContainer}>
+                  <Ionicons name="time-outline" size={14} color={colorTokens.textSecondary} />
+                  <Text style={[styles.recordTimeText, { color: colorTokens.textSecondary }]}>
+                    {dayjs(record.recordedAt || record.createdAt).format('HH:mm')}
+                  </Text>
+                </View>
+              </View>
+              <View style={styles.recordAmountContainer}>
+                <Text style={[styles.recordAmount, { color: colorTokens.text }]}>{record.amount}ml</Text>
+              </View>
+            </View>
+            {record.note && (
+              <Text style={[styles.recordNote, { color: colorTokens.textSecondary }]}>{record.note}</Text>
+            )}
+          </View>
+        </Swipeable>
+      </View>
+    );
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: colorTokens.background }]}>
+      <HeaderBar
+        title="饮水设置"
+        onBack={() => {
+          // 这里会通过路由自动处理返回
+          router.back();
+        }}
+      />
+
+      <KeyboardAvoidingView
+        style={styles.keyboardAvoidingView}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+        >
+          {/* 第一部分：饮水配置 */}
+          <View style={styles.section}>
+            <Text style={[styles.sectionTitle, { color: colorTokens.text }]}>饮水配置</Text>
+
+            {/* 设置目标部分 */}
+            <TouchableOpacity
+              style={[styles.settingRow, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}
+              onPress={openGoalModal}
+              activeOpacity={0.8}
+            >
+              <View style={styles.settingLeft}>
+                <Text style={[styles.settingTitle, { color: colorTokens.text }]}>每日饮水目标</Text>
+                <Text style={[styles.settingValue, { color: colorTokens.textSecondary }]}>{dailyGoal}ml</Text>
+              </View>
+              <View style={styles.settingRight}>
+                <Ionicons name="chevron-forward" size={16} color={colorTokens.icon} />
+              </View>
+            </TouchableOpacity>
+
+            {/* 快速添加默认值设置部分 */}
+            <TouchableOpacity
+              style={[styles.settingRow, { backgroundColor: colorTokens.pageBackgroundEmphasis, marginTop: 24 }]}
+              onPress={openQuickAddModal}
+              activeOpacity={0.8}
+            >
+              <View style={styles.settingLeft}>
+                <Text style={[styles.settingTitle, { color: colorTokens.text }]}>快速添加默认值</Text>
+                <Text style={[styles.settingSubtitle, { color: colorTokens.textSecondary }]}>
+                  设置点击右上角"+"按钮时添加的默认饮水量
+                </Text>
+                <Text style={[styles.settingValue, { color: colorTokens.textSecondary }]}>{quickAddAmount}ml</Text>
+              </View>
+              <View style={styles.settingRight}>
+                <Ionicons name="chevron-forward" size={16} color={colorTokens.icon} />
+              </View>
+            </TouchableOpacity>
+
+          </View>
+
+          {/* 第二部分：饮水记录 */}
+          <View style={styles.section}>
+            <Text style={[styles.sectionTitle, { color: colorTokens.text }]}>
+              {selectedDate ? dayjs(selectedDate).format('MM月DD日') : '今日'}饮水记录
+            </Text>
+
+            {waterRecords && waterRecords.length > 0 ? (
+              <View style={styles.recordsList}>
+                {waterRecords.map((record) => (
+                  <WaterRecordCard
+                    key={record.id}
+                    record={record}
+                    onDelete={() => handleDeleteRecord(record.id)}
+                  />
+                ))}
+
+                {/* 总计显示 */}
+                <View style={[styles.recordsSummary, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
+                  <Text style={[styles.summaryText, { color: colorTokens.text }]}>
+                    总计：{waterRecords.reduce((sum, record) => sum + record.amount, 0)}ml
+                  </Text>
+                  <Text style={[styles.summaryGoal, { color: colorTokens.textSecondary }]}>
+                    目标：{dailyWaterGoal}ml
+                  </Text>
+                </View>
+              </View>
+            ) : (
+              <View style={styles.noRecordsContainer}>
+                <Ionicons name="water-outline" size={48} color={colorTokens.textSecondary} />
+                <Text style={[styles.noRecordsText, { color: colorTokens.textSecondary }]}>暂无饮水记录</Text>
+                <Text style={[styles.noRecordsSubText, { color: colorTokens.textSecondary }]}>点击&quot;添加记录&quot;开始记录饮水量</Text>
+              </View>
+            )}
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+
+      {/* 饮水目标编辑弹窗 */}
+      <Modal
+        visible={goalModalVisible}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setGoalModalVisible(false)}
+      >
+        <Pressable style={styles.modalBackdrop} onPress={() => setGoalModalVisible(false)} />
+        <View style={styles.modalSheet}>
+          <View style={styles.modalHandle} />
+          <Text style={[styles.modalTitle, { color: colorTokens.text }]}>每日饮水目标</Text>
+          <View style={styles.pickerContainer}>
+            <Picker
+              selectedValue={tempGoal}
+              onValueChange={(value) => setTempGoal(value)}
+              style={styles.picker}
+            >
+              {Array.from({ length: 96 }, (_, i) => 500 + i * 100).map(goal => (
+                <Picker.Item key={goal} label={`${goal}ml`} value={goal} />
+              ))}
+            </Picker>
+          </View>
+          <View style={styles.modalActions}>
+            <Pressable
+              onPress={() => setGoalModalVisible(false)}
+              style={[styles.modalBtn, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}
+            >
+              <Text style={[styles.modalBtnText, { color: colorTokens.text }]}>取消</Text>
+            </Pressable>
+            <Pressable
+              onPress={handleGoalConfirm}
+              style={[styles.modalBtn, styles.modalBtnPrimary, { backgroundColor: colorTokens.primary }]}
+            >
+              <Text style={[styles.modalBtnText, styles.modalBtnTextPrimary, { color: colorTokens.onPrimary }]}>确定</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
+
+      {/* 快速添加默认值编辑弹窗 */}
+      <Modal
+        visible={quickAddModalVisible}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setQuickAddModalVisible(false)}
+      >
+        <Pressable style={styles.modalBackdrop} onPress={() => setQuickAddModalVisible(false)} />
+        <View style={styles.modalSheet}>
+          <View style={styles.modalHandle} />
+          <Text style={[styles.modalTitle, { color: colorTokens.text }]}>快速添加默认值</Text>
+          <View style={styles.pickerContainer}>
+            <Picker
+              selectedValue={tempQuickAdd}
+              onValueChange={(value) => setTempQuickAdd(value)}
+              style={styles.picker}
+            >
+              {Array.from({ length: 41 }, (_, i) => 50 + i * 10).map(amount => (
+                <Picker.Item key={amount} label={`${amount}ml`} value={amount} />
+              ))}
+            </Picker>
+          </View>
+          <View style={styles.modalActions}>
+            <Pressable
+              onPress={() => setQuickAddModalVisible(false)}
+              style={[styles.modalBtn, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}
+            >
+              <Text style={[styles.modalBtnText, { color: colorTokens.text }]}>取消</Text>
+            </Pressable>
+            <Pressable
+              onPress={handleQuickAddConfirm}
+              style={[styles.modalBtn, styles.modalBtnPrimary, { backgroundColor: colorTokens.primary }]}
+            >
+              <Text style={[styles.modalBtnText, styles.modalBtnTextPrimary, { color: colorTokens.onPrimary }]}>确定</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  keyboardAvoidingView: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    padding: 20,
+  },
+  section: {
+    marginBottom: 32,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    marginBottom: 20,
+    letterSpacing: -0.5,
+  },
+  subsectionTitle: {
+    fontSize: 16,
+    fontWeight: '500',
+    marginBottom: 12,
+    letterSpacing: -0.3,
+  },
+  sectionSubtitle: {
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 18,
+  },
+  input: {
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    fontSize: 16,
+    fontWeight: '500',
+    marginBottom: 16,
+  },
+  settingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 16,
+  },
+  settingLeft: {
+    flex: 1,
+  },
+  settingTitle: {
+    fontSize: 16,
+    fontWeight: '500',
+    marginBottom: 4,
+  },
+  settingSubtitle: {
+    fontSize: 14,
+    marginBottom: 8,
+  },
+  settingValue: {
+    fontSize: 16,
+  },
+  settingRight: {
+    marginLeft: 12,
+  },
+  quickAmountsContainer: {
+    marginBottom: 15,
+  },
+  quickAmountsWrapper: {
+    flexDirection: 'row',
+    gap: 10,
+    paddingRight: 10,
+  },
+  quickAmountButton: {
+    paddingHorizontal: 20,
+    paddingVertical: 8,
+    borderRadius: 20,
+    minWidth: 70,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  quickAmountText: {
+    fontSize: 15,
+    fontWeight: '500',
+  },
+  saveButton: {
+    paddingVertical: 14,
+    borderRadius: 12,
+    alignItems: 'center',
+    marginTop: 24,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  saveButtonText: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  // 饮水记录相关样式
+  recordsList: {
+    gap: 12,
+  },
+  recordCardContainer: {
+    // iOS 阴影效果
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    // Android 阴影效果
+    elevation: 2,
+  },
+  recordCard: {
+    borderRadius: 12,
+    padding: 10,
+  },
+  recordMainContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  recordIconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  recordIcon: {
+    width: 20,
+    height: 20,
+  },
+  recordInfo: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  recordLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  recordTimeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  recordAmountContainer: {
+    alignItems: 'flex-end',
+  },
+  recordAmount: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  deleteSwipeButton: {
+    backgroundColor: '#EF4444',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 80,
+    borderRadius: 12,
+    marginLeft: 8,
+  },
+  deleteSwipeButtonText: {
+    color: '#FFFFFF',
+    fontSize: 12,
+    fontWeight: '600',
+    marginTop: 4,
+  },
+  recordTimeText: {
+    fontSize: 12,
+    fontWeight: '400',
+  },
+  recordNote: {
+    marginTop: 8,
+    fontSize: 14,
+    fontStyle: 'italic',
+    lineHeight: 20,
+  },
+  recordsSummary: {
+    marginTop: 20,
+    padding: 16,
+    borderRadius: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  summaryText: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  summaryGoal: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  noRecordsContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 40,
+    gap: 12,
+  },
+  noRecordsText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  noRecordsSubText: {
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  modalBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+  modalSheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    padding: 16,
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    // iOS 阴影效果
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    // Android 阴影效果
+    elevation: 16,
+  },
+  modalHandle: {
+    width: 36,
+    height: 4,
+    backgroundColor: '#E0E0E0',
+    borderRadius: 2,
+    alignSelf: 'center',
+    marginBottom: 20,
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  pickerContainer: {
+    height: 200,
+    marginBottom: 20,
+  },
+  picker: {
+    height: 200,
+  },
+  modalActions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 12,
+  },
+  modalBtn: {
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 10,
+    minWidth: 80,
+    alignItems: 'center',
+  },
+  modalBtnPrimary: {
+    // backgroundColor will be set dynamically
+  },
+  modalBtnText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  modalBtnTextPrimary: {
+    // color will be set dynamically
+  },
+});
+
+export default WaterSettings;