Scenic Theme Challenge

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

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

ไม่นานเริ่มมีเสียงสะท้อนบอกว่า "เอาพื้นหลังออกได้ไหมคะ พี่ลายตา" ผมรอประเมินกระแสว่าจะออกมาทางรับไม่ได้มากน้อยเพียงใด แน่นอนว่าส่วนที่ทำเตรียมไว้แล้วในโปรแกรมคือ การเลือกเปลี่ยน theme กลับไปได้ และยังมี theme อื่นให้ลอง เพียงแต่ยังไม่ได้บอกว่าทำอย่างไร

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

ดังที่กล่าวมาแล้ว ระยะหลังผมมักเลือก dark mode ในการใช้งานโปรแกรมต่าง ๆ ถ้ามีให้เลือก จนรู้สึกว่าโปรแกรมเราเองก็ควรมี dark mode บ้าง บางคนใช้โปรแกรมวันละหลายชั่วโมง น่าจะมีคนที่มีปัญหาคล้ายผม แล้วนำไปสู่การทำ theme แบบต่าง ๆ

ด้วยพื้นหลังที่ไม่เป็นสีขาวอย่างเดิม แต่เป็นสีกลาง ๆ ไม่ถึงกับเป็นขั้วตรงข้าม ไม่มืดสุดแบบ dark theme แต่ก็ไม่สว่างมาก ทำให้เจอปัญหาว่าจะต้องปรับเปลี่ยนองค์ประกอบต่าง ๆ ให้สอดรับกับพื้นหลังด้วย เช่น เดิมข้อความต่าง ๆ ที่เคยใช้สีเข้มเพื่อให้ตัดกับพื้นสีขาว พอพื้นหลังเป็นสีเทา หรือโทนสีที่ใกล้เคียงกับตัวอักษร ทำให้ไม่รู้ว่าจะต้องเปลี่ยนสีตัวอักษรเป็นสีอะไรดีเพื่อหนีพื้นหลัง

ผมแบ่งกลุ่มของ theme ตามความยากของปัญหาที่เจอออกเป็น 3 โทนสี

โทนสีสว่างคล้ายกับหน้าจอเดิม กลุ่มนี้ไม่ต้องปรับอะไรมาก ส่วนใหญ่ทำแค่ใส่ลวดลายพื้นหลังเข้าไป เลือกภาพ Subtle Pattern จาก Toptal โดยที่ยังเป็นโทนสีขาวคล้ายของเดิม

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

โทนสีกลาง กลุ่มนี้ผมทดลองทำมา 2 โทน คือ gray กับ sepia ใช้ CSS Gradients จาก SheCodes ไม่ว่าโทนไหนก็ปรับสีของข้อความต่าง ๆ ยาก เพราะมีโอกาสที่สีจะกลืนไปกับพื้นหลัง

ส่วนที่เป็น Title หรือ ตัวอักษรสำคัญขนาดค่อนข้างใหญ่ เดิมสีเข้มเพราะอยู่กับพื้นขาว เพื่อไม่ให้ถูกกลืน ใช้วิธีตัดขอบตัวอักษรด้วยสีสว่าง ทีแรกทำเป็นเส้นขอบล้อมรอบ แต่ติดปัญหาใช้ไม่ได้เมื่อตัวอักษรมีขนาดเล็ก ทำให้ขอบสีขาวมาซ้อนติดกันจนอึดอัด เปลี่ยนเป็นเงาสีขาวมาซ้อนแบบเหลื่อมกันนิด ๆ ทำให้ไม่ถูกกลืนไปกับพื้นหลัง พอมองเห็นรำไร

ความท้าทายต่อไปเป็นการทดสอบ theme ของกลุ่มที่เป็นรูปภาพ wallpaper ซึ่งส่วนใหญ่ใช้ภาพจาก unsplash ที่อนุญาตให้ใช้ ผมเลือกใช้บริการจาก api จาก 2 แห่ง ได้แก่ ภาพที่เปลี่ยนรายวันของ Microsoft Bing และภาพสุ่มจาก Lorem Picsum ภาพที่เปลี่ยนทุกวัน ทำให้ไม่สามารถคุมโทนสีได้เลย วันนี้อาจเป็นภาพต้นไม้ อีกวันอาจเป็นภาพทะเล หรือท้องฟ้ายามค่ำคืน

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

พื้นหลังแบบสุดท้ายที่ผมเอามาใส่เป็น experiment สำหรับผู้สนใจ แต่คงไม่เอามาให้ผู้ใช้ทั่วไปเลือกในเร็ววันนี้ คือ พื้นหลังที่เป็น animation หรือภาพเคลื่อนไหว ตอนนี้ใช้ไฟล์ภาพที่เป็น .gif เพราะสามารถใช้ css เหมือนกับรูปภาพที่เป็น tile pattern หรือ cover wallpaper ได้ ตัวอย่างของภาพเหล่านั้นลองค้นหา seamless pattern ผมได้ภาพน่าสนใจมาจาก GIPHY

สำหรับคนทำโปรแกรมอยากให้ลอง เพียงไม่กี่จุดใน CSS ที่ปรับเปลี่ยนแล้วได้ผลมหัศจรรย์ โดยไม่ต้องยุ่งกับลอจิกของโปรแกรม อาจจะกลายเป็นถูกใจผู้ใช้ที่ชอบความสวยงาม เบื่อความซ้ำซาก ใช้โปรแกรมแล้วได้ลุ้นภาพพื้นหลังทุกวัน สำหรับผมได้ความรู้ เข้าใจ CSS มากขึ้น เพิ่งรู้เงื่อนไข License ของ Unsplash และคงจบเรื่องเล่าประสบการณ์ตกแต่งโปรแกรมไว้เพียงแค่นี้ พร้อมกับความเข้าใจความจริงของชีวิตมากขึ้นว่า ความสวยงามต้องแลกกับเวลาและความพิถีพิถัน เป็นความลับที่ผู้หญิงรู้ดี แต่ผู้ชายมักจะอดทนไม่พอ

ข้อมูลอ้างอิง

• Subtle Patterns https://www.toptal.com/designers/subtlepatterns/

• CSS Gradients https://gradients.shecodes.io/gradients

• Bing Wallpaper API https://github.com/TimothyYe/bing-wallpaper

• Lorem Picsum API https://picsum.photos

• Unsplash API https://unsplash.com/developers

• Unsplash License https://unsplash.com/license

• GIPHY seamless pattern https://giphy.com/search/seamless-pattern

• ตัวอย่าง CSS ตัดขอบขาวตัวอักษร

.text-outline-white {
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
  }

• ตัวอย่าง CSS ทำเงาเหลื่อมขาว

.text-shadow-white {
  text-shadow: 1px 1px 1px lightgray;
  }

• ตัวอย่าง CSS สำหรับทำฉากซ้อน

.page-backdrop {
  background-color:rgba(250, 250, 250, 0.7);
  padding: 8px;
  border-radius: 8px;
  }