Dark Mode React & Tailwind CSS
Tags: react, tailwindcss, npm
Published: 2022-08-06 06:10:00

Halo guys, pada kali ini saya akan membagikan cara menerapkan dark mode pada project React kita dengan menggunakan Tailwind CSS. Langsung saja kita mulai.

Silahkan persiapkan project Anda. Anda bisa mengikuti artikel berikut untuk installasi project React dan Tailwind CSS. [Cara Install Tailwind CSS pada React project.](https://dev.to/mahib22/cara-install-tailwind-css-pada-react-project-46en)

Jika sudah, buka file _tailwind.config.js_ tambahkan kode berikut pada bagian _module.exports_.
```
module.exports = {
  darkMode: 'class',
  // ...
}
```

Kode tersebut berfungsi untuk mengaktifkan class dark pada Tailwind. Kelas tersebut akan aktif jika pada mode dark. Untuk menggunakannya anda hanya perlu menuliskan _dark:_ diikuti dengan nama class. Anda bisa lihat lebih lanjut pada artikel berikut. [Dark Mode - Tailwind CSS.](https://tailwindcss.com/docs/dark-mode)

Selanjutnya kita akan menggunakan package dari NPM untuk membuat ikonnya. Jadi kita tidak perlu repot mempersiapkan ikon sendiri karena pada package tersebut telah disiapkan ikon untuk mode gelap dan terang dan juga terdapat animasi pada transisinya. Untuk lebih lengkapnya, Anda bisa lihat pada artikel berikut. [React Toggle Dark Mode.](https://www.npmjs.com/package/react-toggle-dark-mode)

Lakukan installasi dan tunggu hingga selesai.
```
npm i react-toggle-dark-mode
```

Pada kasus ini, saya akan menempatkan tombol toggle dark mode pada bagian header. Berikut ini kode file _Header.js_ saya. 
```
import React from "react";
import Switcher from "./Switcher";

function Header() {
  return (
    <header className="bg-purple-500 text-white font-bold text-3xl dark:bg-slate-800">
      <div className="container flex justify-between p-5 mx-auto items-center uppercase">
        <h1>Example App</h1>
        <Switcher />
      </div>
    </header>
  );
}

export default Header;
```
Buat sebuah file untuk meletakkan kode toggle dark mode Anda. Pada kasus ini saya memberi nama file tersebut dengan _Switcher.js_. Letakkan komponen _Switcher_ tersebut pada _Header_ dan lakukan import berkas. Berikut ini isi dari kode _Switcher.js_.
```
import React, { useState } from "react";
import { DarkModeSwitch } from "react-toggle-dark-mode";
import UseDarkSide from "./UseDarkSide";

function Switcher() {
  const [colorTheme, setTheme] = UseDarkSide();
  const [darkSide, setDarkSide] = useState(
    colorTheme === "light" ? true : false
  );
  const toggleDarkMode = (checked) => {
    setTheme(colorTheme);
    setDarkSide(checked);
  };

  return (
    <DarkModeSwitch checked={darkSide} onChange={toggleDarkMode} size={30} />
  );
}

export default Switcher;
```
Komponen _DarkModeSwitch_ adalah komponen bawaan dari package yang kita install tadi.

Terakhir kita buat satu buah file untuk menyimpan pilihan tema mode kita pada local storage. Jadi jika kita refresh atau kita tutup browser, tema mode yang aktif tidak berubah. Buat file bernama _UseDarkSide_ dan berikut ini isi dari file tersebut.
```
import { useEffect, useState } from "react";

function UseDarkSide() {
  const [theme, setTheme] = useState(localStorage.theme);
  const colorTheme = theme === "dark" ? "light" : "dark";
  useEffect(() => {
    const root = window.document.documentElement;
    root.classList.remove(colorTheme);
    root.classList.add(theme);
    localStorage.setItem("theme", theme);
  }, [theme, colorTheme]);

  return [colorTheme, setTheme];
}

export default UseDarkSide;
```
Selesai dan fitur dark mode Anda sudah bisa digunakan.