Flutter 튜토리얼 22편: 테마와 다크 모드

요약#

핵심 요지#

문제 정의: 앱 전체에서 일관된 색상과 스타일을 유지하려면 각 위젯에 개별적으로 스타일을 적용하는 것은 비효율적이다.
핵심 주장: ThemeData¹와 ColorScheme²을 사용하면 앱 전체의 시각적 일관성을 쉽게 유지하고 다크 모드도 구현할 수 있다.
주요 근거: MaterialApp의 theme과 darkTheme 속성으로 라이트/다크 테마를 정의하고, themeMode³로 전환한다.
실무 기준: Material 3가 Flutter 3.16부터 기본값이므로 ColorScheme.fromSeed()로 테마를 생성하는 것을 권장한다.
한계: 복잡한 커스텀 디자인 시스템은 기본 테마만으로 구현하기 어려울 수 있다.

문서가 설명하는 범위#

ThemeData와 ColorScheme의 구조와 사용법
라이트/다크 테마 정의와 전환
Theme.of(context)로 테마 값 접근
위젯별 테마 오버라이드

읽는 시간: 12분 | 난이도: 중급

참고 자료#

Use themes to share colors and font styles - Flutter 공식 테마 가이드
ThemeData class - ThemeData API 문서
Material Design 3 - Material 3 디자인 시스템

문제 상황#

앱을 만들 때 모든 화면에서 일관된 색상, 폰트, 스타일을 유지해야 합니다. 개별 위젯마다 스타일을 지정하면 여러 문제가 발생합니다.

스타일 관리의 어려움#

1
문제 1: 같은 색상을 여러 곳에서 하드코딩 → 변경 시 모든 곳을 수정해야 함
2
문제 2: 다크 모드 지원 → 조건문이 곳곳에 퍼짐
3
문제 3: 디자인 변경 → 전체 코드 수정 필요
4
문제 4: 일관성 유지 어려움 → 실수로 다른 색상 사용

해결 방법#

Flutter의 테마 시스템은 앱 전체에서 공유하는 색상과 스타일을 중앙에서 관리합니다. ThemeData로 테마를 정의하고 Theme.of(context)로 어디서든 접근할 수 있습니다.

챕터 1: ThemeData 기본 구조 이해하기#

Why#

NOTE
테마를 사용하려면 먼저 ThemeData의 구조를 이해해야 합니다.
어떤 속성이 있고, 각 속성이 어떤 위젯에 영향을 미치는지 알아야 합니다.
1
ThemeData → 앱 전체 스타일 정의
2
ColorScheme → 색상 팔레트
3
TextTheme → 텍스트 스타일

What#

NOTE
ThemeData는 Flutter Material 앱의 전체적인 시각적 테마를 정의합니다.
색상, 타이포그래피, 위젯별 테마 등을 포함합니다.

How#

TIP

기본 ThemeData 구조

1
MaterialApp(
2
  theme: ThemeData(
3
    // Material 3 사용 (Flutter 3.16+ 기본값)
4
    useMaterial3: true,
5

6
    // 색상 팔레트
7
    colorScheme: ColorScheme.fromSeed(
8
      seedColor: Colors.blue,
9
      brightness: Brightness.light,
10
    ),
11

12
    // 텍스트 스타일
13
    textTheme: const TextTheme(
14
      displayLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
15
      bodyMedium: TextStyle(fontSize: 14),
16
    ),
17

18
    // 위젯별 테마
19
    appBarTheme: const AppBarTheme(
20
      centerTitle: true,
21
      elevation: 0,
22
    ),
23

24
    cardTheme: CardTheme(
25
      elevation: 2,
26
      shape: RoundedRectangleBorder(
27
        borderRadius: BorderRadius.circular(12),
28
      ),
29
    ),
30
  ),
31
)

주요 ThemeData 속성

속성	설명
`colorScheme`	앱의 색상 팔레트
`textTheme`	텍스트 스타일 모음
`appBarTheme`	AppBar 스타일
`cardTheme`	Card 스타일
`elevatedButtonTheme`	ElevatedButton 스타일
`inputDecorationTheme`	TextField 스타일
`scaffoldBackgroundColor`	Scaffold 배경색

