ใช้ธีมมืด

ลองใช้วิธีการเขียน
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีใช้งานการกำหนดธีมใน Compose

วันที่
รูปที่ 1 ธีมมืด

ธีมมืดพร้อมใช้งานใน Android 10 (API ระดับ 29) ขึ้นไป โดยมี ประโยชน์ดังต่อไปนี้

  • ลดการใช้พลังงานลงได้มาก โดยขึ้นอยู่กับลักษณะการใช้งานของอุปกรณ์ เทคโนโลยีหน้าจอ
  • ปรับปรุงการแสดงผลสำหรับผู้ใช้ที่สายตาเลือนรางและผู้ที่มีความไวต่อ แสงจ้า
  • ช่วยให้ใช้อุปกรณ์ในสภาพแวดล้อมที่มีแสงน้อยได้ง่ายขึ้น

ธีมมืดจะมีผลกับ UI ของระบบ Android และแอปที่ทำงานในอุปกรณ์

คุณเปิดใช้ธีมมืดใน Android 10 ขึ้นไปได้ 3 วิธีดังนี้

  • ใช้การตั้งค่าระบบโดยไปที่การตั้งค่า > การแสดงผล > ธีมเป็น เปิดใช้ธีมมืด
  • ใช้การ์ดการตั้งค่าด่วนเพื่อเปลี่ยนธีมจากถาดการแจ้งเตือน เมื่อเปิดใช้
  • ในอุปกรณ์ Pixel ให้เปิดใช้โหมดประหยัดแบตเตอรี่เพื่อเปิดใช้ธีมมืดพร้อมกัน อุปกรณ์อื่นๆ อาจไม่รองรับการทำงานนี้

สำหรับคำแนะนำในการใช้ธีมมืดกับเนื้อหาบนเว็บโดยใช้ WebView โปรดดูทำให้เนื้อหาเว็บมืดใน WebView

รองรับธีมมืดในแอป

หากต้องการรองรับธีมมืด ให้ตั้งค่าธีมของแอป ซึ่งโดยทั่วไปจะอยู่ใน res/values/styles.xml - หากต้องการรับค่าจากธีม DayNight ให้ทำดังนี้

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

หรือจะใช้คอมโพเนนต์วัสดุแบบมืดก็ได้

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

ซึ่งจะเชื่อมโยงธีมหลักของแอปกับแฟล็กโหมดกลางคืนที่ระบบควบคุม ทำให้แอปมีธีมมืดเริ่มต้นเมื่อเปิดใช้

ธีมและสไตล์

หลีกเลี่ยงการใช้สีแบบฮาร์ดโค้ดหรือไอคอนสำหรับใช้ในธีมสว่าง ใช้ แอตทริบิวต์ธีม หรือทรัพยากรสำหรับกลางคืนแทน

แอตทริบิวต์ของธีม 2 อย่างที่สำคัญที่สุดสำหรับธีมมืดมีดังนี้

  • ?android:attr/textColorPrimary: สีข้อความอเนกประสงค์ ใช่เลย โหมดเกือบดำในธีมสว่างและขาวเกือบขาวในธีมมืด ประกอบด้วย สถานะปิดใช้
  • ?attr/colorControlNormal: สีของไอคอนสำหรับจุดประสงค์ทั่วไป ประกอบด้วย สถานะปิดใช้

เราขอแนะนำให้ใช้ดีไซน์ Material คอมโพเนนต์ เนื่องจากธีมสี ระบบ เช่น ธีม ?attr/colorSurface และ ?attr/colorOnSurface ทำให้สามารถเข้าถึง ไปจนถึงสีที่เหมาะสม คุณปรับแต่งแอตทริบิวต์เหล่านี้ในธีมได้

เปลี่ยนธีมในแอป

คุณอนุญาตให้ผู้ใช้เปลี่ยนธีมของแอปขณะที่แอปทำงานอยู่ได้ ดังต่อไปนี้ คือตัวเลือกที่แนะนำ

  • น้อย
  • มืด
  • ค่าเริ่มต้นของระบบ (ตัวเลือกเริ่มต้นที่แนะนํา)

ตัวเลือกเหล่านี้จับคู่กับ AppCompat.DayNight โหมดโดยตรง

หากต้องการเปลี่ยนธีม ให้ทำดังนี้

  • สำหรับ API ระดับ 31 ขึ้นไป ให้ใช้ UiModeManager#setApplicationNightMode เพื่อให้ระบบทราบว่าแอปของคุณเรียกใช้ธีมใด ซึ่งจะช่วยให้ระบบจับคู่ ธีมระหว่างหน้าจอแนะนำ

  • สำหรับ API ระดับ 30 และต่ำกว่า ให้ใช้ AppCompatDelegate.setDefaultNightMode() เพื่อเปลี่ยนธีม

บังคับใช้โหมดมืด

Android 10 มีฟีเจอร์ Force Dark ซึ่งเป็นฟีเจอร์สำหรับนักพัฒนาแอป ใช้ธีมมืดได้อย่างรวดเร็วโดยไม่ต้องตั้งค่าธีม DayNight อย่างชัดเจน

Force Dark จะวิเคราะห์แต่ละมุมมองของแอปธีมสว่างและใช้ธีมมืด โดยอัตโนมัติก่อนที่จะวาดลงบนหน้าจอ คุณใช้ Force Dark ผสมกันได้ และการใช้งานแบบเนทีฟเพื่อลดเวลาที่ต้องติดตั้งใช้งาน

