★★★★★
#UI·디자인 · claude-code
다크모드 토글 + 시스템 따라가기
다크모드 지원. 사용자 토글 가능 + 시스템 설정 따라가기.
#dark-mode#theme#shared-preferences
다크모드 지원. 사용자 토글 가능 + 시스템 설정 따라가기.
요구사항:
- 기본값: 시스템 설정
- 설정 화면: 다크/라이트/자동
- 저장: shared_preferences
구현 (상태 관리):
```dart
late String _themeMode; // 'light', 'dark', 'system'
@override
void initState() {
super.initState();
_loadThemePreference();
}
Future<void> _loadThemePreference() async {
final prefs = await SharedPreferences.getInstance();
setState(() {
_themeMode = prefs.getString('themeMode') ?? 'system';
});
}
Future<void> _setTheme(String mode) async {
final prefs = await SharedPreferences.getInstance();
await prefs.setString('themeMode', mode);
setState(() => _themeMode = mode);
}
```
MaterialApp에 적용:
```dart
MaterialApp(
theme: lightTheme,
darkTheme: darkTheme,
themeMode: _themeMode == 'light'
? ThemeMode.light
: _themeMode == 'dark'
? ThemeMode.dark
: ThemeMode.system,
)
```
설정 화면 UI (라디오 버튼)로 구성할까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.