Watch out#

WARNING
Flutter 3.16부터 Material 3가 기본값입니다.
이전 Material 2 디자인을 사용하려면 명시적으로 설정해야 합니다.
1
// Material 2 사용 (레거시)
2
ThemeData(
3
  useMaterial3: false,
4
)
5

6
// Material 3 사용 (기본값, 권장)
7
ThemeData(
8
  useMaterial3: true,
9
)
Material 2 지원은 향후 제거될 예정이므로 새 프로젝트는 Material 3를 사용하세요.

결론: ThemeData로 앱 전체의 시각적 테마를 중앙에서 정의합니다.

챕터 2: ColorScheme으로 색상 팔레트 정의#

Why#

NOTE
앱에서 사용하는 모든 색상을 일관되게 관리해야 합니다.
ColorScheme은 Material Design의 색상 시스템을 구현하며, 접근성을 고려한 대비색도 자동으로 제공합니다.
graph LR A[seedColor] --> B[ColorScheme 생성] B --> C[primary, secondary, surface 등] B --> D[onPrimary, onSecondary 등]

What#

NOTE
ColorScheme은 앱의 색상 팔레트를 정의합니다.
기본 색상(primary, secondary)과 그 위에 표시되는 요소의 색상(onPrimary, onSecondary)을 포함합니다.

How#

TIP

시드 색상으로 ColorScheme 생성

1
ColorScheme.fromSeed(
2
  seedColor: Colors.deepPurple,
3
  brightness: Brightness.light,
4
)

Material 3의 색상 알고리즘이 시드 색상에서 조화로운 팔레트를 자동 생성합니다.

ColorScheme 주요 색상

1
// 테마 접근
2
final colorScheme = Theme.of(context).colorScheme;
3

4
// 주요 색상
5
colorScheme.primary          // 주요 브랜드 색상
6
colorScheme.onPrimary        // primary 위의 텍스트/아이콘 색상
7
colorScheme.primaryContainer // primary의 컨테이너 색상
8

9
// 보조 색상
10
colorScheme.secondary        // 보조 색상
11
colorScheme.onSecondary      // secondary 위의 색상
12

13
// 표면 색상
14
colorScheme.surface          // Card, Dialog 등의 배경
15
colorScheme.onSurface        // surface 위의 텍스트
16

17
// 배경색
18
colorScheme.background       // 전체 배경 (deprecated in M3)
19
colorScheme.surfaceContainerLow  // M3 배경 대체
20

21
// 에러 색상
22
colorScheme.error            // 에러 표시 색상
23
colorScheme.onError          // error 위의 색상

수동으로 ColorScheme 정의

1
ColorScheme(
2
  brightness: Brightness.light,
3
  primary: const Color(0xFF6750A4),
4
  onPrimary: Colors.white,
5
  primaryContainer: const Color(0xFFEADDFF),
6
  onPrimaryContainer: const Color(0xFF21005D),
7
  secondary: const Color(0xFF625B71),
8
  onSecondary: Colors.white,
9
  surface: Colors.white,
10
  onSurface: Colors.black,
11
  error: const Color(0xFFB3261E),
12
  onError: Colors.white,
13
)

Watch out#

WARNING

onPrimary, onSurface 같은 “on” 색상을 사용해야 접근성이 보장됩니다.
대비를 직접 계산하지 마세요.

1
// 잘못된 방법 - 대비가 보장되지 않음
2
Container(
3
  color: Theme.of(context).colorScheme.primary,
4
  child: const Text('텍스트', style: TextStyle(color: Colors.white)),
5
)
6

7
// 올바른 방법 - 대비가 보장됨
8
Container(
9
  color: Theme.of(context).colorScheme.primary,
10
  child: Text(
11
    '텍스트',
12
    style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),
13
  ),
14
)

결론: ColorScheme.fromSeed()로 시드 색상에서 조화로운 색상 팔레트를 자동 생성합니다.

챕터 3: 다크 모드 테마 구현#

Why#

NOTE
많은 사용자가 다크 모드를 선호합니다.
눈의 피로를 줄이고 배터리를 절약할 수 있습니다.
MaterialApp에서 라이트/다크 테마를 함께 정의할 수 있습니다.
1
시스템 설정 → themeMode: system
2
라이트 강제 → themeMode: light
3
다크 강제 → themeMode: dark

