ใช้ธีมมืด

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

รูปที่ 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">

นอกจากนี้ คุณยังใช้ธีมมืดของ Material Components ได้ด้วย

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

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

ธีมและสไตล์

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

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

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

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

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

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

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

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

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

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

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

บังคับใช้ธีมมืด

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

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

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

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

ปิดใช้การบังคับใช้ธีมมืดในมุมมอง

คุณควบคุมการบังคับใช้ธีมมืดในมุมมองที่เฉพาะเจาะจงได้ด้วยแอตทริบิวต์เลย์เอาต์ android:forceDarkAllowed หรือด้วย setForceDarkAllowed()

เนื้อหาเว็บ

ดูข้อมูลเกี่ยวกับการใช้ธีมมืดในเนื้อหาบนเว็บได้ที่หัวข้อทำให้เนื้อหาเว็บมืดลงใน WebView ดูตัวอย่างธีมมืดที่ใช้กับ WebView ได้ที่เดโม WebView ใน GitHub

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

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

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

สำหรับแพลตฟอร์ม 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;
}