Menerapkan Dark Mode di Velog

Saya menuliskan pengalaman menerapkan dark mode pada layanan yang sebelumnya tidak mempertimbangkan dark mode.

Tulisan ini dibuat dengan menggabungkan sudut pandang desainer UX dan juga pengembang.

• Pemilihan teknologi

  • Velog menggunakan React dan Styled Components

  • ThemeProvider dari Styled Components menetapkan tema dengan JS, sehingga ada keterbatasan untuk menampilkan tema sistem sebagai bawaan. Untuk mengikuti tema sistem, JS harus dipanggil sekali di sisi browser, jadi jika tema bawaan tidak ingin dikunci, pendekatan ini tidak cocok untuk Velog yang menerapkan SSR.

  • Dengan menggunakan CSS Variable, tema sistem bisa dijadikan nilai bawaan

  • Untuk menggunakan CSS Variable di lingkungan CSS in JS, warna dikelola sebagai objek JS, lalu digunakan bersama fungsi utilitas yang ditulis agar mengurangi kesalahan dan memanfaatkan autocompletion TypeScript

• Pertimbangan palet dark mode

  • Warna ditentukan berdasarkan warna latar belakang, warna teks, warna border, warna Primary, dan warna Destructive

  • Untuk warna latar belakang, awalnya disusun berdasarkan level kecerahan 1 2 3 4, tetapi di UI nyata ada kasus ketika tidak bisa dipetakan 1:1, sehingga pengelolaannya sedikit diubah untuk menangani situasi pengecualian

  • Saat menentukan warna teks, penting untuk memeriksa apakah rasio kontrasnya memadai. Di WebAIM, kita bisa mengecek apakah warna tersebut lolos WCAG

  • Warna Primary dan Destructive yang lama tetap terlihat kontras dengan baik di latar gelap, tetapi jika memakai warna yang didesaturasi, nuansanya terasa lebih cocok dengan tema gelap

• Pekerjaan penggantian warna

  • Hal-hal yang bisa diganti otomatis diproses dengan bantuan IDE

  • Warna-warna pengecualian lainnya disesuaikan satu per satu sambil dilihat langsung

  • Jika terasa janggal saat diimplementasikan dengan warna yang sudah ada, warna baru ditambahkan ke palet sesuai kebutuhan dan dikelola sambil berjalan

  • Dalam praktiknya, bagian inilah yang paling banyak memakan effort

• Fitur toggle tema gelap

  • Efek transisi dibuat melalui transisi CSS rotate dan scale pada dua SVG

  • Ketika pengguna men-toggle tema gelap, preferensi pengguna disimpan ke localStorage dan cookie

  • localStorage digunakan di CSR, sedangkan cookie digunakan di SSR

Setelah benar-benar mencoba menerapkan tema gelap, saya merasakan bahwa menerapkan tema gelap pada UI yang sejak awal tidak mempertimbangkannya adalah pekerjaan yang sangat sulit. Ke depannya, saat membuat perencanaan saya akan selalu mempertimbangkan tema gelap dalam desain, dan saat menggunakan warna, daripada memakai nama seperti gray1, gray2, akan lebih baik jika penamaannya berdasarkan kegunaan seperti text1, text2 agar nantinya lebih mudah dikelola