SwiftUI Academy · درس

التكيف مع الوضع الفاتح والداكن

استخدم الألوان الدلالية لكلا المظهرين

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

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

مظهران

يوفر iOS نمطي Light وDark Mode، ويمكن للمستخدمين التبديل بينهما في أي وقت. ويبدو التطبيق المتقن رائعًا في كليهما دون جهد إضافي.

استخدم الألوان الدلالية

استخدم semantic colors مثل Color.primary أو Color(.systemBackground). فهي تتبدل تلقائيًا بين المظهرين.

Text("Title")
    .foregroundStyle(.primary)
    .background(Color(.systemBackground))

تجنب الألوان الثابتة

تظل خلفية Color.black الثابتة سوداء في Dark Mode، وقد تختفي التفاصيل فيها. تتكيف الألوان الدلالية، أما الألوان المباشرة فلا تتكيف.

Text("Hi")
    .background(.black)

ألوان كتالوج الأصول

عرّف لونًا في asset catalog مع قيمتين منفصلتين لـ Any وDark. ثم ارجع إليه باسمه، وسيتبدل تلقائيًا من أجلك.

Color("Brand")

الأساسي والثانوي

استخدم .secondary للنص الأقل أهمية. إذ يخفت بصورة مناسبة في كل نمط مع بقائه مقروءًا.

Text("Subtitle")
    .foregroundStyle(.secondary)

المواد لإضافة العمق

تعمل materials النظامية مثل .ultraThinMaterial على تمويه الخلفية والتكيف مع النمط، مما يمنح البطاقات مظهرًا أصليًا.

VStack { }
    .background(.ultraThinMaterial)

اكتشاف النمط

اقرأ المظهر الحالي باستخدام @Environment(\.colorScheme) عندما تحتاج فعلًا إلى عرض محتوى مختلف لكل نمط.

@Environment(\.colorScheme) var scheme

التفرع حسب النمط

بعد الحصول على colorScheme، يمكنك اختيار أصل، مثل تبديل شعار، فقط عندما لا يتمكن semantic color من أداء المهمة.

Image(scheme == .dark ? "logoDark" : "logoLight")

معاينة النمطين

أضف .preferredColorScheme(.dark) إلى المعاينة للتحقق من Dark Mode دون مغادرة Xcode.

#Preview {
    ContentView()
        .preferredColorScheme(.dark)
}

فرض نمط معين

يمكنك تثبيت شاشة على نمط معين باستخدام preferredColorScheme، لكن يُفضّل احترام اختيار المستخدم في النظام كلما أمكن.

ContentView()
    .preferredColorScheme(.dark)

تحقق من التباين

تحقق من بقاء النص مقروءًا في كلا النمطين. فالتباين الجيد جزء من إمكانية الوصول، وليس مجرد أسلوب بصري.

تحقق سريع

أي اختيار للون يتكيف تلقائيًا بين Light وDark Mode؟

أجب عليها في الدرس التفاعلي

مراجعة

أصبح تطبيقك يبدو صحيحًا في أي مظهر: اعتمد على semantic colors وألوان الأصول والمواد، وعاين النمطين. 🌓

البدء مجانًا

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

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

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

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

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

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

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

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

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

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

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

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

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

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

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

← العودة إلى SwiftUI Academy