인프런 커뮤니티 질문&답변

다크모드를 어떻게 적용시킬까 고민하다가, 찾아보니 theme이라는 프로퍼티를 사용해서 아래와 같이 코드를 작성하면 다크모드가 적용이 됩니다!!

import {colors} from '@/constants';
import useThemeStore from '@/store/useThemeStore';
import {ThemeMode} from '@/types/common';
import React from 'react';
import {
  StyleSheet,
  View,
  Modal,
  SafeAreaView,
  Pressable,
  Text,
} from 'react-native';
import DatePicker from 'react-native-date-picker';

interface DatePickerOptionProps {
  isVisible: boolean;
  date: Date;
  onChangeDate: (date: Date) => void;
  onConfirmDate: () => void;
}

const DatePickerOption = ({
  isVisible,
  date,
  onChangeDate,
  onConfirmDate,
}: DatePickerOptionProps) => {
  const {theme} = useThemeStore();
  const styles = styling(theme);

  return (
    <Modal visible={isVisible} transparent animationType="slide">
      <SafeAreaView style={styles.optionBackground}>
        <View style={styles.optionContainer}>
          <View style={styles.pickerContainer}>
            <DatePicker
              mode="date"
              date={date}
              onDateChange={onChangeDate}
              locale="ko"
              theme={theme === 'dark' ? 'dark' : 'light'}
            />
          </View>
        </View>
        <View style={styles.optionContainer}>
          <Pressable style={styles.optionButton} onPress={onConfirmDate}>
            <Text style={styles.optionText}>확인</Text>
          </Pressable>
        </View>
      </SafeAreaView>
    </Modal>
  );
};

const styling = (theme: ThemeMode) =>
  StyleSheet.create({
    pickerContainer: {
      alignItems: 'center',
    },
    optionBackground: {
      flex: 1,
      justifyContent: 'flex-end',
      backgroundColor: 'rgba(0, 0, 0 / 0.5)',
    },
    optionContainer: {
      borderRadius: 15,
      marginHorizontal: 10,
      marginBottom: 10,
      backgroundColor: colors[theme].GRAY_100,
      overflow: 'hidden',
    },
    optionButton: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      height: 50,
      gap: 5,
    },
    optionText: {
      color: colors[theme].BLUE_500,
      fontSize: 17,
      fontWeight: '500',
    },
  });

export default DatePickerOption;