코딩강의/expense_tracker(플러터-유데미)
126. Adding Dark Mode
김마드
2023. 9. 5. 17:49
1. 다크모드 추가
시스템에서 다크모드로 변경 할 시, 앱에서도 변경되도록 세팅해보자.
- main.dart
import 'package:flutter/material.dart';
import 'package:expense_tracker/wigets/expenses.dart';
var kColorScheme = ColorScheme.fromSeed(
seedColor: const Color.fromARGB(255, 96, 59, 181),
);
var kDarkColorScheme = ColorScheme.fromSeed(
brightness: Brightness.dark,
seedColor: const Color.fromARGB(255, 5, 99, 125),
);
void main() {
runApp(
MaterialApp(
darkTheme: ThemeData.dark().copyWith(
useMaterial3: true,
colorScheme: kDarkColorScheme,
cardTheme: const CardTheme().copyWith(
color: kDarkColorScheme.secondaryContainer,
margin: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 8,
),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: kDarkColorScheme.primaryContainer,
foregroundColor: kDarkColorScheme.onPrimaryContainer,
),
),
),
theme: ThemeData().copyWith(
useMaterial3: true,
colorScheme: kColorScheme,
appBarTheme: const AppBarTheme().copyWith(
backgroundColor: kColorScheme.onPrimaryContainer,
foregroundColor: kColorScheme.primaryContainer,
),
cardTheme: const CardTheme().copyWith(
color: kColorScheme.secondaryContainer,
margin: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 8,
),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: kColorScheme.primaryContainer),
),
textTheme: ThemeData().textTheme.copyWith(
titleLarge: TextStyle(
fontWeight: FontWeight.bold,
color: kColorScheme.onSecondaryContainer,
fontSize: 16,
),
),
),
//themeMode: ThemeMode.system, // 디폴트 값, 항상 밝은 모드 or 다크모드로 하려면 값 변경
home: const Expenses(),
),
);
}
1) 하단 부분 themeMode에서 항상 light, dark모드로 세팅되게 할 수 있다. 디폴트값은 system에 따라서 변경
2) darkTheme부분 참고