Jetpack Compose Academy · บทเรียน

โหมดมืดและสีแบบไดนามิก

ปรับสีให้เข้ากับระบบและวอลเปเปอร์

โหมดมืดและสีแบบไดนามิก เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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. 🎉

คำถามที่พบบ่อย

บทเรียน “โหมดมืดและสีแบบไดนามิก” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “โหมดมืดและสีแบบไดนามิก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “โหมดมืดและสีแบบไดนามิก”

ปรับสีให้เข้ากับระบบและวอลเปเปอร์ คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “โหมดมืดและสีแบบไดนามิก” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม

ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Jetpack Compose Academy