MaterialTheme og farveskemaer
Definér appens farvepalette ét sted.
MaterialTheme og farveskemaer er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Ét tema til at styre dem alle
MaterialTheme er omslaget, der giver farver, skrifttyper og former videre til alle Composable-elementer i det, så du kan style din app ét sted. 🎨
Ompak din app
Du pakker normalt hele din brugerflade ind i appens tema, som har MaterialTheme som kerne. Alt indeni læser derefter fra denne ene kilde.
AppTheme {
// your screens go here
}Pladsen colorScheme
Det første, colorScheme definerer, er din palet: de navngivne farver, som alle Material-komponenter automatisk bruger.
MaterialTheme(
colorScheme = lightColorScheme()
) { /* app */ }Roller, ikke rå farver
Material 3 bruger farveroller som primary og surface i stedet for rå hex-farver overalt, så komponenterne forbliver ensartede og nemme at give et nyt tema.
primary og onPrimary
Rollen primary er din brandfarve til vigtige handlinger, og onPrimary er den læselige farve, der tegnes oven på den, f.eks. hvid tekst på en blå knap.
Overflader og baggrunde
Rollerne surface og background farvelægger kort, ark og skærmen bag alt andet, mens onSurface holder indholdet læseligt på dem.
Opret et lyst skema
Du sammensætter en palet med lightColorScheme, overskriver kun de roller, du har brug for, og lader fornuftige standardværdier udfylde resten.
val scheme = lightColorScheme(
primary = Color(0xFF1A73E8)
)Aflæs en farve i kode
I enhver Composable henter du temafarver via MaterialTheme.colorScheme, så en farveændring i temaet slår igennem overalt på én gang.
val c = MaterialTheme.colorScheme.primaryFarvelæg en overflade
Send en rolle til en Composable, så den forbliver en del af temaet; her farvelægger en Surface sig selv med primary-farven fra den aktive colorScheme.
Surface(color = MaterialTheme.colorScheme.primary) {
Text("Hi")
}Containerroller
Roller som primaryContainer giver blødere, tonede baggrunde til chips og fremhævelser, kombineret med onPrimaryContainer til deres tekst.
Skift tema på få sekunder
Fordi komponenterne henter farver fra temaet, omstyler udskiftning af én colorScheme straks hele appen uden ændringer af de enkelte elementer. ✨
Hurtigt tjek
Hvor findes appens gennemgående farver i Material 3?
Opsummering: Én palet overalt
Du pakkede din app ind i MaterialTheme, definerede en colorScheme med roller og læste farverne tilbage i koden, så én palet styler hele brugerfladen. 🎉
Lær Kotlin med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “MaterialTheme og farveskemaer” gratis?
Ja — hele teksten til “MaterialTheme og farveskemaer” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “MaterialTheme og farveskemaer”?
Definér appens farvepalette ét sted. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Jetpack Compose Academy?
Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “MaterialTheme og farveskemaer”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?
Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- MaterialTheme og farveskemaer
- Typografi- og formtokens
- Mørk tilstand og dynamisk farve
- Opbygning af et brugerdefineret designsystem