سلام، در این مقاله قصد دارم درباره‌ی نحوه‌ی پیاده‌سازی تم روشن و تاریک در Jetpack Compose صحبت کنم. موضوعی که در طراحی رابط کاربری بسیار اهمیت دارد، تطبیق رابط با شرایط نوری مختلف (روز و شب) است. در این مطلب یاد می‌گیریم چگونه اپلیکیشن خود را طوری تنظیم کنیم که به‌صورت خودکار  بین این دو حالت جابه‌جا شود.

ایجاد پروژه جدید در Android Studio

در ابتدا یک پروژه ساده در Android Studio ایجاد می‌کنیم:

تعریف رنگ‌ها در فایل Color.kt

در این جا ، من روی فایل Color.kt کلیک کردم که داره نشون میده که کد رنگ ها رو اضافه کردم که برای حالت شب است ، برای حالت روز با همین نام هاست فقط اول هر نام Light جدا میشه چون Primary رو در قسمت فایل Theme.kt در قسمت Primary استفاده میشه ،  اگر در مال شما این کد ها نیست میتونید این ها رو کپی کنید ، نگران نباشید در آینده باید این ها  رو به صورت سلیقه خودتون بچینید

کد رنگها :

//Dark Theme
val darkPrimary = Color(0xFF00FF00)
//val darkOnPrimary =
//val darkBackground =
//val darkOnBackground =
//val darkSurface =
//val darkOnSurface =

تنظیمات تم در فایل Theme.kt

در ادامه من وارد  فایل  Theme.kt میشم که  میشه گفت فایل اصلی ما هست که بخوایم این تم ها رو عوض کنیم

کد های عکس بالا در زیر هستند  و همین طوری که در فایل Color.kt توضیح دادم رنگ های که در اون جا هست رو میتونید در این این جا استفاده کنید مثلا در قسمت Primary من از کد رنگ مستقیم استفاده کردم و یا میتونید به رنگی که در Color.kt تعریف شده است ارجاع بدید مانند onPrimary .

کد کامل این فایل رو می تونید در پایین ببینید:

import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Shapes
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext

// رنگ‌های دلخواه برای روز
private val LightColorScheme = lightColorScheme(
    primary = Color(0xFF00FF00), // سبز
    onPrimary = Color.White,
    background = Color.Blue,
    onBackground = Color.Black,
    surface = Color(0xFFE0F2F1),
    onSurface = Color.Black
)

// رنگ‌های دلخواه برای شب
private val DarkColorScheme = darkColorScheme(
    primary = Color(0xFFFF0000), // قرمز
    onPrimary = Color.Black,
    background = Color(0xFF121212),
    onBackground = Color.White,
    surface = Color(0xFF1E1E1E),
    onSurface = Color.White
)

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    //    val colorScheme = when {
//        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
//            val context = LocalContext.current
//            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
//        }
//
//        darkTheme -> DarkColorScheme
//        else -> LightColorScheme
//    }
    val colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

توضیحات کد :

• در بالای این کد ، دوتا متغییر میبینید مانند private val DarkColorScheme که این ها نگه دارنده رنگ های هستند که یا به صورت مستقیم در این فایل تعریف شده اند یا اینکه در فایل Color.kt تعریف شده اند
• AppTheme : این تابع مسئول اصلی عوض کردن تم برنامه ما است
• قسمت کامنت شده : این قسمت برای Dynamic Color هستش که من این قسمت رو غیر فعال کردم و از یک کد ساده استفاده کردم که این کار تغییر رنگ رو انجام بده .

• Dynamic Color :یعنی برنامه به صورت خودکار از رنگ‌های والپیپر گوشی کاربر استفاده می‌کنه تا رنگ‌های رابط کاربری خودش رو بسازه.

• MaterialTheme : یک کامپوننت اصلی در Jetpack Compose هست که به ما این امکان رو می‌ده تا رنگ‌ها، تایپوگرافی (فونت‌ها)، و شکل‌ها (Shapeها) رو در کل اپلیکیشن یا یک بخش خاص از UI اعمال کنیم

پیاده‌سازی تم در MainActivity.kt

در ادامه کار میریم سراغ فایل MainActivity :

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AppTheme {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(30.dp)
                        .background(MaterialTheme.colorScheme.background)
                ) {
                    Box(
                        modifier = Modifier
                            .size(100.dp)
                            .padding(20.dp)
                            .background(
                                MaterialTheme.colorScheme.primary
                            )
                    ) {
                        Text(
                            text = "Hello!",
                            modifier = Modifier.size(100.dp)


                        )
                    }
                    Box(Modifier.size(100.dp)) {
                        Text(
                            text = "Word!",
                            modifier = Modifier
                                .size(100.dp)
                                .background(MaterialTheme.colorScheme.primary)
                        )
                    }
                }
            }
        }
    }
}

در این فایل من کد های پیش فرض رو پاک کردم و به این صورت ساده تغییر دادم که یک ستون و دوتا box دارم

در این جا ما تابع AppTheme رو میبینم که میشه همون تابعی که در فایل تم در پایین صفحه بود که مسئول عوض کردن تم بود ، این تابع باید درداخل SetContent قرار بگیره بعد طرح کلی برنامه در داخل این تابع AppTheme قرار میگیره ، اگر دقت کنی ، در داخل این تابع من یه ستون دارم که برای Background اون این دستور رو استفاده کرده ام ،

MaterialTheme.colorScheme.primary

این دستور میگه برای رنگ پس زمینه Background   این نما View برو از سیستم متریال تم ، از ساختار رنگ ها ، رنگ پس زمینه رو برای ما انتخاب کن و در ویو مورد نظر اعمال کن .

این میشه کلیات کار با تم ها که اگه گوشی روی حالت شب یا روز تغییر کنه و اگه این تیکه کد برای هر پیس زمینه ای از ویو های ست بشن ، اون ویو تغییر رنگ میده.

معرفی فایل ColorScheme.kt

در پایان دوست دارم این فایل ColorScheme معرفی کنم

اگه دکمه‌ی Ctrl رو نگه داری و روی colorScheme کلیک کنی، می‌ری داخل یه فایلی به اسم ColorScheme.kt.
این فایل بهمون نشون می‌ده که هر رنگ قراره کجاها توی اپلیکیشن استفاده بشه. یعنی می‌گه مثلاً رنگ primary بیشتر برای چی کاربرد داره، یا error کجاها باید نمایش داده بشه.

وقتی بری بالاتر توی این فایل و یکم اسکرول کنی، یه سری توضیحات برات نوشته که دقیقاً همین چیزا رو روشن می‌کنه.

نکات تکمیلی برای طراحی تم حرفه‌ای

در ادامه ،

• انتخاب رنگ های مناسب برای هر قسمت برنامه
• اموزش استفاده از سایت طراحی تم های متریال استاندارد
• انتخاب جفت رنگ های مکمل هم دیگه
• انتخاب رنگ های متضاد
• درست کردن تم های استاندارد
• درست کردن پالت های تم برای هر رنگ و تصویر

این موارد رو در این مقاله با عنوان استفاده از Materail Theme Builder توضیح دادم که در درست کردن تم ها حرفه ای بشی و بتونی ، شکل برنامه ات رو به صورت خیلی جذاب جلوه بدی .

ممنون که این مطلب رو تا این جا مطالعه کردید🤗 ، از مسیر کد زدن لذت ببرید 🥰