Membuat Dark Mode atau Mode malam pada NextJS menggunakan Tailwind CSS & React Cookie
Agik Setiawan
Full Stack Developer
April 4th 2023
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:
Artikel Terkait
© 2023 PT Koding Digital Indonesia. All rights reserved