dark-mode
Catatan teknis seputar web development, DevOps, dan integrasi AI.
3 artikel
- 10.03frontend
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.
TL;DR: 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.
#css#tailwind#dark-mode - 17.30frontend
Dark Peta MapLibre ala Google Maps lewat Runtime Override
Fiord bikin peta gelap tapi datar. Saya mutasi style JSON-nya langsung di runtime: brightness ladder per layer, label terang ber-halo, plus guard anti-flash.
TL;DR: Fiord dark mode bikin jalan semua abu-abu sama, susah dibaca. Akhirnya fetch JSON Fiord, ubah paint 28 layer bikin tingkatan kecerahan jalan plus label pake halo gelap biar kelihatan kaya Google Maps. Pake cache, show peta dulu baru upgrade style, plus guard biar toggle cepat nggak bikin peta acak-acakan.
#maplibre#openfreemap#dark-mode - 16.45frontend
Peta Mendadak Penuh Watermark: Pindah ke MapLibre dan OpenFreeMap
Basemap CARTO tiba-tiba wajib API key dan peta proyek saya penuh watermark. Ini cerita migrasi tiga komponen Leaflet ke MapLibre GL dengan tile OpenFreeMap.
TL;DR: Basemap CARTO tiba-tiba wajib API key, jadi semua tile peta ketutup watermark abu-abu. Daripada ngurusin kuota, saya pindah ke OpenFreeMap yang gratis tanpa key dan migrasi semua komponen Leaflet ke MapLibre GL. Style dark bawaannya kontrasnya hampir nol, akhirnya diganti fiord biar peta kebaca lagi.
#maplibre#leaflet#openstreetmap