What#

NOTE
MaterialApp의 theme 속성에 라이트 테마를, darkTheme 속성에 다크 테마를 정의합니다.
themeMode로 어떤 테마를 사용할지 제어합니다.

How#

TIP

라이트/다크 테마 정의

1
MaterialApp(
2
  theme: ThemeData(
3
    colorScheme: ColorScheme.fromSeed(
4
      seedColor: Colors.blue,
5
      brightness: Brightness.light,
6
    ),
7
    useMaterial3: true,
8
  ),
9
  darkTheme: ThemeData(
10
    colorScheme: ColorScheme.fromSeed(
11
      seedColor: Colors.blue,
12
      brightness: Brightness.dark,
13
    ),
14
    useMaterial3: true,
15
  ),
16
  themeMode: ThemeMode.system,  // 시스템 설정 따라감
17
)

사용자가 테마 선택

1
class MyApp extends StatefulWidget {
2
  const MyApp({super.key});
3

4
  @override
5
  State<MyApp> createState() => _MyAppState();
6
}
7

8
class _MyAppState extends State<MyApp> {
9
  ThemeMode _themeMode = ThemeMode.system;
10

11
  void setThemeMode(ThemeMode mode) {
12
    setState(() => _themeMode = mode);
13
  }
14

15
  @override
16
  Widget build(BuildContext context) {
17
    return MaterialApp(
18
      theme: ThemeData(
19
        colorScheme: ColorScheme.fromSeed(
20
          seedColor: Colors.blue,
21
          brightness: Brightness.light,
22
        ),
23
      ),
24
      darkTheme: ThemeData(
25
        colorScheme: ColorScheme.fromSeed(
26
          seedColor: Colors.blue,
27
          brightness: Brightness.dark,
28
        ),
29
      ),
30
      themeMode: _themeMode,
31
      home: ThemeSettingsPage(
32
        currentMode: _themeMode,
33
        onThemeChanged: setThemeMode,
34
      ),
35
    );
36
  }
37
}
38

39
class ThemeSettingsPage extends StatelessWidget {
40
  final ThemeMode currentMode;
41
  final ValueChanged<ThemeMode> onThemeChanged;
42

43
  const ThemeSettingsPage({
44
    super.key,
45
    required this.currentMode,
46
    required this.onThemeChanged,
47
  });
48

49
  @override
50
  Widget build(BuildContext context) {
51
    return Scaffold(
52
      appBar: AppBar(title: const Text('테마 설정')),
53
      body: ListView(
54
        children: [
55
          RadioListTile<ThemeMode>(
56
            title: const Text('시스템 설정'),
57
            value: ThemeMode.system,
58
            groupValue: currentMode,
59
            onChanged: (mode) => onThemeChanged(mode!),
60
          ),
61
          RadioListTile<ThemeMode>(
62
            title: const Text('라이트 모드'),
63
            value: ThemeMode.light,
64
            groupValue: currentMode,
65
            onChanged: (mode) => onThemeChanged(mode!),
66
          ),
67
          RadioListTile<ThemeMode>(
68
            title: const Text('다크 모드'),
69
            value: ThemeMode.dark,
70
            groupValue: currentMode,
71
            onChanged: (mode) => onThemeChanged(mode!),
72
          ),
73
        ],
74
      ),
75
    );
76
  }
77
}

Watch out#

WARNING
다크 테마에서 단순히 배경만 어둡게 하면 안 됩니다.
텍스트 대비, 그림자, 표면 색상 등을 모두 고려해야 합니다.
1
// ColorScheme.fromSeed는 다크 모드에 최적화된 색상을 자동 생성
2
ColorScheme.fromSeed(
3
  seedColor: Colors.blue,
4
  brightness: Brightness.dark,  // 다크 모드용 색상 생성
5
)
수동으로 ColorScheme을 정의할 때는 WCAG 대비 기준(4.5<1> 이상)을 확인하세요.

결론: theme과 darkTheme을 함께 정의하고 themeMode로 전환하면 다크 모드를 쉽게 구현할 수 있습니다.

