Halaman Profil User + Mode Gelap

Kang Ngoding May 26, 2025 10:23 am . 2 min read

Halaman Profil User + Mode Gelap — Halaman profil.

Hai sobat ruanginformatika! 👋

Di artikel gabungan ini, kita akan membuat:

✅ Halaman Profil User dengan foto dan informasi
🌙 Mode Gelap (Dark Mode) di aplikasi React kita

👤 Halaman Profil User

Kita akan membuat komponen profil yang menampilkan nama dan foto user. Datanya kita ambil dari backend atau localStorage.


import { useEffect, useState } from 'react';

function ProfilUser() {
  const [user, setUser] = useState({});

  useEffect(() => {
    const data = JSON.parse(localStorage.getItem('user'));
    if (data) {
      setUser(data);
    }
  }, []);

  return (
    <div className="profile">
      <h2>Profil Saya</h2>
      {user.avatar && (
        <img src={`http://localhost:5000/uploads/${user.avatar}`} alt="Foto Profil" width="150" />
      )}
      <p><strong>Nama:</strong> {user.name}</p>
      <p><strong>Email:</strong> {user.email}</p>
    </div>
  );
}

export default ProfilUser;

Catatan: Pastikan user data disimpan di localStorage saat login, misalnya:


localStorage.setItem('user', JSON.stringify({
  name: response.data.name,
  email: response.data.email,
  avatar: response.data.avatar
}));

🌙 Mode Gelap (Dark Mode)

Kita akan menambahkan toggle untuk mengaktifkan mode gelap dengan menyimpan preferensi di localStorage.

1️⃣ CSS Dasar


/* App.css */
body {
  background-color: white;
  color: black;
  transition: all 0.3s ease;
}

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

2️⃣ Komponen Toggle Dark Mode


import { useEffect, useState } from 'react';

function DarkModeToggle() {
  const [dark, setDark] = useState(false);

  useEffect(() => {
    const saved = localStorage.getItem('dark');
    if (saved === 'true') {
      document.body.classList.add('dark');
      setDark(true);
    }
  }, []);

  const toggleMode = () => {
    setDark(!dark);
    document.body.classList.toggle('dark');
    localStorage.setItem('dark', !dark);
  };

  return (
    <button onClick={toggleMode}>
      {dark ? '☀️ Mode Terang' : '🌙 Mode Gelap'}
    </button>
  );
}

export default DarkModeToggle;

Tempatkan tombol ini di navbar atau komponen utama aplikasi kamu. User bisa klik untuk beralih mode kapan saja.