Dark Mode dengan Tailwind CSS

Dark mode sudah menjadi kebutuhan umum di website modern. Di artikel singkat ini, kita akan mengaktifkan dark mode dengan Tailwind CSS di proyek Next.js kamu dalam beberapa langkah.

1. Aktifkan class strategy

Di tailwind.config.js, pastikan darkMode: "class":

// tailwind.config.js
module.exports = {
  darkMode: "class",
  // ...
}

Dengan strategi class, Tailwind akan mengaktifkan dark mode ketika class dark ditambahkan ke elemen parent (biasanya <html> atau <body>).

2. Tambahkan class pada root

Tambahkan/ubah toggler yang menambahkan class dark ke tag html atau body.

Kamu bisa menggunakan library seperti next-themes untuk kemudahan:

npm install next-themes

Lalu setup provider:

// app/providers.tsx
"use client";

import { ThemeProvider } from "next-themes";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system">
      {children}
    </ThemeProvider>
  );
}

3. Gunakan varian dark

Gunakan varian dark: pada utilitas Tailwind:

<div className="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
  Halo, ini konten yang support dark mode!
</div>

Contoh Button dengan Dark Mode

<button className="
  px-4 py-2 rounded-lg
  bg-blue-600 hover:bg-blue-700
  dark:bg-blue-500 dark:hover:bg-blue-600
  text-white
  transition-colors
">
  Click Me
</button>

Best Practices

Berikut beberapa tips untuk implementasi dark mode yang baik:

Gunakan semantic colors - Definisikan warna berdasarkan fungsi, bukan nama warna
Test kontras - Pastikan kontras text memadai di kedua mode
Consistent shadows - Sesuaikan shadow untuk dark mode
Smooth transition - Gunakan transition-colors untuk perpindahan smooth

Semantic Colors Example

/* globals.css */
:root {
  --color-primary: #3b82f6;
  --color-background: #ffffff;
  --color-foreground: #18181b;
}

.dark {
  --color-primary: #60a5fa;
  --color-background: #18181b;
  --color-foreground: #fafafa;
}

Testing Dark Mode

Jangan lupa test dark mode di berbagai device dan browser. Beberapa hal yang perlu diperhatikan:

Images dengan background transparan
Icons yang perlu versi dark
Chart colors yang readable di dark mode
Code blocks syntax highlighting

Kesimpulan

Itu saja! Dengan pendekatan ini, kamu punya kontrol penuh atas mode tema, aman untuk SSR, dan mudah dikembangkan.

Dark mode bukan hanya soal estetika, tapi juga user experience dan accessibility. Happy coding! 🌙