챕터 4: Theme.of(context)로 테마 접근#

Why#

NOTE
정의한 테마를 위젯에서 사용하려면 Theme.of(context)로 접근합니다.
이 방식으로 어디서든 일관된 스타일을 적용할 수 있습니다.
1
Theme.of(context) → ThemeData
2
.colorScheme → 색상
3
.textTheme → 텍스트 스타일

What#

NOTE
Theme.of(context)는 가장 가까운 상위 테마를 반환합니다.
MaterialApp에서 정의한 테마 또는 Theme 위젯으로 오버라이드된 테마일 수 있습니다.

How#

TIP

색상 접근

1
Widget build(BuildContext context) {
2
  final colorScheme = Theme.of(context).colorScheme;
3

4
  return Container(
5
    color: colorScheme.primaryContainer,
6
    child: Text(
7
      '제목',
8
      style: TextStyle(color: colorScheme.onPrimaryContainer),
9
    ),
10
  );
11
}

텍스트 스타일 접근

1
Widget build(BuildContext context) {
2
  final textTheme = Theme.of(context).textTheme;
3

4
  return Column(
5
    children: [
6
      Text('큰 제목', style: textTheme.displayLarge),
7
      Text('부제목', style: textTheme.titleMedium),
8
      Text('본문', style: textTheme.bodyMedium),
9
    ],
10
  );
11
}

스타일 확장 (copyWith)

1
Text(
2
  '커스텀 스타일',
3
  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
4
    color: Colors.red,
5
    fontWeight: FontWeight.bold,
6
  ),
7
)

현재 테마 밝기 확인

1
Widget build(BuildContext context) {
2
  final isDarkMode = Theme.of(context).brightness == Brightness.dark;
3

4
  return Icon(
5
    isDarkMode ? Icons.dark_mode : Icons.light_mode,
6
  );
7
}

Watch out#

WARNING

Theme.of(context)는 BuildContext가 필요합니다.
initState()에서는 사용할 수 없습니다.

1
// 잘못된 사용 - initState에서 context 사용 불가
2
@override
3
void initState() {
4
  super.initState();
5
  final theme = Theme.of(context);  // 에러!
6
}
7

8
// 올바른 사용 - didChangeDependencies에서 사용
9
@override
10
void didChangeDependencies() {
11
  super.didChangeDependencies();
12
  final theme = Theme.of(context);  // OK
13
}
14

15
// 또는 build에서 사용 (권장)
16
@override
17
Widget build(BuildContext context) {
18
  final theme = Theme.of(context);
19
  // ...
20
}

결론: Theme.of(context)로 테마에 접근하고 copyWith로 필요시 스타일을 확장합니다.

챕터 5: 위젯별 테마 오버라이드#

Why#

NOTE
특정 위젯이나 화면에서만 다른 테마를 적용해야 할 때가 있습니다.
Theme 위젯으로 하위 트리의 테마를 오버라이드할 수 있습니다.
1
상위 테마 → Theme 위젯 → 하위 위젯에 새 테마 적용

What#

NOTE
Theme 위젯은 하위 트리에 새로운 ThemeData를 제공합니다.
copyWith()를 사용하면 기존 테마를 유지하면서 일부만 변경할 수 있습니다.

How#

TIP

완전히 새로운 테마 적용

1
Theme(
2
  data: ThemeData(
3
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.pink),
4
  ),
5
  child: Builder(
6
    builder: (context) {
7
      return FloatingActionButton(
8
        onPressed: () {},
9
        child: const Icon(Icons.add),
10
      );
11
    },
12
  ),
13
)

기존 테마 확장 (권장)

1
Theme(
2
  data: Theme.of(context).copyWith(
3
    colorScheme: Theme.of(context).colorScheme.copyWith(
4
      primary: Colors.pink,
5
    ),
6
  ),
7
  child: ElevatedButton(
8
    onPressed: () {},
9
    child: const Text('핑크 버튼'),
10
  ),
11
)

특정 위젯 테마만 오버라이드

