Satu Logo, Dua File: Brand Mark yang Nurut Tema
Pil background ternyata cuma tambal: brand mark butuh dua aset ketika situs punya dark mode plus toggle manual yang dipersist.
Ringkasan
Wordmark putih buat dark mode ternyata aneh pas light mode, jadi slot brand butuh dua file gambar. Triknya dua Image Next.js di slot yang sama, satu dark:hidden, satu hidden dark:block, nol JavaScript. Hati-hati: dark variant Tailwind v4 defaultnya ngikutin OS, bukan toggle class, plus alt text dan dimensi jangan dilupain.
Jam 01:01 saya push commit b09c97d. Refactor anatomi kaki halaman udah beres, tapi satu hal masih mengganjal: slot brand cuma diisi satu file wordmark putih di atas pil background gelap. Saat halaman dibuka di light mode, hasilnya janggal. Wordmark putih mengambang di kapsul gelap, kontrasnya mati, kayak nempel stiker di tembok yang salah warna.
Asumsi saya dulu: pil background itu solusi yang cukup. Satu file, selesai. Kenyataannya, begitu situs punya dark mode, brand mark butuh dua aset terpisah untuk satu slot yang sama. Beda dengan teks yang bisa dibalik pakai CSS, gambar brand punya warna yang dirancang untuk latar tertentu. Wordmark navy memang dibuat untuk latar terang; versi putihnya untuk latar gelap.
Dua Image untuk Satu Slot
Solusinya nyontek dari header yang udah duluan pakai pola ini: dua komponen <Image> Next.js [6] di slot yang sama, dikontrol class utilitas. Wordmark navy dapet dark:hidden, artinya cuma tampil di light mode. Wordmark putih dapet hidden dark:block, baru muncul saat dark mode aktif. Satu slot, dua aset, nol JavaScript.
Triks setengah hati buat satu file juga sempat saya pikirkan. Nurunkan opasitas wordmark putih saat light mode? Hasilnya kotor: huruf jadi keabu-abuan dan di layar retina bayangan tipisnya keliatan banget. Tumpuk dua wordmark dalam satu PNG lalu pilih posisi? Komposisinya jadi nemu, jarak antar huruf nggak bisa diatur per-tema. Dua file terpisah tetap cara paling jujur: tiap aset dirancang untuk latar masing-masing, tugas CSS cuma memilih yang mana yang tampil.
Alt text jangan dilewat. Dua gambar berarti dua alt; dua-duanya harus deskriptif dan konsisten, bukan nama file mentah yang dibaca layar sebagai logo-egp-300x93. Screen reader tidak peduli tema mana yang lagi aktif, yang dia baca tetap teks alternatifnya.
Detail di commitnya juga ngajarin hal kecil yang sering diremehkan: atribut dimensi tetap dipasang di dua gambar, width dan height masing-masing mengikuti file aslinya, plus hint sizes biar browser nggak nebak-nebak. Tanpa itu, saat gambar kedua muncul, layout bisa loncat sedikit. Loncatan kecil ini yang sering keliatan sebagai keributan visual di situs yang sederhananya cuma satu gambar.
Kenapa nggak berhenti di pil background aja? Karena pil itu naruh masalah, bukan nyelessein. Slot jadi keliatan penuh, tapi brand mark tetep dirancang untuk latar yang salah. Dan pola ini udah kepakai di header sejak awal, jadi tiap hari ada dua jawaban beda untuk pertanyaan yang sama: header pakai swap, kaki halaman pakai tambal. Konsistensi itu murah sekarang, mahal kalau ditunda.
Ritual ceknya juga singkat. Setelah deploy, toggle tema bolak-balik di dua mode, pastikan slot brand berubah bareng header, bukan ngikutin setting OS. Kalau toggle manual diabaikan, itu tanda variant dark masih nyangkut ke default media query, bukan ke class yang dioverride project.
Jebakan Default dark Variant
Bagian yang bikin saya sempat bengong: di Tailwind v4, variant dark secara default mengikuti media query prefers-color-scheme [7], bukan class. Media query itu cuma membaca setting tema di OS atau browser [8]. Project ini override variant-nya ke class .dark di elemen html, yang di-toggle manual dan di-persist ke localStorage. Salah paham default ini mahal harganya: brand mark akan mengikuti OS dan mengabaikan toggle user, tanpa error, tanpa warning. Cuma beda tampilan yang bikin user lapor bug.
Dua alternatif sempat lewat kepala. CSS filter invert: ditolak, karena filter membalik semua warna termasuk aksen emas brand, dan CSS murni nggak punya cara selektif yang enak dipakai. Tag <picture> dengan media query: juga dilewati, sebab media query membaca preferensi OS, bukan toggle manual yang tersimpan di localStorage. Dua komponen gambar plus class utilitas jadi pilihan yang paling sedikit kejutan.
Standar baru di project ini: semua slot aset brand ikut pola dua file. Payload tambah satu gambar kecil, itu aja. Jauh lebih murah daripada ngelawan ekspektasi user pas mereka pencet tombol ganti tema dan nggak ada yang berubah.