다크 모드 캘린더 디자인 적용

Flutter 앱에서 다크 모드는 이제 ‘선택’이 아닌 ‘기본’이 되었다.
특히 일정을 자주 확인하는 캘린더 앱에서는 어두운 환경에서도 눈이 편안해야 한다.

이번 글에서는 Flutter에서 다크 모드를 적용하고, table_calendar 위젯도 어두운 테마에 자연스럽게 녹아들게 만드는 방법을 알아보자.

---

🌙 테마 구성 기본

MaterialApp에서 라이트/다크 테마를 모두 정의하고, themeMode로 제어한다.

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    scaffoldBackgroundColor: Colors.white,
    primarySwatch: Colors.indigo,
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    scaffoldBackgroundColor: Color(0xFF121212),
    cardColor: Color(0xFF1E1E1E),
    primarySwatch: Colors.deepPurple,
  ),
  themeMode: ThemeMode.system,
)

system으로 지정하면 사용자의 OS 설정을 자동 반영한다.

---

🗓️ table_calendar 테마 반영하기

table_calendar는 내부적으로 테마를 상속받기 때문에, 전역 Theme 설정만 잘해도 대부분 어울린다.
하지만 일부 색상은 직접 지정해주는 게 좋다.

calendarStyle: CalendarStyle(
  todayDecoration: BoxDecoration(
    color: Theme.of(context).colorScheme.secondary,
    shape: BoxShape.circle,
  ),
  weekendTextStyle: TextStyle(
    color: Theme.of(context).brightness == Brightness.dark
      ? Colors.grey[300]
      : Colors.red,
  ),
  defaultTextStyle: TextStyle(
    color: Theme.of(context).brightness == Brightness.dark
      ? Colors.white
      : Colors.black,
  ),
)

TextStyle이나 BoxDecoration의 색상도 brightness 조건으로 처리하면 자연스럽다.

---

🌗 테마 전환 버튼 만들기

bool isDark = Theme.of(context).brightness == Brightness.dark;

IconButton(
  icon: Icon(isDark ? Icons.light_mode : Icons.dark_mode),
  onPressed: () {
    setState(() {
      themeMode = isDark ? ThemeMode.light : ThemeMode.dark;
    });
  },
)

사용자가 직접 테마를 전환할 수 있는 컨트롤을 제공하면 UX가 좋아진다.

---

📌 다크 모드 디자인 팁

• 텍스트 대비 충분히 확보 (80% 이상)
• 카드나 날짜 칸 배경: 완전 검정 대신 약간의 회색 계열 추천
• 오늘 날짜 강조 색상은 어두운 배경에서도 잘 보이는 색 사용
• 달력 외 위젯도 일관된 색상 테마 적용 필요

---

🧘 마무리하며

눈이 편안한 UI는 기능보다 더 중요한 사용자 배려다.
Flutter의 다크 모드 기능과 table_calendar 위젯을 활용해, 밤에도 보기 좋은 캘린더를 만들어보자.

빛을 줄여야 더 선명하게 보이는 정보도 있다.

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