1
Theme(
2
  data: Theme.of(context).copyWith(
3
    elevatedButtonTheme: ElevatedButtonThemeData(
4
      style: ElevatedButton.styleFrom(
5
        backgroundColor: Colors.green,
6
        foregroundColor: Colors.white,
7
        padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
8
      ),
9
    ),
10
  ),
11
  child: ElevatedButton(
12
    onPressed: () {},
13
    child: const Text('커스텀 버튼'),
14
  ),
15
)

입력 필드 테마 오버라이드

1
Theme(
2
  data: Theme.of(context).copyWith(
3
    inputDecorationTheme: InputDecorationTheme(
4
      border: OutlineInputBorder(
5
        borderRadius: BorderRadius.circular(20),
6
      ),
7
      filled: true,
8
      fillColor: Colors.grey[100],
9
    ),
10
  ),
11
  child: TextField(
12
    decoration: const InputDecoration(
13
      labelText: '둥근 입력 필드',
14
    ),
15
  ),
16
)

Watch out#

WARNING

Theme 위젯 바로 아래에서 Theme.of(context)를 호출하면 새 테마가 아닌 상위 테마를 참조합니다.
Builder나 별도 위젯을 사용해야 합니다.

1
// 잘못된 방법 - 상위 테마 참조
2
Theme(
3
  data: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.pink)),
4
  child: Text(
5
    '텍스트',
6
    // 이 context는 Theme 위젯 위의 context
7
    style: TextStyle(color: Theme.of(context).colorScheme.primary),
8
  ),
9
)
10

11
// 올바른 방법 - Builder 사용
12
Theme(
13
  data: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.pink)),
14
  child: Builder(
15
    builder: (context) {
16
      // 이 context는 Theme 위젯 아래의 context
17
      return Text(
18
        '텍스트',
19
        style: TextStyle(color: Theme.of(context).colorScheme.primary),
20
      );
21
    },
22
  ),
23
)

결론: Theme 위젯과 copyWith()로 특정 영역의 테마를 유연하게 오버라이드할 수 있습니다.

챕터 6: 테마 설정 저장하기#

Why#

NOTE
사용자가 선택한 테마 모드를 저장해야 앱을 다시 열어도 설정이 유지됩니다.
SharedPreferences⁴로 간단하게 저장할 수 있습니다.
1
사용자 선택 → SharedPreferences 저장 → 앱 재시작 → 설정 복원

What#

NOTE
SharedPreferences는 키-값 형태로 간단한 데이터를 저장하는 패키지입니다.
테마 모드 같은 설정값을 저장하기에 적합합니다.

How#

TIP

패키지 설치

1
flutter pub add shared_preferences

테마 설정 저장 및 복원

1
import 'package:flutter/material.dart';
2
import 'package:shared_preferences/shared_preferences.dart';
3

4
class ThemeNotifier extends ChangeNotifier {
5
  static const _key = 'theme_mode';
6
  ThemeMode _themeMode = ThemeMode.system;
7

8
  ThemeMode get themeMode => _themeMode;
9

10
  ThemeNotifier() {
11
    _loadThemeMode();
12
  }
13

14
  Future<void> _loadThemeMode() async {
15
    final prefs = await SharedPreferences.getInstance();
16
    final value = prefs.getString(_key);
17

18
    _themeMode = switch (value) {
19
      'light' => ThemeMode.light,
20
      'dark' => ThemeMode.dark,
21
      _ => ThemeMode.system,
22
    };
23
    notifyListeners();
24
  }
25

26
  Future<void> setThemeMode(ThemeMode mode) async {
27
    _themeMode = mode;
28
    notifyListeners();
29

30
    final prefs = await SharedPreferences.getInstance();
31
    final value = switch (mode) {
32
      ThemeMode.light => 'light',
33
      ThemeMode.dark => 'dark',
34
      ThemeMode.system => 'system',
35
    };
36
    await prefs.setString(_key, value);
37
  }
38
}

Provider와 함께 사용

1
import 'package:provider/provider.dart';
2

3
void main() {
4
  runApp(
5
    ChangeNotifierProvider(
6
      create: (_) => ThemeNotifier(),
7
      child: const MyApp(),
8
    ),
9
  );
10
}
11

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

15
  @override
