light & dark mode

RohitSharma50 · RohitSharma50 · commit 4b79a7a19435 · 2024-05-19T23:51:21.000+05:30
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,5 +4,5 @@
         "strings": "on",
         "other": "on"
     },
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5503
 }
diff --git a/Light-Dark Mode/index.css b/Light-Dark Mode/index.css
@@ -17,6 +17,7 @@ nav a {
     border-radius: 0.3rem;
     border: solid black;
     background-color: aliceblue;
+    text-align: center;
     text-decoration-line: none;
     padding: 5px;
 }
@@ -25,4 +26,20 @@ nav a {
     box-sizing: border-box;
 }
 
-/* navbar */
+/* navbar */
+
+body {
+    padding: 25px;
+    background-color: white;
+    color: black;
+    font-size: 25px;
+}
+
+.dark-mode {
+    background-color: black;
+    color: white;
+}
+
+button {
+    align-items: center;
+}
diff --git a/Light-Dark Mode/index.html b/Light-Dark Mode/index.html
@@ -4,6 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <title>Light & Dark Mode</title>
     <link rel="stylesheet" href="index.css">
 </head>
@@ -17,9 +18,18 @@
 
 <body>
     <form>
-        <label>click to change mode </label>
-        <input type="checkbox">
+
+        <button class="modeBtn" onclick="changeMode(event)"> <label>click to change mode </label> </button>
+
+
     </form>
+    <h1>Here is h1 element</h1>
+    <h2>Here is h2 element</h2>
+    <h3>Here is h3 element</h3>
+    <h1>Here is h1 element</h1>
+    <h5>Here is h5 element</h5>
+    <script src="index.js" defer></script>
+
 </body>
 
 </html>
diff --git a/Light-Dark Mode/index.js b/Light-Dark Mode/index.js
@@ -0,0 +1,6 @@
+
+function changeMode(event) { 
+    event.preventDefault()
+var element= document.body;
+element.classList.toggle("dark-mode");
+}

Original file line number	Diff line number	Diff line change
`@@ -4,5 +4,5 @@`
`4`	`4`	`"strings": "on",`
`5`	`5`	`"other": "on"`
`6`	`6`	`},`
`7`		`- "liveServer.settings.port": 5502`
	`7`	`+ "liveServer.settings.port": 5503`
`8`	`8`	`}`