From 886c1bd71f4c45a7f0d2a29bbb095363bd884beb Mon Sep 17 00:00:00 2001
From: hariharan409 <hharan987@gmail.com>
Date: Sat, 10 Aug 2024 12:40:30 +0800
Subject: [PATCH] Solved the darkmode challenge

---
 src/02-dark-mode/DarkMode.js | 9 ++++++---
 src/index.css                | 2 ++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/02-dark-mode/DarkMode.js b/src/02-dark-mode/DarkMode.js
index a8f82b7..970dafd 100644
--- a/src/02-dark-mode/DarkMode.js
+++ b/src/02-dark-mode/DarkMode.js
@@ -1,8 +1,11 @@
+import { useState } from "react"
+
 export default function DarkMode () {
+  const [isLightMode,setLightMode] = useState(true);
   return (
-    <div className='page'>
-      <button className='dark-mode-button'>Dark Mode</button>
-      <button className='light-mode-button'>Light Mode</button>
+    <div className='page' style={{backgroundColor: isLightMode ? "#FFF" : "#000"}}>
+      <button className='dark-mode-button' onClick={() => setLightMode(false)}>Dark Mode</button>
+      <button className='light-mode-button' onClick={() => setLightMode(true)}>Light Mode</button>
     </div>
   )
 }
diff --git a/src/index.css b/src/index.css
index dd4a0b9..793c326 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,12 +20,14 @@ button {
   border: 2px solid white;
   color: white;
   background-color: #171717;
+  cursor: pointer;
 }
 
 .light-mode-button {
   border: 2px solid #171717;
   color: #171717;
   background-color: white;
+  cursor: pointer;
 }
 
 body {