From d1127565c7fd7e42eacf3b3f53acba2821d0c3d1 Mon Sep 17 00:00:00 2001
From: rubykar <49357847+rubykar@users.noreply.github.com>
Date: Wed, 12 Oct 2022 21:31:36 +0530
Subject: [PATCH] dark_mode.html

---
 index.html | 75 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 66 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index ffc8cc4..84ccacf 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,73 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="Index.css">
-    <title>Document</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body {
+  padding: 25px;
+  background-color: white;
+  color: black;
+  font-size: 25px;
+}
+
+.dark-mode {
+  background-color: black;
+  color: white;
+  
+}
+.button {
+  background-color: #4CAF50; /* Green */
+  border: none;
+  color: white;
+  padding: 16px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  transition-duration: 0.4s;
+  cursor: pointer;
+}
+.button5 {
+  background-color: white;
+  color: black;
+  border: 2px solid #555555;
+}
+
+.button5:hover {
+  background-color: #555555;
+  color: white;
+}
+</style>
 </head>
 <body>
-    <h1 class="web">
 
-        Web Dev For Beginners 
-    </h1>
+<h2>Toggle Dark/Light Mode</h2>
+<p>CLICK ON THE BUTTON BELOW TO SEE THE DARK MODE AND LIGHT MODE WITH CHANGE IN TEXT CONTENT ON THE BUTTON.</p>
+
+<button id="btnmode" onclick="myFunction()" class="button button5"  value="myvalue"> DARK
+</button>
+
+<script>
+    const btn = document.getElementById('btnmode');
+    // ✅ Toggle button text on click
+    btn.addEventListener('click', function handleClick() {
+      const initialText = 'DARK';
+      var element = document.body;
+      element.classList.toggle("dark-mode");
+    
+      if (btn.innerHTML.toLowerCase().includes(initialText.toLowerCase())) {
+        btn.innerHTML = 'LIGHT';
+      } else {
+        btn.innerHTML = initialText;
+      }
+    });
+    
+    /**
+     * ✅ If you need to change the button's inner HTML use:
+     *  - `innerHTML` instead of `textContent`
+     */
+</script>
+
 </body>
 </html>
\ No newline at end of file
