Navbar Light Mode Saya Pakai bg-white/60, Bukan Token
Mencerahkan token background menggeser seluruh halaman. Navbar butuh rasa putih khas chrome, jadi warna literal plus dark variant.
Ringkasan
Navbar transparan terlihat kotor di light mode karena memakai token --background yang dibagi dengan seluruh halaman. Solusinya: warna literal bg-white untuk light mode, sedangkan dark mode tetap pakai token lewat variant dark:. Trade-off-nya navbar tak lagi ikut tema bila token diubah, tapi jalur migrasi ke token khusus tinggal satu baris.
Navbar transparan saya tampak berair di light mode. Backdrop blur sudah aktif, border bawah rapi, tetapi warna latarnya membawa nuansa abu dari token background gelap-style, sehingga di halaman terang navbar terbaca sebagai kaca kotor, bukan sebagai permukaan yang berdiri. Commit ini mengerjakannya dengan satu keputusan desain yang mula-mula saya tolak: memakai warna literal alih-alih token tema.
Dugaan Salah: Cukup Cerahkan Token --background
Naluri pertama saya adalah mengubah nilai token. Toko warna Tailwind memang dirancang sebagai design tokens: variabel tema di namespace --color-* memunculkan utilities seperti bg- dan text- di seluruh project [1]. Kalau navbar terlalu gelap, naikkan kecerahan --background, selesai. Satu titik perubahan, semua permukaan ikut.
Justru itu masalahnya. Token background di aplikasi saya dipakai bersama oleh kartu, panel, dan section. Mencerahkannya demi navbar berarti menggeser seluruh halaman, lalu saya harus menahan dampaknya di satu-satunya tempat yang memang tidak ingin berubah. Navbar punya peran yang beda dari konten: ia adalah chrome, permukaan kontrol yang harus terbaca solid di atas apa pun yang lewat di bawahnya. Rasa "putih pekat" itu bukan properti tema saya, melainkan properti navbar.
Warna Literal di Light, Token Tetap di Dark
Perubahan di Navbar.tsx hanya menyentuh dua cabang kondisi scroll:
scrolled
? "border-b border-border/60 bg-white/90 shadow-[0_8px_32px_rgba(0,0,0,0.08)] backdrop-blur-2xl dark:bg-background/70"
: "border-b border-transparent bg-white/60 backdrop-blur-xl dark:bg-background/40"Sebelumnya kedua cabang memakai bg-background/90 dan bg-background/40 untuk kedua mode. Kini light mode memakai bg-white/90 saat discroll dan bg-white/60 saat di puncak, sementara dark mode tetap pada token lewat dark: variant. Pola ini persis contoh resmi dokumentasi: utility light ditulis langsung, dark: menimpanya untuk mode gelap [2]. Di balik variant itu, preferensi diterjemahkan dari prefers-color-scheme, media query yang melaporkan pilihan tema sistem pengguna [3].
Yang tidak disentuh sama pentingnya. Tinggi navbar, blur, border, dan shadow tetap; saya tidak mengulangi kesalahan lama mengganti satu properti lewat shorthand yang mereset properti lain. Nilai 60 dan 90 persen memberi dua tingkat kepekat: cukup transparan di puncak halaman agar konten masih terasa, hampir solid saat pengguna sudah berjauhan dengan puncak.
Trade-off yang Saya Terima Sadar
Keputusan ini mahal satu hal: navbar tidak lagi mengikuti tema bila kelak --background diubah total. Saya menerima itu karena tiga alasan. Pertama, chrome memang lazimnya stabil, justru kontras dengan konten yang berganti-ganti. Kedua, bila suatu saat theming navbar jadi kebutuhan nyata, jalurnya sudah jelas: bikin token khusus seperti --color-navbar lalu ganti bg-white menjadi bg-navbar, perubahan satu baris. Ketiga, penanda visual light mode yang jernih lebih bernilai hari ini daripada fleksibilitas hipotetis. Token untuk nilai yang berbagi makna, literal untuk rasa yang khas satu komponen, dan tahu kapan berhenti mengabstraksi itu bagian dari pekerjaan.