> For the complete documentation index, see [llms.txt](https://developer.aliothx.net/start/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.aliothx.net/start/uiux/ui-ux/theme.md).

# 테마 적용

## 테마 색상 &#x20;

![](/files/Nuj0VlxhMf3mtBFQ8aQP)![](/files/35eoWoyoBrb8vu1fj6yl)

UI/UX 컴포넌트에 사용되는 테마의 색상을 살펴보기 위해, 아래 예제 코드를 사용하면 테마 색상이 어떻게 적용되는지 색상 코드표를 확인할 수 있습니다.

```dart
ShowThemeColors();
```

이 코드를 실행하면 앱의 다양한 컴포넌트에서 사용되는 주요 색상을 시각적으로 확인할 수 있습니다. 이러한 색상을 테마에서 일관되게 정의하면 앱 전체적으로 일관된 색상 팔레트를 사용할 수 있습니다.

## 테마 쇼케이스&#x20;

![](/files/DK0ZJ2baVxAzRkGm0v9i)![](/files/q4gAzTXvoQDX4vcqKCAu)

테마의 색상을 이해했다면, 다음으로 UI/UX 컴포넌트에 테마가 어떻게 적용되는지 실제 예시를 통해 확인해보세요. 아래 예제 코드를 사용하면 다양한 위젯들에 테마가 어떻게 적용되는지 살펴볼 수 있습니다.

```dart
ThemeShowcase();
```

이 코드를 실행하면 버튼, 텍스트, 아이콘 등과 같은 다양한 위젯에서 테마의 스타일이 어떻게 적용되는지 확인할 수 있습니다. 이를 통해 테마가 앱의 모든 구성 요소에 어떻게 일관성 있는 디자인을 제공하는지 이해할 수 있습니다.&#x20;

테마를 더 자세히 사용하거나 커스터마이징이 필요한 경우, 플러터 공식 문서 및 추가 자료를 참고하여 다양한 위젯을 개발할 수 있습니다. 이로써 앱의 디자인을 더욱 개선할 수 있습니다.&#x20;

플러터 앱에서 테마를 적용하는 것은 사용자 경험을 향상시키고 일관된 디자인을 유지하는 데 중요한 역할을 합니다. 테마 색상과 테마 쇼케이스를 통해 테마의 기본 원리를 익히고, 테마 적용 가이드를 참고하여 더 복잡한 앱 디자인을 구현할 수 있으며, 이를 통해 사용자들에게 훌륭한 앱 경험을 제공할 수 있습니다.&#x20;