Integrasi Dark Mode Di Next.js Dengan Liblary next-themes

Dark Mode dengan next-theme – Next.js adalah kerangka kerja React yang populer untuk pengembangan aplikasi web modern. Salah satu fitur unggulan dari Next.js adalah kemampuan untuk membuat tema yang dapat disesuaikan dengan mudah dengan menggunakan library next-themes. Dalam artikel ini, saya akan membahas tentang cara menggunakan library next-themes di Next.js.

Menginstall next-themes

Pertama-tama, mari kita mulai dengan memasang library next-themes pada proyek Next.js kita. Anda dapat memasangnya dengan menggunakan npm atau yarn, tergantung pada preferensi Anda.

Untuk npm, jalankan perintah berikut pada terminal:

npm install next-themes

Untuk yarn, jalankan perintah berikut pada terminal:

yarn add next-themes

Setelah berhasil memasang library, langkah selanjutnya adalah mengatur pengaturan tema di aplikasi Next.js kita. Untuk mengatur tema, kita perlu membuat file baru di dalam direktori pages dengan nama _app.js. File ini digunakan untuk mengatur konfigurasi global untuk aplikasi Next.js kita.

Buka file _app.js dan tambahkan kode berikut:

import { ThemeProvider } from 'next-themes'

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider defaultTheme="system">
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

Pada kode di atas, kita mengimpor komponen ThemeProvider dari library next-themes. Kemudian, kita membuat komponen MyApp yang akan menjadi komponen utama dari aplikasi Next.js kita.

Di dalam komponen MyApp, kita memasukkan komponen ThemeProvider. Properti defaultTheme digunakan untuk menentukan tema default yang akan digunakan oleh aplikasi kita. Di sini, kita menggunakan nilai “system” untuk membuat aplikasi kita mengikuti tema sistem yang sedang digunakan oleh pengguna.

Selanjutnya, kita memasukkan properti Component dan pageProps sebagai properti ke komponen MyApp. Ini memungkinkan kita untuk meneruskan properti ke halaman yang ada di aplikasi kita.

Theme Switch Dark Mode

Setelah mengatur konfigurasi global untuk aplikasi kita, selanjutnya kita perlu membuat komponen yang akan mengubah tema di aplikasi kita. Untuk ini, kita dapat menggunakan komponen ThemeSwitch yang disediakan oleh library next-themes.

Buka file index.js dan tambahkan kode berikut:

import { useTheme } from 'next-themes'

export default function Home() {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      <h1>Next.js Themes</h1>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme('light')}>Light Theme</button>
      <button onClick={() => setTheme('dark')}>Dark Theme</button>
      <button onClick={() => setTheme('system')}>System Theme</button>
    </div>
  )
}

Pada kode di atas, kita mengimpor hook useTheme dari library next-themes. Hook ini memungkinkan kita untuk mengakses tema yang sedang digunakan dan juga untuk mengubah tema.

Di dalam fungsi Home, kita menggunakan hook useTheme untuk mendapatkan tema yang sedang digunakan dan fungsi setTheme untuk mengubah tema. Kita kemudian membuat tiga tombol yang masing-masing akan mengubah tema menjadi “light”, “dark”, atau “system” ketika diklik.

Dalam kode di atas, kita menggunakan theme untuk menampilkan tema yang sedang digunakan pada halaman. Ketika tombol tema di klik, kita menggunakan setTheme untuk mengubah tema sesuai dengan nilai yang diberikan.

Selain itu, kita juga dapat menambahkan opsi tema kustom yang dapat disesuaikan. Misalnya, jika kita ingin menambahkan tema merah, kita dapat menambahkan tombol seperti ini:

<button onClick={() => setTheme('red')}>Red Theme</button>

Untuk menambahkan tema kustom, kita perlu mengonfigurasinya pada properti themes di dalam komponen ThemeProvider. Berikut adalah contohnya:

import { ThemeProvider } from 'next-themes'

const themes = {
  light: {
    foreground: '#000000',
    background: '#ffffff',
  },
  dark: {
    foreground: '#ffffff',
    background: '#000000',
  },
  red: {
    foreground: '#ffffff',
    background: '#ff0000',
  },
}

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider themes={themes} defaultTheme="system">
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

Di dalam kode di atas, kita menambahkan properti themes pada komponen ThemeProvider. Properti ini adalah objek yang berisi tema kustom yang ingin kita tambahkan.

Setiap tema memiliki foreground dan background, yang merepresentasikan warna teks dan warna latar belakang untuk tema tersebut. Dalam contoh di atas, kita menambahkan tema “light”, “dark”, dan “red”.

Setelah menambahkan tema kustom, kita dapat menggunakannya di dalam halaman dengan cara yang sama seperti tema bawaan yang telah kita set sebelumnya.

Dalam artikel ini, kita telah membahas tentang cara menggunakan library next-themes di aplikasi Next.js. Dengan menggunakan library ini, kita dapat dengan mudah mengatur tema pada aplikasi Next.js kita dan menyesuaikannya dengan preferensi pengguna. Dalam prosesnya, kita juga telah membahas tentang penggunaan ThemeProvider dan ThemeSwitch yang disediakan oleh library next-themes, serta cara menambahkan tema kustom pada aplikasi kita. Semoga artikel ini dapat membantu Anda dalam mengembangkan aplikasi Next.js yang lebih baik dengan tema yang lebih mudah disesuaikan.