แอปต้องเลือกใช้ฟีเจอร์บังคับใช้โหมดมืดโดยการตั้งค่า android:forceDarkAllowed="true" ใน ธีมของกิจกรรม แอตทริบิวต์นี้ได้รับการตั้งค่าในทุกระบบ และ ธีมสว่างที่ AndroidX มีให้ เช่น Theme.Material.Light เมื่อคุณใช้ บังคับใช้โหมดมืด ทดสอบแอปอย่างละเอียดและยกเว้นมุมมองตามความจำเป็น

หากแอปใช้ธีมมืด เช่น Theme.Material) ฟีเจอร์บังคับใช้ธีมมืดจะไม่เปิดใช้ ใช้แล้ว ในทํานองเดียวกัน หากธีมของแอปรับช่วงมาจากธีม DayNight จะบังคับ ไม่ใช้ธีมมืดเนื่องจากมีการเปลี่ยนธีมอัตโนมัติ

ปิดใช้ฟีเจอร์บังคับมืดในมุมมอง

ปุ่ม "บังคับมืด" สามารถควบคุมได้ในบางมุมมองด้วย แอตทริบิวต์เลย์เอาต์ android:forceDarkAllowed หรือด้วย setForceDarkAllowed()

เนื้อหาเว็บ

โปรดดูข้อมูลเกี่ยวกับการใช้ธีมมืดในเนื้อหาบนเว็บที่หัวข้อดาร์กเว็บ ใน WebView ตัวอย่างธีมมืด ที่ใช้กับ WebView แล้ว โปรดดูการสาธิต WebView เกี่ยวกับ GitHub ที่ใช้เวลาเพียง 2 นาที

แนวทางปฏิบัติแนะนำ

ส่วนต่อไปนี้จะอธิบายแนวทางปฏิบัติแนะนำในการใช้ธีมมืด

การแจ้งเตือนและวิดเจ็ต

สำหรับแพลตฟอร์ม UI ที่คุณแสดงในอุปกรณ์แต่ไม่ได้ควบคุมโดยตรง โปรด โปรดตรวจสอบว่าข้อมูลพร็อพเพอร์ตี้ที่คุณใช้นั้นสอดคล้องกับธีมของแอปโฮสต์ ตัวอย่าง 2 รายการได้แก่ การแจ้งเตือนและวิดเจ็ต Launcher

การแจ้งเตือน

ใช้เทมเพลตการแจ้งเตือนที่ระบบมีให้ เช่น MessagingStyle ช่วงเวลานี้ หมายความว่าระบบมีหน้าที่ใช้การจัดรูปแบบมุมมองที่ถูกต้อง

มุมมองวิดเจ็ตและการแจ้งเตือนที่กำหนดเอง

สำหรับวิดเจ็ต Launcher หรือหากแอปของคุณใช้มุมมองเนื้อหาการแจ้งเตือนที่กำหนดเอง ทดสอบเนื้อหาทั้งในธีมสว่างและธีมมืด

ข้อผิดพลาดทั่วไปที่ควรระวังมีดังต่อไปนี้

  • สมมติว่าสีพื้นหลังเป็นสีอ่อนเสมอ
  • สีข้อความแบบฮาร์ดโค้ด
  • การตั้งค่าสีพื้นหลังแบบฮาร์ดโค้ดโดยใช้สีข้อความเริ่มต้น
  • ใช้ไอคอนที่ถอนออกได้ที่เป็นสีคงที่

ในกรณีเหล่านี้ ให้ใช้แอตทริบิวต์ธีมที่เหมาะสมแทนการเข้ารหัสแบบฮาร์ดโค้ด สีต่างๆ

หน้าจอเรียกใช้

หากแอปมีหน้าจอเปิดใช้งานที่กำหนดเอง คุณอาจต้องแก้ไขหน้าจอเพื่อให้ ตรงกับธีมที่เลือก

ลบสีแบบฮาร์ดโค้ด เช่น สีพื้นหลังที่ตั้งค่าแบบเป็นโปรแกรมเป็น สีขาว ให้ใช้แอตทริบิวต์ธีม ?android:attr/colorBackground แทน

การเปลี่ยนแปลงการกำหนดค่า

เมื่อธีมของแอปเปลี่ยน ไม่ว่าจะผ่านการตั้งค่าระบบหรือ AppCompat ทริกเกอร์ uiMode การเปลี่ยนการกำหนดค่า ซึ่งหมายความว่าระบบจะสร้างกิจกรรมต่างๆ ขึ้นโดยอัตโนมัติ

ในบางกรณี คุณอาจต้องการให้แอปจัดการการเปลี่ยนแปลงการกำหนดค่า สำหรับ เช่น คุณอาจต้องเลื่อนการเปลี่ยนการกำหนดค่าเนื่องจากวิดีโอ กำลังเล่น

แอปจะจัดการการใช้ธีมมืดได้โดยประกาศว่า Activity สามารถจัดการการเปลี่ยนแปลงการกำหนดค่าของ uiMode ได้ดังนี้

<activity
    android:name=".MyActivity"
    android:configChanges="uiMode" />

เมื่อ Activity ประกาศว่าจัดการการเปลี่ยนแปลงการกำหนดค่า onConfigurationChanged() ระบบจะเรียกเมธอดเมื่อเปลี่ยนธีม

หากต้องการตรวจสอบธีมปัจจุบัน แอปสามารถเรียกใช้โค้ดได้ดังนี้

Kotlin

val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
when (currentNightMode) {
    Configuration.UI_MODE_NIGHT_NO -> {} // Night mode is not active, we're using the light theme.
    Configuration.UI_MODE_NIGHT_YES -> {} // Night mode is active, we're using dark theme.
}

Java

int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK;
switch (currentNightMode) {
    case Configuration.UI_MODE_NIGHT_NO:
        // Night mode is not active, we're using the light theme
        break;
    case Configuration.UI_MODE_NIGHT_YES:
        // Night mode is active, we're using dark theme
        break;
}