Jetpack Compose Academy · درس

الوضع الداكن واللون الديناميكي

كيّف الألوان مع النظام والخلفية

الدرس 3 من 413 خطوة

الوضع الداكن واللون الديناميكي درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Two Palettes, One App

A polished app ships both a light and a dark palette. You define them as separate colorScheme objects and switch between them at the theme level. 🌙

Detect the System Setting

You ask the system which mode is active with isSystemInDarkTheme, a Composable that returns true when the user prefers dark.

val dark = isSystemInDarkTheme()

Pick the Scheme

With that flag you choose which palette to pass into MaterialTheme, so the app follows the system dark mode setting automatically.

val scheme = if (dark) darkColorScheme()
  else lightColorScheme()

darkColorScheme Defaults

The darkColorScheme builder ships sensible low-light defaults, so even before customizing you get readable, comfortable dark surfaces.

Contrast Still Matters

In dark mode you keep the same color roles, but tune surfaces darker and on-colors lighter so text stays easy to read.

What Is Dynamic Color

Dynamic color is Material You magic: on Android 12 and up the system can derive your palette from the user's wallpaper. 🎨

Check the Android Version

Dynamic color needs API 31 or higher, so you gate it with a version check before reaching for the wallpaper-based scheme.

val supported = Build.VERSION.SDK_INT >= 31

Build a Dynamic Scheme

When supported, you call dynamicLightColorScheme or its dark variant with a context to pull colors straight from the wallpaper.

dynamicDarkColorScheme(context)

Always Have a Fallback

On older devices dynamic color is unavailable, so you fall back to your hand-crafted colorScheme to keep branding intact.

Wire It Together

Your theme picks dynamic when allowed, else dark or light by system setting, so one colorScheme choice handles every case.

val scheme = when {
  dynamicOk && dark -> dynamicDarkColorScheme(ctx)
  dark -> darkColorScheme()
  else -> lightColorScheme()
}

Test Both Modes

Preview your screens in light and dark, and on a colorful wallpaper, so dynamic color never surprises you with unreadable combos. ✨

Quick Check

A user on Android 13 sets a purple wallpaper. What can your theme do?

Recap: Adaptive, Personal Color

You detected the system mode with isSystemInDarkTheme, swapped palettes, and layered dynamic color with a safe fallback. 🎉

البدء مجانًا

تعلم Kotlin مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات
30
الدروس
120

الأسئلة الشائعة

هل درس «الوضع الداكن واللون الديناميكي» مجاني؟

نعم — نص درس «الوضع الداكن واللون الديناميكي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

ماذا ستتعلم في «الوضع الداكن واللون الديناميكي»؟

كيّف الألوان مع النظام والخلفية تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟

لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «الوضع الداكن واللون الديناميكي»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟

نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. ‏MaterialTheme وأنظمة الألوان
  2. الطباعة ورموز الأشكال
  3. الوضع الداكن واللون الديناميكي
  4. بناء نظام تصميم مخصص
← العودة إلى Jetpack Compose Academy