Yii2 - Implementasi dark / light mode Bootstrap 4

Yii2 adalah PHP Framework dengan Twitter Bootstrap 4 yang by default sudah terintegrasi. Kita bisa menggunakan AssetBundle untuk meng-customisasinya. Namun seperti yang saya kutip pada subtitle, Saya hanya membuat mode untuk Yii2 memaksakan halaman web page untuk reload saat pindah mode dengan menggunakan benefit dari Cookies.

Berbeda dengan framework css modern yang sering ada di frontend yang biasanya dibangun di atas JS. Wuih, smooth banget, karena metode yang digunakan adalah injecting css class, sehingga halaman web jadinya ga perlu refresh saat pindah mode. Kapan-kapan pengen belajar juga sih, sayangnya waktu sudah sangat susah dibagi dengan project2, serta waktu humanis yang lainnya. Coba lihat Chakra UI - Dark Mode,  asli, Keren banget dah

Saat action toggle dark/light mode, Yii2 mempunyai side effect ke web app, mengapa ? , karena Yii2 adalah SSR, sedangkan Chakra UI dalam kasus ini bersifat SPA. Contoh kasus :

• Misalnya Kita di dalam satu halaman pada web,
• Kemudian di halaman itu ada form, dan
• Kemudian Kita pindah mode dari light ke dark atau sebaliknya,
• Maka semua isi dalam form akan kembali ke mode awal, bisa jadi blank kalau actionCreate, atau bisa jadi default value si form kalau actionUpdate. 
• Solusi sederhana, kita bisa menampilkan pesan warning kepada user, bahwa halaman akan di refresh kalau pindah mode,
• Jadi, jika anda ingin pindah mode, saya sarankan untuk submit dulu form tersebut.

Karena under the hood, saya hanya membuat supaya Yii2 me-load file css untuk mode nya masing-masing. Simple.

Ada beberapa metode yang saya gunakan sebelumnya seperti,

• Theming
• Overriding bootstrap.css file 

Tapi pada akhirnya ternyata ada cara yang sangat simple, yaitu mainkan DI bawaan Yii2. Dengan kemampuan frontend yang seadanya, saya bisa mengakalinya dengan pseudo-code sebagai berikut.

=> Set cookie, saya namakan `theme`, dan paksakan ke setiap halaman mempunyai cookie `theme` ini. Nilai default nya adalah `light`.

=> Siapkan file Twitter bootstrap sesuai dengan modenya masing-masing.

              ==> Untuk light, saya menggunakan ini : https://bootswatch.com/4/litera/

              ==> Untuk dark, saya menggunakan ini : https://bootswatch.com/4/slate/

=> Letakkan di folder web, supaya bisa langsung di akses di browser

=> pada file config/web.php, rubah kodenya untuk melakukan DI pada settingan `components/assetManager` 

=> Sesuaikan tambahan file css yang akan ditarik pada default AppAsset.php yang digunakan, jika Anda ingin menambahkan detail tertentu pada masing-masing mode. Perhatikan pada baris init() pada gambar berikut ini:

=> Kemudian buat sebuah controller, terserah apa namanya asal sesuai dengan format Yii2, misalnya:

=> Kemudian controller ini akan dibuatkan sebuah link supaya lebih mudah diakses oleh uses, a.k.a tinggal klik doang. Di 2022, lazimnya dark/light toggle menu itu ada di navbar, maka di navbar kita rubah seperti ini:

=> Kalau sukses, Kita bisa lihat icon matahari/bulan di paling pojok kanan, dengan aksinya masing-masing.

Semoga bermanfaat dan meng-inspirasi.

Dukung Saya supaya tetap menulis artikel-artikel yang baik, membayar sewa domain, dan server untuk blog ini. Caranya dengan donasi cendol via Trakteer.id.