Membuat Dark Mode Toggle di React

Dark mode adalah fitur yang memungkinkan tampilan website berubah menjadi gelap, yang membuatnya lebih nyaman untuk mata di malam hari dan bisa menghemat daya baterai. Fitur ini sudah umum di banyak aplikasi modern, seperti YouTube, Twitter, atau WhatsApp.

Apa yang Perlu Disiapkan?

Sebelum memulai, pastikan kamu sudah punya:

• Node.js & npm/yarn
• Basic React knowledge
• Code editor (VS Code)
• Terminal

Langkah 1: Buat Project React Baru

Jika kamu belum punya project React, buatlah dengan perintah:

npx create-react-app dark-mode-toggle
cd dark-mode-toggle
npm start

Langkah 2: Buat Struktur Komponen

Kita akan membuat dua komponen:

• App.js (komponen utama)
• Toggle.js (tombol pengatur mode)

Langkah 3: Implementasi Dark Mode di App.js

Edit App.js seperti berikut:

import React, { useState, useEffect } from "react";
import Toggle from "./Toggle";
import "./App.css";

function App() {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    document.body.className = darkMode ? "dark" : "";
  }, [darkMode]);

  return (
    
      {darkMode ? "Dark Mode" : "Light Mode"}
      
    
  );
}

export default App;

Langkah 4: Buat Komponen Toggle.js

Buat file Toggle.js di folder src:

import React from "react";

function Toggle({ darkMode, setDarkMode }) {
  return (
     setDarkMode(!darkMode)}>
      {darkMode ? "Switch to Light" : "Switch to Dark"}
    
  );
}

export default Toggle;

Langkah 5: Tambahkan CSS Dark Mode

Edit file App.css:

body {
  transition: background-color 0.3s ease;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 50px;
  background-color: #fff;
  color: #000;
}

body.dark {
  background-color: #121212;
  color: #fff;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 20px;
  cursor: pointer;
}

Langkah 6: Jalankan dan Coba

Sekarang jalankan proyek kamu:

npm start

Lihat hasilnya di browser. Kamu bisa klik tombol toggle untuk berpindah dari light mode ke dark mode, dan sebaliknya!

Tips Tambahan (Optional)

1.Simpan mode ke localStorage, agar tetap aktif saat halaman di-reload:

useEffect(() => {
  const savedMode = localStorage.getItem("darkMode");
  if (savedMode === "true") setDarkMode(true);
}, []);

useEffect(() => {
  localStorage.setItem("darkMode", darkMode);
}, [darkMode]);

2.Gunakan icon seperti ???? dan ☀️ untuk tampilan lebih menarik.

Kesimpulan

Dengan React, membuat fitur Dark Mode jadi sangat mudah! Cukup dengan useState, useEffect, dan beberapa baris CSS, kamu sudah bisa memberikan pengalaman pengguna yang modern dan nyaman di aplikasi kamu.