با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
تم ها در Jetpack Compose از تعدادی ساختار سطح پایین تر و API های مرتبط تشکیل شده اند. اینها را می توان در کد منبعMaterialTheme مشاهده کرد و همچنین می تواند در سیستم های طراحی سفارشی اعمال شود.
کلاس های سیستم تم
یک موضوع معمولاً از تعدادی زیرسیستم تشکیل می شود که مفاهیم بصری و رفتاری مشترک را گروه بندی می کنند. این سیستم ها را می توان با کلاس هایی که دارای مقادیر موضوعی هستند مدل سازی کرد.
برای مثال، MaterialTheme شامل ColorScheme (سیستم رنگ)، Typography (سیستم تایپوگرافی) و Shapes (سیستم شکل) است.
کلاس های سیستم تم به طور ضمنی به درخت ترکیب به عنوان نمونه های CompositionLocal ارائه می شوند. این اجازه می دهد تا مقادیر موضوع به صورت ایستا در توابع ترکیبی ارجاع داده شوند.
تابع تم نقطه ورود و API اولیه است. این نمونههایی از سیستم تم CompositionLocal s را میسازد - با استفاده از مقادیر واقعی هر منطقی که لازم باشد - که با CompositionLocalProvider به درخت ترکیب ارائه میشوند. پارامتر content به ترکیبهای تودرتو اجازه میدهد تا به مقادیر موضوعی نسبت به سلسله مراتب دسترسی داشته باشند.
دسترسی به سیستم های تم با استفاده از یک شی با ویژگی های راحتی انجام می شود. برای یکپارچگی، شیء تمایل دارد که به عنوان تابع موضوع نامگذاری شود. ویژگی ها به سادگی ترکیب فعلی را محلی می کنند.
// Use with eg. Theme.colorSystem.colorobjectTheme{valcolorSystem:ColorSystem@Composableget()=LocalColorSystem.currentvaltypographySystem:TypographySystem@Composableget()=LocalTypographySystem.currentvalcustomSystem:CustomSystem@Composableget()=LocalCustomSystem.current/* ... */}
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-08-28 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 2025-08-28 بهوقت ساعت هماهنگ جهانی."],[],[],null,["Themes in Jetpack Compose are made up of a number of lower-level constructs\nand related APIs. These can be seen in the\n[source code](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/MaterialTheme.kt)\nof `MaterialTheme` and can also be applied in custom design systems.\n\nTheme system classes\n\nA theme is typically made up of a number of subsystems that group common visual and\nbehavioral concepts. These systems can be modeled with classes which have\ntheming values.\n\nFor example, `MaterialTheme` includes\n[`ColorScheme`](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ColorScheme.kt)\n(color system),\n[`Typography`](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Typography.kt)\n(typography system), and\n[`Shapes`](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Shapes.kt)\n(shape system).\n| **Note:** Classes should be annotated with [`Stable`](/reference/kotlin/androidx/compose/runtime/Stable) or [`@Immutable`](/reference/kotlin/androidx/compose/runtime/Immutable) to provide information to the Compose compiler. To learn more, check out the [Lifecycle of composables guide](/develop/ui/compose/lifecycle#skipping).\n\n\n```kotlin\n@Immutable\ndata class ColorSystem(\n val color: Color,\n val gradient: List\u003cColor\u003e\n /* ... */\n)\n\n@Immutable\ndata class TypographySystem(\n val fontFamily: FontFamily,\n val textStyle: TextStyle\n)\n/* ... */\n\n@Immutable\ndata class CustomSystem(\n val value1: Int,\n val value2: String\n /* ... */\n)\n\n/* ... */https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/ThemeAnatomySnippets.kt#L31-L52\n```\n\n\u003cbr /\u003e\n\nTheme system composition locals\n\nTheme system classes are implicitly provided to the composition tree as\n[`CompositionLocal`](/reference/kotlin/androidx/compose/runtime/CompositionLocal)\ninstances. This allows theming values to be statically referenced in composable\nfunctions.\n\nTo learn more about `CompositionLocal`, check out the\n[Locally scoped data with CompositionLocal guide](/develop/ui/compose/compositionlocal).\n| **Note:** You can create a class's `CompositionLocal` with [`compositionLocalOf`](/reference/kotlin/androidx/compose/runtime/package-summary#compositionlocalof) or [`staticCompositionLocalOf`](/reference/kotlin/androidx/compose/runtime/package-summary#staticcompositionlocalof). These functions have a `defaultFactory` trailing lambda to provide fallback values of the same type that they're providing. It's a good idea to use reasonable defaults like `Color.Unspecified`, `TextStyle.Default`, etc.\n\n\n```kotlin\nval LocalColorSystem = staticCompositionLocalOf {\n ColorSystem(\n color = Color.Unspecified,\n gradient = emptyList()\n )\n}\n\nval LocalTypographySystem = staticCompositionLocalOf {\n TypographySystem(\n fontFamily = FontFamily.Default,\n textStyle = TextStyle.Default\n )\n}\n\nval LocalCustomSystem = staticCompositionLocalOf {\n CustomSystem(\n value1 = 0,\n value2 = \"\"\n )\n}\n\n/* ... */https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/ThemeAnatomySnippets.kt#L56-L77\n```\n\n\u003cbr /\u003e\n\nTheme function\n\nThe theme function is the entry point and primary API. It constructs instances\nof the theme system `CompositionLocal`s --- using real values any logic\nrequired --- that are provided to the composition tree with\n[`CompositionLocalProvider`](/reference/kotlin/androidx/compose/runtime/package-summary#compositionlocalprovider).\nThe `content` parameter allows nested composables to access theming values\nrelative to the hierarchy.\n\n\n```kotlin\n@Composable\nfun Theme(\n /* ... */\n content: @Composable () -\u003e Unit\n) {\n val colorSystem = ColorSystem(\n color = Color(0xFF3DDC84),\n gradient = listOf(Color.White, Color(0xFFD7EFFF))\n )\n val typographySystem = TypographySystem(\n fontFamily = FontFamily.Monospace,\n textStyle = TextStyle(fontSize = 18.sp)\n )\n val customSystem = CustomSystem(\n value1 = 1000,\n value2 = \"Custom system\"\n )\n /* ... */\n CompositionLocalProvider(\n LocalColorSystem provides colorSystem,\n LocalTypographySystem provides typographySystem,\n LocalCustomSystem provides customSystem,\n /* ... */\n content = content\n )\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/ThemeAnatomySnippets.kt#L81-L106\n```\n\n\u003cbr /\u003e\n\nTheme object\n\nAccessing theme systems is done using an object with convenience properties. For\nconsistency, the object tends to be named the same as the theme function. The\nproperties simply get the current composition local.\n\n\n```kotlin\n// Use with eg. Theme.colorSystem.color\nobject Theme {\n val colorSystem: ColorSystem\n @Composable\n get() = LocalColorSystem.current\n val typographySystem: TypographySystem\n @Composable\n get() = LocalTypographySystem.current\n val customSystem: CustomSystem\n @Composable\n get() = LocalCustomSystem.current\n /* ... */\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/ThemeAnatomySnippets.kt#L110-L122\n```\n\n\u003cbr /\u003e\n\nRecommended for you\n\n- Note: link text is displayed when JavaScript is off\n- [Locally scoped data with CompositionLocal](/develop/ui/compose/compositionlocal)\n- [Custom design systems in Compose](/develop/ui/compose/designsystems/custom)\n- [Material Design 3 in Compose](/develop/ui/compose/designsystems/material3)"]]