Bygg ett eget designsystem
Utöka temat med dina egna tokens.
Bygg ett eget designsystem är en gratis lektion i Jetpack Compose Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Jetpack Compose Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Jetpack Compose Academy innehåller totalt 4 lektioner.
Bortom standardvärdena
Verkliga varumärken behöver mer än Materials inbyggda funktioner. Ett design system samlar era färger, er typografi, era former och extra tokens i ett enda återanvändbart tema. 🏗️
Omsluta MaterialTheme
Ni börjar med att skriva en egen Composable-funktion, AppTheme, som konfigurerar MaterialTheme och ger hela appen en enda namngiven ingångspunkt.
@Composable
fun AppTheme(content: @Composable () -> Unit) { /* ... */ }Skicka in era tokens
Inuti AppTheme skickar ni ert anpassade colorScheme, typography och shapes till MaterialTheme, så att varje skärm automatiskt ärver ert brand.
MaterialTheme(
colorScheme = brandColors,
typography = brandType,
shapes = brandShapes
) { content() }Material saknar vissa tokens
Vissa varumärkesvärden, som en grön färg för lyckade resultat eller en anpassad avståndsenhet, har ingen Material-roll. Ni lägger till dessa som egna extra tokens.
Samla extra färger
Ni grupperar extra färger i en liten dataklass, en ordnad plats för varumärkesvärden som Material inte tillhandahåller direkt.
data class BrandColors(
val success: Color,
val warning: Color
)CompositionLocal
Om du vill dela anpassade tokens nedåt i trädet utan att skicka parametrar använder du en CompositionLocal, Compose:s inbyggda mekanism för ambient-värden.
Skapa en Local
Du deklarerar en staticCompositionLocalOf med ett standardvärde och skapar därmed en kanal som alla Composable-funktioner kan läsa dina varumärkesfärger från.
val LocalBrand = staticCompositionLocalOf { defaultBrand }Tillhandahåll värdena
I AppTheme omsluter du innehållet med en CompositionLocalProvider och matar in dina varumärkestokens i trädet tillsammans med MaterialTheme.
CompositionLocalProvider(LocalBrand provides brand) {
MaterialTheme(/* ... */) { content() }
}Läs anpassade tokens
Var som helst längre ned kan en Composable-funktion läsa LocalBrand.current för att hämta dina anpassade värden, på samma sätt som MaterialTheme exponerar sina.
val success = LocalBrand.current.successErbjud ett rent API
Många team exponerar ett objekt så att anropen ser ut som AppTheme.brand.success, ett lättanvänt gränssnitt ovanpå den underliggande CompositionLocal.
En enda källa till sanningen
Nu kommer färger, typografi, former och anpassade tokens alla från ett enda tema, så att appen förblir konsekvent och enkel att vidareutveckla. ✨
Snabb kontroll
Du behöver en varumärkesfärg som Material saknar en roll för och som ska delas i hela appen. Vad använder du?
Sammanfattning: Ditt eget tema
Du omslöt MaterialTheme i ett AppTheme, lade till extra tokens via CompositionLocal och gav appen en enda varumärkesanpassad källa till sanningen. 🎉
Lär dig Kotlin med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Bygg ett eget designsystem” gratis?
Ja – hela texten till ”Bygg ett eget designsystem” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Jetpack Compose Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Jetpack Compose Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Bygg ett eget designsystem”?
Utöka temat med dina egna tokens. Ni övar på Jetpack Compose Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Jetpack Compose Academy?
Du behöver inga förkunskaper. Utbildningen i Jetpack Compose Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Bygg ett eget designsystem”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Jetpack Compose Academy-lektionen?
Ja. Varje Jetpack Compose Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- MaterialTheme och färgscheman
- Typografi och formtokens
- Mörkt läge och dynamisk färg
- Bygg ett eget designsystem