Dark Mode Itu Gampang: TailwindCSS + Vibe Coding Biar Makin Smooth

Pengantar

Pernah ga kamu buka aplikasi terus tampilannya langsung berubah ke mode gelap yang lebih adem di mata? Atau kamu klik tombol kecil di pojok kanan atas dan boom—seluruh UI berubah tanpa reload halaman? Gampang banget kelihatannya, kan? Nah, di balik itu ada kombinasi sederhana tapi powerful: TailwindCSS dan vibe coding.

Dark mode sekarang udah jadi kebutuhan, bukan cuma gaya. Banyak user lebih nyaman, baterai hemat, dan tampilannya juga keliatan profesional. Kabar baiknya: bikin dark mode itu sama sekali ga ribet. Dengan TailwindCSS, kamu cuma butuh satu class: dark. Ditambah vibe coding buat bantu generate UI dengan cepat, prosesnya makin smooth.

Dark mode itu bukan cuma tren—banyak banget pengguna yang sekarang lebih nyaman pakai tampilan gelap. Mata lebih rileks, baterai lebih awet (khususnya OLED), dan yang paling penting: kelihatan lebih keren.

Kabar baiknya? Bikin dark mode itu gampang banget, apalagi kalau kamu pakai TailwindCSS. Ditambah sedikit sentuhan vibe coding—alias ngekode dengan bantuan AI biar lebih cepat dan smooth—hasilnya bisa jauh lebih efisien.

Di artikel ini, kita bakal bahas cara bikin dark mode modern yang responsif, simple, dan gampang di-maintain. Plus, kamu bakal dapet beberapa alternatif UI supaya mahasiswa atau student yang belajar bisa punya banyak pilihan.

Apa Itu Vibe Coding?

Apa itu vibe coding?
Apa itu vibe coding?

Vibe coding itu gaya ngoding kekinian: kamu cukup jelasin apa yang kamu mau dengan bahasa natural, nanti AI bantu buatin struktur kode, styling dasar, atau bahkan logic-nya. Cocok banget buat ngembangin UI seperti dark mode yang butuh konsistensi.Dengan vibe coding:

  • Kamu bisa generate komponen dark mode langsung dari prompt.
  • Ga perlu ngapal banyak utility Tailwind.
  • Bisa eksplor 2–3 versi UI tanpa ngoding ulang dari nol.

TailwindCSS dan Dark Mode

Tailwind sudah punya system dark mode bawaan yang super simpel. Kamu bisa pilih dua mode:

  1. class-based → paling populer
  2. media-based → mengikuti preferensi sistem pengguna

Untuk control penuh, biasanya kita pakai dark mode: 'class'.

Setup Tailwind (class mode)

