นำ Dark Mode มาใช้กับ Velog

 (velog.io)
11 คะแนน โดย velopert 2022-02-04 | ยังไม่มีความคิดเห็น | แชร์ทาง WhatsApp

นี่คือเรื่องราวของการนำ Dark Mode มาใช้กับบริการที่เดิมไม่ได้ออกแบบโดยคำนึงถึง Dark Mode ไว้ตั้งแต่แรก

เขียนจากทั้งมุมมองของ UX Designer และมุมมองของนักพัฒนา

  • การเลือกเทคโนโลยี

    • Velog ใช้งาน React และ Styled Components อยู่

    • ThemeProvider ของ Styled Components ตั้งค่าธีมด้วย JS จึงมีข้อจำกัดในการแสดงธีมของระบบเป็นค่าเริ่มต้น หากจะให้ตามธีมของระบบ จำเป็นต้องเรียก JS ฝั่งเบราว์เซอร์หนึ่งครั้ง จึงไม่เหมาะกับ Velog ที่ใช้ SSR หากไม่ได้ต้องการตรึงธีมเริ่มต้นไว้

    • หากใช้ CSS Variable จะทำให้ตั้งค่าให้ใช้ธีมของระบบเป็นค่าเริ่มต้นได้

    • เพื่อใช้ CSS Variable ในสภาพแวดล้อม CSS in JS จึงจัดการค่าสีด้วยออบเจ็กต์ JS และเขียนฟังก์ชันยูทิลิตีเพื่อป้องกันความผิดพลาดและใช้ประโยชน์จากการเติมคำอัตโนมัติของ TypeScript

  • การออกแบบพาเลตสำหรับ Dark Mode

    • กำหนดสีโดยอิงจากสีพื้นหลัง, สีข้อความ, สีเส้นขอบ, สี Primary และสี Destructive

    • สำหรับสีพื้นหลัง ตอนแรกจัดตามระดับความสว่าง 1 2 3 4 แต่เมื่อใช้กับ UI จริงกลับไม่สามารถจับคู่แบบ 1:1 ได้เสมอ จึงปรับวิธีจัดการเล็กน้อยเพื่อรองรับกรณียกเว้น

    • ตอนกำหนดสีข้อความ สิ่งสำคัญคือต้องตรวจสอบว่าอัตราส่วนคอนทราสต์เหมาะสมหรือไม่ โดยสามารถใช้ WebAIM เพื่อตรวจว่าผ่าน WCAG หรือไม่

    • สี Primary และ Destructive แม้ใช้สีเดิมก็ยังคอนทราสต์ดีบนพื้นหลังมืด แต่ถ้าใช้สีแบบ Desaturated จะให้ความรู้สึกเข้ากับธีมมืดมากกว่า

  • งานเปลี่ยนชุดสี

    • ใช้ความช่วยเหลือจาก IDE เพื่อจัดการส่วนที่สามารถแทนที่อัตโนมัติได้

    • ส่วนสีที่เป็นกรณียกเว้นที่เหลือ ปรับตั้งค่าเป็นสีที่เหมาะสมด้วยตนเองทีละจุด

    • หากพบว่าการใช้สีที่มีอยู่เดิมทำให้การออกแบบดูไม่ลงตัว ก็จะเพิ่มสีใหม่เข้าไปในพาเลตตามความจำเป็นแล้วจัดการต่อไป

    • ในทางปฏิบัติ งานส่วนนี้ใช้แรงมากที่สุด

  • ฟังก์ชันสลับ Dark Theme

    • ใช้เอฟเฟกต์ทรานซิชันด้วย CSS transition ของการ rotate และ scale กับ SVG สองชิ้น

    • เมื่อผู้ใช้สลับ Dark Theme จะบันทึกค่าตั้งค่าของผู้ใช้ลงใน localStorage และ cookie

    • localStorage ใช้ใน CSR และ cookie ใช้ใน SSR

หลังจากลองนำธีมมืดมาใช้จริง ก็รู้สึกว่าการใส่ธีมมืดให้กับ UI ที่ไม่ได้ออกแบบโดยคำนึงถึงมันตั้งแต่แรกเป็นงานที่ยากมาก ต่อไปเวลาวางแผนจะต้องคำนึงถึงธีมมืดในการออกแบบเสมอ และเมื่อตั้งชื่อสี ก็น่าจะสะดวกกว่าในอนาคตหากใช้การตั้งชื่อตามการใช้งานอย่าง text1, text2 แทนการใช้ชื่อแบบ gray1, gray2

บทความที่เกี่ยวข้อง

ยังไม่มีความคิดเห็น

ยังไม่มีความคิดเห็น