add the Dark theme

Author: Bahadou-Badr

README.md

@@ -1,2 +1,3 @@
 ## Sign In & Sign Up Form with Bootstrap 5 & JavaScript
 a hybrid Login & Sign Up form using HTML, CSS, JavaScript🤩 & Bootstrap 5. This is all very easy to do 👌🏼👌🏼, and it's all done without a library or framework!⌨️🔶
+![login and sign Up image](https://github.com/Bahadou-Badr/Todo-List-Vanilla-Javascript-/blob/master/images/capture.gif)

img/capture.gif

@@ -14,10 +14,11 @@
 
             <div class="col-md-6">
                 <form action=""  id="sign-up">
-                    <div class="card px-5 py-5"> <span class="circle"><i class="fa fa-check"></i></span>
-                        <h5 class="mt-3">Join over 25 million <br> learners from around the globe</h5> <small class="mt-2 text-muted">Master the languages of the web: HTML, CSS and javascript. This path will prepare you to build basic websites and then build interactive web apps</small>
-                        <div class="form-input"> <i class="fa fa-envelope"></i> <input type="email" class="form-control" placeholder="Email address" required> </div>
-                        <div class="form-input"> <i class="fa fa-user"></i> <input type="text" class="form-control" placeholder="User name" required> </div>
+                    <div class="card px-5 py-5"> 
+                        <div class="swith-mode"><input id="switch" type="checkbox" class="switch mr-2" onclick="applyTheme()"><label for="switch">Light Mode</label></div>
+                        <h5 class="mt-3">Sign Up</h5> <small class="mt-2 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem tempore ab provident iusto animi,</small>
+                        <div class="form-input"> <i class="fa fa-envelope"></i> <input type="email" class="form-control"  placeholder="Email address" required> </div>
+                        <div class="form-input"> <i class="fa fa-user"></i> <input type="text" class="form-control"  placeholder="User name" required> </div>
                         <div class="form-input"> <i class="fa fa-lock"></i> <input type="password" class="form-control" placeholder="password" required> </div>
                         <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked> <label class="form-check-label" for="flexCheckChecked"> I agree all the statements </label> </div> <button class="btn btn-primary mt-4 signup">Start coding now</button>
                         <div class="text-center mt-3"> <span>Or continue with these social profile</span> </div>
@@ -28,7 +29,8 @@ <h5 class="mt-3">Join over 25 million <br> learners from around the globe</h5> <
 
                 <form class="form-hidden" action="" id="login">
                     <div class="card px-5 py-5"> <span class="circle"><i class="fa fa-check"></i></span>
-                        <h5 class="mt-3">Join over 25 million <br> learners from around the globe</h5> <small class="mt-2 text-muted">Master the languages of the web: HTML, CSS and javascript. This path will prepare you to build basic websites and then build interactive web apps</small>
+                        <!-- <div class="swith-mode"><input id="s2" type="checkbox" class="switch mr-2 " onclick="applyTheme()"><label for="s2">Light Mode</label></div> -->
+                        <h5 class="mt-3">Sign In</h5> <small class="mt-2 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem tempore ab provident iusto animi,</small>
                         <div class="form-input"> <i class="fa fa-envelope"></i> <input type="email" class="form-control" placeholder="Email address" required> </div>
                         <div class="form-input"> <i class="fa fa-lock"></i> <input type="password" class="form-control" placeholder="password" required> </div>
                         <button class="btn btn-primary mt-4 signup">Start coding now</button>

index.html

@@ -15,4 +15,21 @@ document.addEventListener('DOMContentLoaded', () => {
                 loginForm.classList.add("form-hidden");
                 signUpForm.classList.remove("form-hidden");
             });    
-})
+})
+
+//Apply Theme - dark and light//
+function applyTheme(){
+    const checkBox = document.querySelector('.switch');
+    const itemLight = document.querySelectorAll('.card, .form-control, .social');
+
+    if (checkBox.checked == true) {
+        itemLight.forEach(e => {
+            e.classList.add('light');
+        })
+    }
+    else {
+        itemLight.forEach(e => {
+            e.classList.remove('light');
+        })
+    } 
+}