Blog

Problem Statement:

Create a simple React component that toggles between light mode and dark mode when a button is clicked.

Solution Explanation:

1. Use the useState hook to track the current theme.
2. Toggle between "light" and "dark" themes when the button is clicked.

import { useState } from “react”;

export default function DarkModeToggle() {
const [darkMode, setDarkMode] = useState(false);

return (
<div style={{
backgroundColor: darkMode ? “black” : “white”,
color: darkMode ? “white” : “black”,
padding: “20px”,
textAlign: “center”
}}>
<p>{darkMode ? “Dark Mode” : “Light Mode”}</p>
<button onClick={() => setDarkMode(!darkMode)}>
Toggle Mode
</button>
</div>
);
}