module.exports = {
  darkMode: 'class',
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

Selesai dengan Simple.

Cara Kerja Dark Mode di Tailwind

Kode ini simpel banget tapi inti dari dark mode ada di sini. Kamu bisa lihat kalau ada dua set warna: versi light dan versi dark. TailwindCSS ngasih kita cara cepat buat ganti tampilan cuma dengan nambahin class dark ke elemen induk (biasanya <html>).

Contoh dasar:

<div class="bg-white dark:bg-gray-900 text-black dark:text-white p-6 rounded-xl">
  Halo Dark Mode!
</div>

Kalau elemen induk punya class dark, semua elemen di dalamnya ikut berubah.

Contoh Sederhana Dark dan Light Mode
Contoh Sederhana Dark dan Light Mode

Jadi gini cara kerjanya:

  • bg-white → background putih untuk light mode
  • dark:bg-gray-900 → background gelap ketika mode gelap aktif
  • text-black → teks hitam untuk light mode
  • dark:text-white → teks putih buat dark mode
  • p-6 dan rounded-xl → styling biar kotaknya rapi dan modern

Begitu class dark ditambahkan ke <html> atau parent-nya, Tailwind langsung nge-switch ke style yang versi gelap. Kamu ga perlu bikin CSS terpisah atau nulis ulang styling.

Intinya: Tailwind bikin dark mode jadi satu baris doang, dan elemen kamu otomatis berubah tema tanpa ribet. Cocok banget buat bikin UI yang clean dan profesional.

Menambahkan Tombol Toggle Dark Mode

Tombol toggle ini adalah cara paling simpel dan paling sering dipake mahasiswa buat aktifin dark mode. Konsepnya sederhana banget: kamu klik tombol → browser nambahin/hapus class dark → seluruh UI langsung berubah tema. Udah, sesimpel itu.

HTML

<button id="toggle" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg">
  Toggle Mode
</button>

Di sini tombolnya punya styling untuk dua mode:

  • bg-gray-200 buat light mode
  • dark:bg-gray-700 buat dark mode

Jadi tampilannya ikut berubah tanpa kamu sentuh CSS tambahan.

JavaScript

const html = document.documentElement;
const btn = document.getElementById("toggle");

btn.addEventListener("click", () => {
  html.classList.toggle("dark");
});

Yang kita lakukan cuma “ngasih tau” browser:

“Hei, kalau tombol ini diklik, tolong ya toggle kelas dark di elemen HTML.”

Begitu class dark itu muncul, Tailwind langsung switch semua elemen yang punya dark style. Ga ada magic aneh—murni kerjaan utility Tailwind dan DOM yang saling ngebantu.

Smooth dan simpel. Kamu cuma toggle satu class, tapi seluruh tampilan aplikasi ikut berubah. Ini alasan kenapa dark mode pakai Tailwind terasa effortless banget.

Alternatif UI Dark Mode (Kasih Value Lebih!)

Biar belajar dark mode makin seru, kita ga cuma bikin satu jenis toggle aja. Di bawah ini ada beberapa variasi desain yang bisa kamu pilih sesuai kebutuhan—mulai dari yang simple sampai yang keliatan premium. Cocok banget buat student yang lagi eksplor style UI modern.

1. Toggle Switch iOS Style

UI iOS-like, sangat modern.
UI iOS-like, sangat modern.
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" id="switch" class="sr-only peer">
  <div class="w-11 h-6 bg-gray-300 peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer dark:bg-gray-600 peer-checked:bg-blue-600"></div>
  <span class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all peer-checked:translate-x-5"></span>
</label>

Toggle Switch dengan style iOS

Desain ini mirip banget dengan tombol switch di iPhone—clean, smooth, dan keliatan mahal. Cocok buat aplikasi modern atau dashboard yang butuh tampilan elegan.

JS tetap sama dengan sebelumnya.

2. Toggle dengan Icon Matahari & Bulan

Togle dark dan light sederhana
Togle dark dan light sederhana

Desain ini cocok banget buat portfolio atau landing page. Tinggal klik, icon matahari berubah jadi bulan. Simple tapi tetap estetik.

<button id="themeBtn" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
  <span class="block dark:hidden">☀️</span>
  <span class="hidden dark:block">🌙</span>
</button>

Kelebihannya adalah feedback visual langsung—pengguna bisa lihat mode apa yang aktif tanpa harus nebak-nebak.

3. Auto Mode + Manual Mode (3 Mode System)

3 Mode Sistem
3 Mode Sistem

Kadang user pengen lebih banyak kontrol, bukan cuma Light dan Dark. Nah, sistem 3 mode ini biasanya dipake di aplikasi profesional seperti dashboard, SaaS, atau website developer.

Mode:

  • Light
  • Dark
  • System (mengikuti setting OS)
<div class="flex gap-2">
  <button data-mode="light" class="btn">Light</button>
  <button data-mode="dark" class="btn">Dark</button>
  <button data-mode="system" class="btn">System</button>
</div>

JS:

const root = document.documentElement;
const buttons = document.querySelectorAll("[data-mode]");

buttons.forEach(btn => {
  btn.addEventListener("click", () => {
    const mode = btn.dataset.mode;

    if (mode === "system") {
      root.classList.remove("dark");
      root.classList.remove("light");
    } else {
      root.classList.remove("dark", "light");
      root.classList.add(mode);
    }
  });
});

Dengan UI ini, user bisa memilih preferensi mereka sendiri—lebih fleksibel dan keliatan profesional.

Multiple Output UI Styling (Bonus Biar Makin Mantap)

Dark mode itu bukan cuma soal ganti background jadi gelap. Yang paling penting adalah bagaimana setiap elemen UI ikut beradaptasi dengan nyaman dan teksnya tetap kebaca, kontrasnya pas, dan komponen-komponennya tetap enak dilihat. Nah, di bagian ini kita lihat beberapa contoh real yang sering dipake student biar mereka bisa liat dampaknya secara langsung.

1. Card Component

Card Dark Mode
Card Dark Mode

Card adalah komponen yang paling sering muncul di UI modern—entah itu product card, blog card, atau panel kecil. Di dark mode, penting banget supaya background dan teks tetap punya kontras yang nyaman.

<div class="p-6 rounded-xl bg-white dark:bg-gray-800 shadow-md">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Judul Card</h2>
  <p class="text-gray-600 dark:text-gray-300">Ini contoh card yang berubah mengikuti dark mode.</p>
</div>

Perhatikan gimana background, judul, dan teksnya masing-masing punya versi light dan dark. Ini bikin card tetap terlihat rapi dan readable di dua mode.

2. Navbar Modern

Navbar Dark Mode
Navbar Dark Mode

Navbar adalah elemen yang paling sering dilihat user, jadi harus keliatan sleek di dua mode. Dengan Tailwind, tinggal mainin utility dark: dan semuanya langsung otomatis switch.

<nav class="flex items-center justify-between p-4 bg-white dark:bg-gray-900">
  <h1 class="text-xl font-bold text-gray-800 dark:text-white">Logo</h1>
  <button id="toggleNav" class="p-2 bg-gray-200 dark:bg-gray-700 rounded-lg">Mode</button>
</nav>

Di sini bukan cuma background yang berubah—tulisan logo dan tombolnya juga menyesuaikan mode. Hasilnya, navbar tetap elegan baik di tampilan terang maupun gelap.

3. Dashboard Widget

Didget Dark Dode
Didget Dark Dode

Widget adalah area kecil yang sering berisi data atau statistik. Karena jumlahnya banyak, dark mode bikin widget-widget ini lebih nyaman dilihat dalam waktu lama—apalagi di dashboard yang intensif.

<div class="grid grid-cols-2 gap-4">
  <div class="p-4 rounded-lg bg-gray-100 dark:bg-gray-800"></div>
  <div class="p-4 rounded-lg bg-gray-100 dark:bg-gray-800"></div>
</div>

Cukup ganti background-nya dengan versi dark, dan widget langsung punya nuansa yang lebih profesional. Cocok banget buat student yang mau bikin mini dashboard untuk portfolio.

Vibe Coding: Contoh Prompt yang Bisa Dipakai Student

Supaya proses belajar makin smooth, ini contoh prompt vibe coding untuk ngebantu generate UI dark mode.

Buatkan komponen card responsive dengan TailwindCSS. Card harus mendukung dark mode, punya shadow lembut, dan icon di bagian kiri. Tambahkan dua variasi desain.

Output yang mungkin diberikan AI:

  • Card dengan border halus
  • Card dengan glassmorphism dark mode
  • Card minimalis tanpa border

Dengan vibe coding, student bisa eksplor UI jauh lebih cepat.

Best Practice dalam Membuat Dark Mode

Landing Page Darkmode dan Lightmode
Landing Page Darkmode dan Lightmode
  • Buat mood warna yang konsisten (hindari hitam pekat, gunakan warna abu gelap)
  • Pastikan kontras teks nyaman untuk dibaca
  • Uji tampilan di device berbeda
  • Simpan preferensi user di localStorage
  • Selalu cek aksesibilitas (WCAG)

Kesimpulan

Dark mode itu bukan fitur yang rumit. Dengan TailwindCSS, kamu cuma butuh satu class: dark. Sisanya tinggal mainin utility dan styling yang udah tersedia.

Ditambah vibe coding, kamu bisa eksplor banyak variasi UI tanpa harus capek ngoding dari nol. Cocok banget buat student yang lagi belajar frontend modern.

Intinya: dark mode gampang, stylish, dan bikin aplikasi kamu keliatan profesional.

by Salman Rizky