[Flutter] Theme 다크모드 라이트모드 설정 하기 - 시스템 모드로 사용하기

dark 모드가 세상에 나오고 개발자들과 디자이너들은 더 귀찮고 힘들어진것 같다. 

물론 iOS13이후로 눈이 더 편해진 것은 사실이지만 말이다. 

사용자 입장에서는 정말 편한데, 개발자와 디자이너들은 뭐.. 귀찮을 뿐이지만 말이다. 

 

그래도 사용자 친화적으로 개발을 하기 위해서는 다크모드와 라이트모드를 모두 지원하는게 좋은 방법 중 하나이며 그렇게 하는건 역시나 귀찮다. 

하지만  iOS에 비해 flutter는 파일만 복사 붙여넣기로 증식하면 되서 나름... 편한거 같다. (내 기준)

 

Theme 사용 선언하기

---

그럼 다크모드를 설정해보자!

Theme을 메인에서 설정해주어야 하는 부분이 있는데, 

아래와 같이 적용하면 된다. 

main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(
	MyApp(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      debugShowCheckedModeBanner: false,
      themeMode: ThemeMode.system, // Theme Mode 설정 .system : 시스템에 따라 변경됨을 의미
      theme: ThemeCustom.lightTheme, // ligth Mode theme
      darkTheme: ThemeCustom.darkTheme, // dark Mode theme
    );
  }
}

조금 더 살펴보자면, 

Theme Mode에는 Dark, Light, system이 있다. 

 

말 그대로 dark를 하면 오직 dark 만 나온다. light는 반대이고, system은 기기의 환경설정에 따라 변경된다. 

iOS 시뮬레이터 dark모드로 변경 시키는 단축키 ⌘ + shift + a 로 변경 할 수 있다. 

안드는 잘 모르겠다.. 알고 계시다면 댓글에 남겨주세요..

 

그런 후 

Theme 전용 파일 생성하기 

---

theme.dart 

파일을 생성하는데 예제는 아래와 같다. 

class ThemeCustom {

  static ThemeData lightTheme = ThemeData(
    backgroundColor: Color.fromARGB(255, 255, 252, 240),
    primaryColor: Color.fromARGB(255, 38, 38, 38),
    primaryColorDark: Color.fromARGB(255, 118, 156, 220),
    primaryColorLight: Color.fromARGB(255, 217, 235, 255),
    shadowColor: Color.fromARGB(255, 87, 87, 87).withOpacity(0.3),
    canvasColor: Color.fromARGB(10, 0, 0, 0), 
    textTheme: TextTheme(
      headline1: TextStyle(
        color: Color.fromARGB(255, 0, 0, 0),
        fontSize: 150,
      ),
    ),
  );
  static ThemeData darkTheme = ThemeData(
    backgroundColor: Color.fromARGB(255, 38, 38, 38),
    primaryColor: Colors.white,
    primaryColorDark: Color.fromARGB(255, 118, 156, 220),
    primaryColorLight: Color.fromARGB(255, 145, 157, 170),
    shadowColor: Color.fromARGB(255, 173, 173, 173).withOpacity(0.3),
    canvasColor: Color.fromARGB(10, 255, 255, 255),
    textTheme: TextTheme(
      headline1: TextStyle(
        color: Color.fromARGB(255, 255, 255, 255),
        fontSize: 150,
      ),
    ),
  );
}

설정하지 않은 다른 이름들은 원래 theme을 사용한다. 

 

전체 코드 

---

아래는 전체 코드이다. 

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(
	MyApp(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      debugShowCheckedModeBanner: false,
      themeMode: ThemeMode.system,
      theme: ThemeCustom.lightTheme, // ligth Mode theme
      darkTheme: ThemeCustom.darkTheme, // dark Mode theme
    );
  }
}


class ThemeCustom {

  static ThemeData lightTheme = ThemeData(
    backgroundColor: Color.fromARGB(255, 255, 252, 240),
    primaryColor: Color.fromARGB(255, 38, 38, 38),
    primaryColorDark: Color.fromARGB(255, 118, 156, 220),
    primaryColorLight: Color.fromARGB(255, 217, 235, 255),
    shadowColor: Color.fromARGB(255, 87, 87, 87).withOpacity(0.3),
    canvasColor: Color.fromARGB(10, 0, 0, 0), 
    textTheme: TextTheme(
      headline1: TextStyle(
        color: Color.fromARGB(255, 0, 0, 0),
        fontSize: 150,
      ),
    ),
  );
  static ThemeData darkTheme = ThemeData(
    backgroundColor: Color.fromARGB(255, 38, 38, 38),
    primaryColor: Colors.white,
    primaryColorDark: Color.fromARGB(255, 118, 156, 220),
    primaryColorLight: Color.fromARGB(255, 145, 157, 170),
    shadowColor: Color.fromARGB(255, 173, 173, 173).withOpacity(0.3),
    canvasColor: Color.fromARGB(10, 255, 255, 255),
    textTheme: TextTheme(
      headline1: TextStyle(
        color: Color.fromARGB(255, 255, 255, 255),
        fontSize: 150,
      ),
    ),
  );
}

 

다음에는 이 Theme 을 어떻게 더 유용하게 사용 할 수 있는지 포스팅하려한다. 

내일의 내가 하겠지,,?