Agik Setiawan - July 02, 2022

Membuat Dark Mode atau Mode malam pada NextJS menggunakan Tailwind CSS & React Cookie

Pada kesempatan kali ini saya akan membagikan tutorial cara membuat Dark Mode menggunakan Tailwind CSS dan React JS (Next JS). sebelmunya pastikan kalian sudah menginstall NextJS dan juga Tailwind CSS atau kalo belum, silahkan lihat tutorial Install Project NextJS dan Tailwind CSS.

Setelah menginstall Project Next JS dan Tailwind CSS selanjutanya kita akan sedikit menambahakan code ke dalam file “config.tailwind.js”

module.exports = {
  darkMode: 'class',
  // ...
}

Untuk full code menjadi seperti dibawah ini

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

untuk menambahkan Dark Mode kita hanya menambahkan class “dark” pada element paling atas di dalam tag HTML misalnya “body” atau element “div” yang heirarkinya berada di posisi paling atas.

   <div className="dark">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="my-6">
        <button className='bg-sky-600 text-white p-2 px-4 rounded-full hover:opacity-75 hover:text-red-600'>Example Button</button>
      </div>
    </div>

kemudian untuk membuat element dark mode kita bisa menggunakan

dark:

contoh kita akan membuat button normal dengan warna sky dan text warna putih

 <button className='bg-sky-600 text-white p-2 px-4 rounded-full hover:opacity-75 hover:text-red-600'>Example Button</button>

agar button berubah warna pada saat dark mode maka akan menjadi seperti

 <button className='bg-sky-600 text-white p-2 px-4 rounded-full hover:opacity-75 hover:text-red-600 dark:bg-gray-800 dark:text-white'>Example Button</button>

Supaya setingan Dark Mode tersimpan di browser kita akan menggunakan React Cookie untuk menyimpannya. kita juga akan menggunakan React Icons.

Install React Cookie & React Icons

buka terminal dan masukan perintah

yarn add react-icons
yarn add react-cookie

atau

npm add react-icons
npm add react-cookie

kemudian edit halaman “index.jsx” menjadi

import type { NextPage } from 'next'
import Head from 'next/head'
import { useCookies } from 'react-cookie';
import { BsFillSunFill, BsFillMoonStarsFill } from 'react-icons/bs';

const Home: NextPage = () => {

  const [cookies, setCookie, removeCookie] = useCookies(['dark']);

  const setDark = () => {
    if (cookies.dark == 'yes') {
      setCookie('dark', 'no')
    } else {
      setCookie('dark', 'yes')
    }
  }

  return (
    <div className={cookies.dark=='yes'?'dark':''}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className='dark:bg-gray-600 h-screen'>
        <div className="my-6">
          <button className='bg-sky-600 text-white p-2 px-4 rounded-full hover:opacity-75 hover:text-red-600 dark:bg-gray-800 dark:text-white' onClick={setDark}>
            {
              cookies.dark !== 'yes' &&
              <BsFillSunFill size={18} />
            }
            {
              cookies.dark == 'yes' &&
              <BsFillMoonStarsFill size={18} />
            }
          </button>
        </div>
      </div>
    </div>
  )
}

export default Home

Repository bisa di diwnload di:

https://github.com/jejakcoding/example_nextjs_tailwind

Share


Comments