🌙 42. React Native 다크 모드 완전 정리 — Appearance, ThemeProvider, Zustand까지

---

요즘 출시되는 앱들을 보면
거의 대부분 다크 모드(Dark Mode)를 지원한다.
눈의 피로를 줄이고, 배터리 사용량도 줄이며, 사용자의 선호도에 따라 UI를 바꾸는 기능이다.

React Native에서도 다크 모드를 적용할 수 있는 여러 방법이 있다.
이번 글은 시스템 테마 감지부터 커스텀 테마 시스템 구축까지 정리한 글이다.

---

✅ 1. Appearance로 시스템 다크모드 감지하기

import { useColorScheme } from 'react-native';

const scheme = useColorScheme(); // 'light' | 'dark'

• iOS, Android 모두 사용자의 시스템 테마를 감지할 수 있음
• useEffect 없이 즉시 확인 가능

---

🎨 2. 다크 모드 테마 객체 만들기

export const LightTheme = {
  background: '#ffffff',
  text: '#000000',
};

export const DarkTheme = {
  background: '#000000',
  text: '#ffffff',
};

---

💅 3. ThemeProvider로 전체 앱에 적용

styled-components 사용 예시

import { ThemeProvider } from 'styled-components/native';

const scheme = useColorScheme();
const theme = scheme === 'dark' ? DarkTheme : LightTheme;

return (
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
);

const Title = styled.Text`
  color: ${(props) => props.theme.text};
`;

---

🔁 4. 상태 기반 테마 전환 (Zustand or Context)

사용자가 수동으로 라이트/다크 모드를 선택할 수 있게 하려면 상태 저장이 필요하다.

Zustand 예시

const useThemeStore = create((set) => ({
  isDark: false,
  toggleTheme: () => set((state) => ({ isDark: !state.isDark })),
}));

const theme = isDark ? DarkTheme : LightTheme;

• 자동 + 수동 토글 모두 처리 가능
• 앱 설정 화면에서 테마 변경 기능 만들기에도 유리

---

🧪 테스트 팁

환경	다크모드 테스트 방법
iOS 시뮬레이터	설정 > Developer > Appearance
Android 에뮬레이터	설정 > 디스플레이 > 다크 테마
Expo	Expo 앱 > 장치 테마 감지 가능

---

📝 내가 느낀 점

처음엔 다크모드는 UI에 색상만 바꾸는 거라고 생각했는데,
사용자가 앱을 어떻게 느끼는지에 영향을 주는 중요한 UX 포인트라는 걸 알게 됐다.

지금은 무조건 다크 모드를 기본으로 고려해서 디자인 시스템부터 설계하고,
Zustand를 써서 수동 토글도 함께 지원하고 있다.

---

🌗 “좋은 앱은 빛에서도 어둠에서도 똑같이 멋져야 한다.”

---