Dark mode sekarang bukan cuma gaya — tapi sudah jadi standar UX modern.
Website besar seperti:

• Instagram
• YouTube
• GitHub

semuanya punya fitur dark mode.

Di artikel ini kita akan membuat:

✅ Toggle Dark Mode
✅ Smooth animation
✅ Preferensi tersimpan (walau di-refresh)
✅ Auto-detect sistem user
✅ Tanpa framework

Dan ini bisa langsung kamu pakai di Laravel, HTML biasa, atau project kampus.

🎯 Hasil Akhir

Fitur yang akan kita buat:

• Tombol toggle ☀️ / 🌙
• Mode otomatis mengikuti sistem
• Disimpan di browser (localStorage)
• Transisi halus

🛠️ PRACTICAL STEP-BY-STEP

STEP 1 — Struktur HTML Dasar

Buat file HTML:

STEP 2 — CSS Styling Modern

Buat style.css:

STEP 3 — JavaScript Inti (Otak Sistem)

Buat script.js:

💡 Penjelasan Kenapa Ini Professional

1. Menggunakan CSS Variable → scalable
2. Tidak hardcode warna
3. Auto detect sistem
4. Persist data dengan localStorage
5. Clean separation HTML, CSS, JS

Ini bukan sekadar toggle biasa — ini standar production.

🚀 Upgrade Level (Untuk Project Laravel Kamu)

Kalau kamu pakai Laravel:

Letakkan tombol di layouts/app.blade.php

<button id="theme-toggle">🌙</button>

Tambahkan script di bagian bawah layout.

🔥 Versi Lebih Advance

Kalau mau lebih gila lagi kamu bisa:

• Simpan preferensi di database user
• Animasi icon pakai SVG
• Tambahkan smooth fade background
• Buat sistem multi-theme (Blue, Purple, Dark)

📌 Kesimpulan

Dengan ±30 baris kode:

Kamu sudah punya sistem yang setara dengan:

• GitHub
• Instagram

Dan ini bisa langsung kamu pakai di:

• Website portfolio
• Project Laravel kamu
• Landing page bisnis
• Atau aplikasi web kampus