Dark Mode React & Tailwind CSS

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.

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.

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.

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.