dark mode

opsingh861 · opsingh861 · commit 22c7e44a1723 · 2023-07-13T11:30:08.000+05:30
diff --git a/DarkMode.html b/DarkMode.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dark Mode</title>
+    <script defer src="./DarkMode.js"></script>
+    <style>
+        * {
+            transition: 0.5s ease-out;
+        }
+
+        body {
+            background-color: white;
+        }
+
+        body.dark {
+            background-color: black;
+            color: white;
+        }
+
+        body.dark h1 {
+            color: plum;
+        }
+    </style>
+</head>
+
+<body class="">
+    <button onclick="modeChange()">Mode</button>
+    <h1>This is heading.</h1>
+</body>
+
+</html>
diff --git a/DarkMode.js b/DarkMode.js
@@ -0,0 +1,15 @@
+const body = document.querySelector("body")
+// console.log(body)
+
+const modeChange = () => {
+    // if (!body.classList.contains("dark")) {
+    //     body.classList.add("dark")
+    // } else {
+    //     body.classList.remove("dark")
+    // }
+
+    body.classList.toggle("dark") // toggle function is like switch its functioning as the same as the above line
+    console.log(body)
+}
+
+
