0Pricing
Jetpack Compose Academy · Aula

MaterialTheme e Esquemas de Cores

Defina a paleta do aplicativo em um único lugar.

MaterialTheme e Esquemas de Cores é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

One Theme to Rule Them

MaterialTheme is the wrapper that hands colors, fonts, and shapes to every Composable inside it, so you style your app in one place. 🎨

Wrap Your App

You usually wrap your whole UI in your app theme, which calls MaterialTheme at its core. Everything inside then reads from that single source.

AppTheme {
  // your screens go here
}

The colorScheme Slot

The first thing colorScheme defines is your palette: the named colors every Material component reaches for automatically.

MaterialTheme(
  colorScheme = lightColorScheme()
) { /* app */ }

Roles, Not Raw Colors

Material 3 uses color roles like primary and surface instead of raw hex everywhere, so components stay consistent and easy to retheme.

primary & onPrimary

The primary role is your brand color for key actions, and onPrimary is the readable color drawn on top of it, like white text on a blue button.

Surfaces & Backgrounds

The surface and background roles paint cards, sheets, and the screen behind everything, while onSurface keeps content legible on them.

Build a Light Scheme

You craft a palette with lightColorScheme, overriding only the roles you care about and letting sensible defaults fill the rest.

val scheme = lightColorScheme(
  primary = Color(0xFF1A73E8)
)

Read a Color in Code

Inside any Composable you grab theme colors through MaterialTheme.colorScheme, so a color change in the theme flows everywhere at once.

val c = MaterialTheme.colorScheme.primary

Tint a Surface

Pass a role into a Composable and it stays on-theme; here a Surface paints itself with the primary color from the active colorScheme.

Surface(color = MaterialTheme.colorScheme.primary) {
  Text("Hi")
}

Container Roles

Roles like primaryContainer give softer, tonal backgrounds for chips and highlights, paired with onPrimaryContainer for their text.

Retheme in Seconds

Because components ask the theme for colors, swapping one colorScheme instantly restyles the entire app, with no per-widget edits. ✨

Quick Check

Where do your app-wide colors live in Material 3?

Recap: One Palette, Everywhere

You wrapped your app in MaterialTheme, defined a colorScheme of roles, and read colors back in code so one palette styles the whole UI. 🎉

Perguntas Frequentes

A aula “MaterialTheme e Esquemas de Cores” é grátis?

Sim — o texto completo de “MaterialTheme e Esquemas de Cores” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.

O que vou aprender em “MaterialTheme e Esquemas de Cores”?

Defina a paleta do aplicativo em um único lugar. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Jetpack Compose Academy?

Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “MaterialTheme e Esquemas de Cores”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Jetpack Compose Academy?

Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. MaterialTheme e Esquemas de Cores
  2. Tipografia e Tokens de Forma
  3. Modo Escuro e Cores Dinâmicas
  4. Criando um Sistema de Design Personalizado
← Voltar para Jetpack Compose Academy