Tutorial Laravel dan React Js #9 Theme Settings

Belajar Laravel dan React.js untuk membangun aplikasi web full-stack yang powerful dan scalable. Laravel sebagai backend menyediakan API yang efisien, sementara React.js sebagai frontend memberikan pengalaman interaktif dan dinamis bersama lagikoding.com

Kurnia Andi Nugroho

✅ Telah dilihat 518 kali

Rating: 5.00 ⭐

12 March 2025, 15:52

Membuat dan Mengekspor ThemeContext

export const ThemeContext = createContext();

createContext() – Membuat context baru dengan nama ThemeContext.
ThemeContext digunakan untuk membagikan nilai (theme dan toggleTheme) ke seluruh aplikasi.

Menyimpan dan Mengambil Tema dari localStorage

const [theme, setTheme] = useState(localStorage.getItem("theme") || "light");

useState digunakan untuk menyimpan tema saat ini (theme).
localStorage.getItem("theme") membaca tema yang sebelumnya disimpan di local storage.
Jika tidak ada tema yang tersimpan, secara default akan menggunakan "light".

Mengupdate localStorage dan data-theme

useEffect(() => {
    document.body.setAttribute("data-theme", theme);
    localStorage.setItem("theme", theme);
}, [theme]);

useEffect akan dipanggil setiap kali theme berubah.
document.body.setAttribute("data-theme", theme) – Mengatur atribut data-theme pada <body> agar bisa digunakan dalam CSS untuk mode terang/gelap.
localStorage.setItem("theme", theme) – Menyimpan nilai tema ke local storage agar tetap bertahan setelah reload atau berpindah halaman.

Fungsi untuk Mengubah Tema

const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
};

toggleTheme adalah fungsi untuk mengganti tema.
Jika tema sebelumnya adalah "light", maka akan berubah menjadi "dark", dan sebaliknya.

Menyediakan Nilai ke Seluruh Aplikasi

return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
        {children}
    </ThemeContext.Provider>
);

ThemeContext.Provider digunakan untuk menyediakan nilai tema (theme) dan fungsi pengubah tema (toggleTheme) ke seluruh komponen yang membutuhkannya.
{children} memastikan bahwa semua komponen dalam aplikasi dapat mengakses ThemeContext.

Sampai pada materi kali ini, kita telah membuat fitur untuk change theme dari light menjadi dark atau sebaliknya. Dan pada nantinya kita akan panggil contexts ini kedalam file app.js.