ThemeMode, theme, darkTheme

// main.dart의 일부
themeMode: ThemeMode.system,
      theme: ThemeData(
        useMaterial3: true,
        textTheme: Typography.blackMountainView,
        brightness: Brightness.light,
        scaffoldBackgroundColor: Colors.white,
        primaryColor: const Color(0xFFE9435A),
        textSelectionTheme: const TextSelectionThemeData(
          cursorColor: Color(0xFFE9435A),
        ),
        splashColor: Colors.transparent,
        appBarTheme: const AppBarTheme(
          foregroundColor: Colors.black,
          backgroundColor: Colors.white,
          surfaceTintColor: Colors.white,
          elevation: 0,
          titleTextStyle: TextStyle(
            color: Colors.black,
            fontSize: Sizes.size16 + Sizes.size2,
            fontWeight: FontWeight.w600,
          ),
        ),
        tabBarTheme: TabBarTheme(
          labelColor: Colors.black,
          unselectedLabelColor: Colors.grey.shade500,
          indicatorColor: Colors.black,
        ),
        listTileTheme: const ListTileThemeData(
          iconColor: Colors.black,
        ),
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        tabBarTheme: TabBarTheme(
          indicatorColor: Colors.white,
          labelColor: Colors.white,
          unselectedLabelColor: Colors.grey.shade700,
        ),
        textSelectionTheme: const TextSelectionThemeData(
          cursorColor: Color(0xFFE9435A),
        ),
        textTheme: Typography.whiteMountainView,
        brightness: Brightness.dark,
        scaffoldBackgroundColor: Colors.black,
        appBarTheme: AppBarTheme(
          surfaceTintColor: Colors.grey.shade900,
          backgroundColor: Colors.grey.shade900,
          foregroundColor: Colors.white,
          titleTextStyle: const TextStyle(
            color: Colors.white,
            fontSize: Sizes.size16 + Sizes.size2,
            fontWeight: FontWeight.w600,
          ),
          actionsIconTheme: IconThemeData(
            color: Colors.grey.shade100,
          ),
          iconTheme: IconThemeData(
            color: Colors.grey.shade100,
          ),
        ),
        bottomAppBarTheme: BottomAppBarTheme(
          color: Colors.grey.shade900,
        ),
        primaryColor: const Color(0xFFE9435A),
      ),

이 코드는 Flutter 앱에서 밝기 모드(라이트 모드와 다크 모드)에 따라 다른 테마를 적용하는 방법을 보여줍니다. themeMode, theme, darkTheme 속성을 MaterialApp 위젯(또는 CupertinoApp 위젯)에 설정하여, 사용자의 시스템 설정에 따라 앱의 외관을 자동으로 조정할 수 있습니다.

themeMode:

• themeMode: ThemeMode.system 설정은 앱이 사용자의 시스템(디바이스) 설정을 따르도록 지정합니다. 사용자가 시스템 설정에서 다크 모드를 활성화하면 앱도 다크 모드로 전환되고, 라이트 모드를 설정하면 앱도 라이트 모드로 전환됩니다.
• ThemeMode에는 light, dark, system 세 가지 옵션이 있습니다. 각각은 앱이 항상 라이트 모드를 사용하게 하거나, 항상 다크 모드를 사용하게 하거나, 시스템 설정을 따르도록 할 때 사용됩니다.

theme (라이트 모드 테마):

• theme 속성에서는 라이트 모드일 때 적용할 기본 테마 설정을 정의합니다.
• 예를 들어, scaffoldBackgroundColor를 Colors.white로 설정하여 기본 배경색을 흰색으로 지정하고, primaryColor를 Color(0xFFE9435A)로 설정하여 앱의 주 색상을 정의합니다.
• appBarTheme, tabBarTheme, listTileTheme 등을 통해 앱 바, 탭 바, 리스트 타일 등의 상세한 스타일링을 지정할 수 있습니다.

darkTheme (다크 모드 테마):

• darkTheme 속성에서는 다크 모드일 때 적용할 테마 설정을 정의합니다.
• 여기서는 scaffoldBackgroundColor를 Colors.black으로 설정하여 다크 모드에서의 기본 배경색을 검은색으로 지정합니다.
• appBarTheme에서는 앱 바의 backgroundColor, foregroundColor, titleTextStyle 등을 다크 모드에 적합하게 조정합니다.
• textTheme, tabBarTheme 등도 다크 모드에 맞게 조정하여, 전반적인 UI 요소들이 사용자의 시스템 다크 모드 설정을 반영하도록 합니다.

결론:

이 코드는 Flutter 앱에서 라이트 모드와 다크 모드를 지원하는 방법을 보여줍니다. themeMode를 ThemeMode.system으로 설정함으로써, 사용자의 시스템 설정에 따라 자동으로 테마를 전환할 수 있게 하고, theme와 darkTheme을 통해 각 모드에 적합한 테마를 세밀하게 정의할 수 있습니다. 이를 통해 사용자에게 더 나은 시각적 경험을 제공하고, 시스템 설정을 존중하는 앱을 구현할 수 있습니다.

부분적으로 다크모드가 적용되지 않는 경우?

아래의 코드를 import하여 isDarkMode가 true이면 다크모드, false이면 라이트모드인 점을 활용하여 삼항연산자를 쓴다.

// lib/utils.dart
import 'package:flutter/material.dart';

bool isDarkMode(BuildContext context) =>
    MediaQuery.of(context).platformBrightness == Brightness.dark;

// chat_detail_screen.dart
          Positioned(
            bottom: 0,
            width: MediaQuery.of(context).size.width,
            child: Container(
              color: isDarkMode(context) ? Colors.black : Colors.grey.shade50,
              child: Padding(
                padding: EdgeInsets.only(
                  left: Sizes.size40,
                  right: Sizes.size40,
                  top: Sizes.size10,
                  bottom: MediaQuery.of(context).padding.bottom,
                ),
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        controller: _editingController,
                        decoration: InputDecoration(
                          filled: true,
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(
                              Sizes.size12,
                            ),
                            borderSide: BorderSide.none,
                          ),
                          contentPadding: const EdgeInsets.symmetric(
                            horizontal: Sizes.size12,
                          ),
                        ),
                      ),
                    ),
                    Gaps.h20,
                    IconButton(
                      onPressed: isLoading ? null : _onSendPress,
                      icon: FaIcon(
                        isLoading
                            ? FontAwesomeIcons.hourglass
                            : FontAwesomeIcons.paperPlane,
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),