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

2 tahun yang lalu, 5 min read

Kali ini saya akan berbagi tutorial 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"

javascript
module.exports = {
  darkMode: "class",
  // ...
}

Untuk full code menjadi seperti dibawah ini

javascript
/** @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.

html
<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

plaintext
dark:

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

html
<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

html
<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

plaintext
yarn add react-icons
yarn add react-cookie

atau

plaintext
npm add react-icons
npm add react-cookie

kemudian edit halaman "index.jsx" menjadi

tsx
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

Testing GRPC dengan GRPCURL

gRPCURL adalah tools baris CLI yang digunakan untuk berinteraksi dengan server gRPC. Tools ini mirip dengan CURL namun dikhususkan untuk gRPC

Golang : Convert gambar menjadi teks dengan OCR

OCR, atau Optical Character Recognition, adalah teknologi yang digunakan untuk mengonversi teks dari gambar atau dokumen yang dipindai menjadi format teks yang dapat diedit dan dicari.

Convert Docx FIle To HTML Support Math Equation Using Pandoc

Pada tutorial ini, kita akan belajar bagaimana cara convert file dokumen Docx menjadi HTML secara cepat dan mudah dengan menggunakan Pandoc

Next jS Dockerize for Production With Standalone Mode

Dockerize aplikasi Next JS dengan Mode Standalone dengan ukuran yang lebih kecil

Menjalankan Next JS dengan HTTPS di Localhost

Pada tutorial kali ini saya akan membagikan cara mudah menjalankan Next JS dilocalhost dengan Https

Membuat Binary Tree Dari Flat Data Di Golang

Pada tutorial kali ini kita akan membuat binary tree didalam bahasa pemrograman Golang.

Membangun Aplikasi Desktop dengan Golang (Wails) & React

Pada tutorial kali ini, kita akan membuat aplikasi desktop menggunakan Golang(Wails) dan React.

Angular for Beginer : Memulai Project Frontend Dengan Angular 17

Angular adalah sebuah platform pengembangan web open-source yang dikembangkan oleh Google. Ini adalah framework JavaScript yang digunakan untuk membangun aplikasi web berbasis klien (client-side). Angular memberikan pendekatan terstruktur dalam pengembangan aplikasi web dengan menggunakan konsep-konsep seperti two-way data binding, dependency injection, modularitas, dan lainnya.

Nest JS : Speed Up API with Cache Redis

Meningkatkan perfoma API dengan Cache menggunakan Redis dengan contoh menggunakan Database PostgreSQL dan Prisma

Cari Tau Kemampuan Perfoma Website dan Server Dengan Load Test Menggunakan K6

Load testing adalah hal yang sangat penting dalam pengembangan perangkat lunak dan infrastruktur IT karena membantu mengidentifikasi sejumlah masalah dan meningkatkan kinerja sistem

S3CMD Cheat Sheet

s3cmd adalah alat baris perintah yang digunakan untuk berinteraksi dengan layanan penyimpanan Amazon S3 (Simple Storage Service) dari terminal atau prompt perintah pada sistem komputer di local maupun di server.

Berkenalan dengan LocalStack (Local Cloud Simulator)

LocalStack adalah platform pengembangan perangkat lunak yang digunakan untuk mengembangkan, menguji, dan menyimulasikan layanan cloud di lingkungan lokal atau non-production.

Mengenal State Management dan Kegunaanya untuk Frontend Developent

State management adalah teknik yang digunakan untuk mengelola, menyimpan, dan mengakses data atau informasi secara terpusat supaya mudah dalam mengontrol data atau informasi yang dibutuhkan.

Nest JS Micoservices with GRPC and Monorepo

Kita akan belajar bagaimana membuat aplikasi microservices menggunakan Nest JS dan GRPC menggunakan Monorepo (Single Repository)

Rate limiting Nest JS

Rate limiter adalah sebuah mekanisme yang digunakan untuk mengatur laju atau frekuensi akses terhadap suatu sumber daya atau layanan. Tujuannya adalah untuk mencegah penyalahgunaan atau kelebihan beban terhadap sistem tersebut

Install Homebrew in Linux

Cara Install Homebrew di linux (Fedora)

Apa itu Message Broker dan Apa kegunaanya?

Message broker (pialang pesan) adalah perangkat lunak yang bertindak sebagai perantara dalam mengirimkan pesan antara aplikasi atau sistem yang berbeda. Dalam arsitektur jaringan terdistribusi, message broker memfasilitasi komunikasi antara beberapa sistem dan aplikasi dengan menerima pesan dari pengirim dan meneruskannya ke penerima yang dituju

Membuat Mockup API Menggunakan JSON Server

JSON Server adalah sebuah package atau modul Node.js yang dapat digunakan untuk membuat sebuah RESTful API (Application Programming Interface) sederhana dengan menggunakan data dalam format JSON

Perbedaan Monorepo dan Multi Repo

Monorepo dan Multi Repo adalah cara kita menyimpan banyak project ke dalam suatu Repository seperti Git dengan tujuan untuk memudahkan proses Development dan pengembangan dari kode program.

Perbedaan frontend developer dan backend developer

Frontend developer dan backend developer adalah dua peran yang sangat penting dalam pengembangan aplikasi web. Perbedaan utama antara keduanya adalah area fokus dan jenis teknologi yang mereka gunakan.

Membuat API Gateway dengan Kong

Kong adalah salah satu API Gateway yang populer dipakai oleh banyak perusahaan maupun individu terutama untuk proyek berbasis Microservices

Mount Bucket S3 ke Server menggunakan S3FS-Fuse

Object Storage adalah media penyimpanan yang memiliki kapasitas yang sangat besar dengan harga yang murah di bandingkan ketika kita menyimpan file di dalam Storage SSD ataupun HDD server.

Membuat aplikasi CLI Video Reducer menggunakan Rust

Rust adalah bahasa pemrograman sistem modern yang didesain untuk kecepatan, keamanan, dan keterandalan. Bahasa ini dikembangkan oleh Mozilla Research dengan kontribusi dari komunitas open-source yang luas.

Install Docker Swarm

Docker Swarm adalah layanan orkestrasi yang disediakan oleh docker nya langsung dan untuk pembaruan sekarang sudah termasuk ketika kita menginstall docker maka docker swarm sudah tersedia bersama docker engine yang dimana sebelumnya docker swarm berdiri sendiri dan diinstall terpisah

Berkenalan dengan Markdown dan kegunaan dari Markdown

Kali ini saya akan berkenalan dengan Markdown dan kegunaan dari Markdown