Jetpack Compose Academy · leksjon

MaterialTheme og fargevalg

Definer appens fargepalett på ett sted.

Leksjon 1 av 413 trinn

MaterialTheme og fargevalg er en gratis leksjon i Jetpack Compose Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Jetpack Compose Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Jetpack Compose Academy inneholder totalt 4 leksjoner.

Ett tema som styrer alt

MaterialTheme er omslaget som gir farger, skrifter og former til alle Composable-elementene inni det, slik at du kan style appen på ett sted. 🎨

Omslutte appen

Vanligvis omslutter du hele brukergrensesnittet med appens tema, som har MaterialTheme i kjernen. Alt inni leser deretter fra denne ene kilden.

AppTheme {
  // your screens go here
}

colorScheme-plassen

Det første colorScheme definerer, er paletten din: de navngitte fargene som alle Material-komponenter automatisk bruker.

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

Roller, ikke råfarger

Material 3 bruker fargeroller som primary og surface i stedet for rå heksadesimale farger overalt, slik at komponentene forblir konsistente og enkle å gi nytt tema.

primary og onPrimary

Rollen primary er merkevarefargen din for viktige handlinger, mens onPrimary er den lesbare fargen som vises oppå den, for eksempel hvit tekst på en blå knapp.

Overflater og bakgrunner

Rollene surface og background fargelegger kort, ark og skjermen bak alt annet, mens onSurface sørger for at innholdet er lesbart på dem.

Bygge et lyst skjema

Du lager en palett med lightColorScheme, overstyrer bare rollene du bryr deg om og lar fornuftige standardverdier fylle ut resten.

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

Lese en farge i kode

Inne i en Composable henter du temafarger via MaterialTheme.colorScheme, slik at en fargeendring i temaet slår gjennom overalt samtidig.

val c = MaterialTheme.colorScheme.primary

Fargelegge en overflate

Send en rolle til en Composable, så forblir den i temaet. Her fargelegger en Surface seg selv med primary-fargen fra det aktive colorScheme.

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

Beholderroller

Roller som primaryContainer gir mykere, tonale bakgrunner for chip-er og fremhevinger, kombinert med onPrimaryContainer for teksten.

Gi nytt tema på sekunder

Fordi komponentene ber temaet om farger, gir det å bytte ett colorScheme hele appen et nytt utseende umiddelbart, uten endringer i hver enkelt widget. ✨

Rask sjekk

Hvor ligger de appomfattende fargene dine i Material 3?

Besvar den i den interaktive leksjonen

Oppsummering: Én palett overalt

Du omsluttet appen med MaterialTheme, definerte et colorScheme med roller og leste fargene tilbake i koden, slik at én palett styler hele brukergrensesnittet. 🎉

Gratis å komme i gang

Lær deg Kotlin med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «MaterialTheme og fargevalg» gratis?

Ja – hele teksten i «MaterialTheme og fargevalg» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Jetpack Compose Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Jetpack Compose Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «MaterialTheme og fargevalg»?

Definer appens fargepalett på ett sted. Du øver på Jetpack Compose Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Jetpack Compose Academy?

Ingen tidligere erfaring er nødvendig. Jetpack Compose Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «MaterialTheme og fargevalg»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Jetpack Compose Academy-leksjonen?

Ja. Alle Jetpack Compose Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Jetpack Compose Academy