다크 모드 대응하기 — 눈에 편안한 뉴스 보기

밤이 되면 자동으로 앱이 어두워지고, 눈의 피로를 덜어주는 다크 모드는 이제 필수 기능이다.
Flutter에서는 이 다크 모드를 비교적 쉽게 적용할 수 있다. 단, 제대로 설계하지 않으면 디자인이 망가질 수도 있다.

이번 글에서는 ThemeMode 설정부터 커스텀 다크 테마 구성까지 뉴스 앱에 다크 모드를 적용하는 전체 흐름을 정리한다.

---

🌓 ThemeMode란?

Flutter의 MaterialApp에는 theme, darkTheme, themeMode라는 세 가지 설정이 있다.

MaterialApp(
  theme: lightTheme,
  darkTheme: darkTheme,
  themeMode: ThemeMode.system, // 또는 .dark / .light
)

• ThemeMode.system: 디바이스 설정에 따라 자동 전환
• ThemeMode.light: 항상 라이트 모드
• ThemeMode.dark: 항상 다크 모드

앱 사용자에게 직접 테마 선택 UI를 제공하려면 themeMode를 상태로 관리해야 한다.

---

🎨 커스텀 다크 테마 구성

✅ 라이트 테마 예시

final lightTheme = ThemeData(
  brightness: Brightness.light,
  primarySwatch: Colors.indigo,
  scaffoldBackgroundColor: Colors.white,
  textTheme: GoogleFonts.notoSansTextTheme(),
);

✅ 다크 테마 예시

final darkTheme = ThemeData(
  brightness: Brightness.dark,
  scaffoldBackgroundColor: Color(0xFF121212),
  cardColor: Color(0xFF1E1E1E),
  textTheme: GoogleFonts.notoSansTextTheme(ThemeData.dark().textTheme),
);

단순히 brightness만 다르게 하는 게 아니라,
배경색, 카드색, 텍스트 컬러까지 직접 지정하는 것이 포인트다.

---

🧠 다크 모드 대응 팁

• Color → Theme.of(context) 로 대체: 하드코딩 X
• TextStyle → Theme.of(context).textTheme 활용
• 카드, 배경 등은 ThemeData에서 관리

Container(
  color: Theme.of(context).scaffoldBackgroundColor,
  child: Text(
    news.title,
    style: Theme.of(context).textTheme.titleLarge,
  ),
)

디자인을 일관되게 유지하려면, 위젯마다 색상을 지정하기보단 ThemeData에 위임하는 방식이 좋다.

---

🧩 사용자가 직접 테마 변경하게 하기

class ThemeNotifier with ChangeNotifier {
  ThemeMode _mode = ThemeMode.system;
  ThemeMode get mode => _mode;

  void toggle() {
    _mode = _mode == ThemeMode.dark ? ThemeMode.light : ThemeMode.dark;
    notifyListeners();
  }
}

Provider와 연동하면 간단하게 다크 모드 토글 UI도 만들 수 있다.

---

🧘 마무리하며

눈에 편한 앱은, 오래 머물게 한다.
디자인 감성만큼이나 실용적인 다크 모드는 Flutter에서도 쉽게 구현 가능하다.

밤이 찾아오면, 앱도 조용히 어두워지는 경험
그게 진짜 사용자를 생각한 디자인이다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 뉴스 앱 만들기 여정입니다.