Button to toggle between Dark mode and Light mode

Anishkagupta04 · May 13, 2024 · 97a1dbf · 97a1dbf
1 parent 96aca22
commit 97a1dbf
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/images/12.png b/images/12.png
diff --git a/index.html b/index.html
@@ -21,6 +21,26 @@
   <link href="swiper/swiper-bundle.min.css" rel="stylesheet">
   <link href="css/style.css" rel="stylesheet">
 
+  <style>
+body {
+  padding: 25px;
+  background-color: white;
+  color: black;
+  font-size: 20px;
+}
+
+.dark-mode {
+  background-color: black;
+  color: white;
+}
+.button{
+  height: 35px;
+  width: 65px;
+  background-color: rgb(133, 133, 255);
+  color: rgb(249, 245, 245);
+  border-radius: 8px;
+}
+</style>
 </head>
 
 <body>
@@ -30,7 +50,8 @@
   <!-- ############### Top Bar ############### -->
 
 
-
+  <button class="button" onclick="myFunction()">Toggle</button>
+
   <div id="topbar" class="d-flex align-items-center fixed-top">
     <div class="container d-flex justify-content-between">
       <div class="contact-info d-flex align-items-center">
@@ -604,5 +625,10 @@ <h4>Daily Newsletter</h4>
   <script src="js/main.js"></script>
 
 </body>
-
+<script>
+function myFunction() {
+   var element = document.body;
+   element.classList.toggle("dark-mode");
+}
+</script>
 </html>