★★★★★
#UI·디자인 · claude-code
Custom Theme 만들기 — 색상·폰트 커스터마이징
앱 브랜드 색상과 폰트 통일.
#theme#colors#fonts
변수 6개 — 여기 채우면 아래 프롬프트에 바로 들어가요
앱 브랜드 색상과 폰트 통일.
요구사항:
- 주색상 (Primary): {{PRIMARY_COLOR}}
- 보조색상 (Secondary): {{SECONDARY_COLOR}}
- 기본 폰트: {{FONT_NAME}}
구현 (lib/theme/app_theme.dart):
```dart
import 'package:flutter/material.dart';
class AppTheme {
static const Color _primaryColor = Color(0xFF{{PRIMARY_HEX}});
static const Color _secondaryColor = Color(0xFF{{SECONDARY_HEX}});
static final ThemeData lightTheme = ThemeData(
useMaterial3: true,
brightness: Brightness.light,
colorScheme: ColorScheme.fromSeed(
seedColor: _primaryColor,
),
fontFamily: '{{FONT_NAME}}',
textTheme: const TextTheme(
headlineLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
titleMedium: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
bodyMedium: TextStyle(fontSize: 14),
),
);
}
```
pubspec.yaml 폰트 추가:
```yaml
flutter:
fonts:
- family: {{FONT_NAME}}
fonts:
- asset: assets/fonts/{{FONT_FILE}}.ttf
- asset: assets/fonts/{{FONT_FILE}}_bold.ttf
weight: 700
```
main.dart:
```dart
MaterialApp(
theme: AppTheme.lightTheme,
)
```
색상 코드(16진수)와 폰트명 알려줄까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.