16
  Widget build(BuildContext context) {
17
    final themeNotifier = context.watch<ThemeNotifier>();
18

19
    return MaterialApp(
20
      theme: ThemeData(
21
        colorScheme: ColorScheme.fromSeed(
22
          seedColor: Colors.blue,
23
          brightness: Brightness.light,
24
        ),
25
      ),
26
      darkTheme: ThemeData(
27
        colorScheme: ColorScheme.fromSeed(
28
          seedColor: Colors.blue,
29
          brightness: Brightness.dark,
30
        ),
31
      ),
32
      themeMode: themeNotifier.themeMode,
33
      home: const HomePage(),
34
    );
35
  }
36
}
37

38
class HomePage extends StatelessWidget {
39
  const HomePage({super.key});
40

41
  @override
42
  Widget build(BuildContext context) {
43
    final themeNotifier = context.read<ThemeNotifier>();
44

45
    return Scaffold(
46
      appBar: AppBar(title: const Text('테마 설정')),
47
      body: ListView(
48
        children: ThemeMode.values.map((mode) {
49
          return RadioListTile<ThemeMode>(
50
            title: Text(_themeModeLabel(mode)),
51
            value: mode,
52
            groupValue: themeNotifier.themeMode,
53
            onChanged: (value) => themeNotifier.setThemeMode(value!),
54
          );
55
        }).toList(),
56
      ),
57
    );
58
  }
59

60
  String _themeModeLabel(ThemeMode mode) {
61
    return switch (mode) {
62
      ThemeMode.system => '시스템 설정',
63
      ThemeMode.light => '라이트 모드',
64
      ThemeMode.dark => '다크 모드',
65
    };
66
  }
67
}

Watch out#

WARNING

SharedPreferences는 앱이 완전히 종료되어도 데이터가 유지됩니다.
하지만 앱을 삭제하면 데이터도 함께 삭제됩니다.

1
// 비동기 로딩 중 깜빡임 방지
2
// FutureBuilder로 로딩 완료까지 스플래시 화면 표시
3
FutureBuilder(
4
  future: themeNotifier.initialized,
5
  builder: (context, snapshot) {
6
    if (!snapshot.hasData) {
7
      return const SplashScreen();
8
    }
9
    return const MyApp();
10
  },
11
)

결론: SharedPreferences로 테마 설정을 저장하면 앱을 다시 열어도 사용자 선택이 유지됩니다.

한계#

Flutter의 테마 시스템은 강력하지만 몇 가지 제약이 있습니다.

복잡한 디자인 시스템: Material Design을 벗어난 복잡한 커스텀 디자인은 추가 작업이 필요합니다.
동적 테마: 런타임에 테마를 완전히 교체하면 전체 위젯 트리가 리빌드됩니다.
플랫폼 일관성: iOS의 Cupertino 스타일과 Material 스타일을 완전히 통합하기 어렵습니다.
테마 상속: 중첩된 Theme 위젯에서 특정 속성만 상속하기가 번거로울 수 있습니다.

ThemeData: Flutter Material 앱의 전체적인 시각적 테마를 정의하는 클래스다. ↩
ColorScheme: Material Design의 색상 시스템을 구현하는 클래스로, 앱의 색상 팔레트를 정의한다. ↩
ThemeMode: 라이트, 다크, 시스템 설정 중 어떤 테마를 사용할지 지정하는 열거형이다. ↩
SharedPreferences: 간단한 키-값 데이터를 기기에 영구 저장하는 패키지다. ↩

Flutter 튜토리얼 22편: 테마와 다크 모드

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

스타일 관리의 어려움#

해결 방법#

챕터 1: ThemeData 기본 구조 이해하기#

Why#

What#

How#

Watch out#

챕터 2: ColorScheme으로 색상 팔레트 정의#

Why#

What#

How#

Watch out#

챕터 3: 다크 모드 테마 구현#

Why#

What#

How#

Watch out#

챕터 4: Theme.of(context)로 테마 접근#

Why#

What#

How#

Watch out#

챕터 5: 위젯별 테마 오버라이드#

Why#

What#

How#

Watch out#

챕터 6: 테마 설정 저장하기#

Why#

What#

How#

Watch out#

한계#

Footnotes#

공유

목차