# 테마 적용

## 테마 색상 &#x20;

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

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

```dart
ShowThemeColors();
```

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

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

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

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

```dart
ThemeShowcase();
```

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

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.aliothx.net/start/uiux/ui-ux/theme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
