54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
const Settings = () => {
|
|
const [darkMode, setDarkMode] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const savedTheme = localStorage.getItem("theme");
|
|
|
|
if (savedTheme === "dark") {
|
|
setDarkMode(true);
|
|
}
|
|
}, []);
|
|
|
|
const toggleTheme = () => {
|
|
const newTheme = !darkMode;
|
|
|
|
setDarkMode(newTheme);
|
|
|
|
if (newTheme) {
|
|
document.documentElement.classList.add("dark");
|
|
localStorage.setItem("theme", "dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
localStorage.setItem("theme", "light");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen p-6 bg-gray-100 dark:bg-gray-900 text-black dark:text-white transition-all duration-300">
|
|
<h1 className="text-3xl font-bold mb-6">
|
|
Settings
|
|
</h1>
|
|
|
|
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
|
<h2 className="text-xl font-semibold mb-4">
|
|
Pengaturan Tema
|
|
</h2>
|
|
|
|
<button
|
|
onClick={toggleTheme}
|
|
className={`px-5 py-3 rounded-xl font-semibold transition-all ${
|
|
darkMode
|
|
? "bg-yellow-400 text-black"
|
|
: "bg-blue-600 text-white"
|
|
}`}
|
|
>
|
|
{darkMode ? "Mode Terang ☀️" : "Mode Gelap 🌙"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Settings; |