From 8b26b80350f458fcb9ff497fbe1b42aa399275e3 Mon Sep 17 00:00:00 2001
From: Manav Gupta <guptamanav99@yahoo.com>
Date: Sun, 4 Oct 2020 14:07:57 +0530
Subject: [PATCH 1/3] Added toggle button

---
 index.html |  7 +++++++
 styles.css | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 5666073..450614a 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,14 @@
     <button>+</button>
     <button>0</button>
     <button>.</button>
+    
     <button class="span-two">=</button>
+    <br/>
+    <br/>
+    <label class="switch">
+      <input type="checkbox">
+      <span class="slider round"></span>
+    </label>
   </div>
 </body>
 </html>
diff --git a/styles.css b/styles.css
index 8b13789..f5a8ce2 100644
--- a/styles.css
+++ b/styles.css
@@ -1 +1,59 @@
-
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+  }
+  
+  .switch input { 
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  
+  input:checked + .slider {
+    background-color: #2196F3;
+  }
+  
+  input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+  }
+  
+  input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+  }
+  
+  /* Rounded sliders */
+  .slider.round {
+    border-radius: 34px;
+  }
+  
+  .slider.round:before {
+    border-radius: 50%;
+  }
\ No newline at end of file

From 71081dfe408d66c611845c8aafc4276920b89242 Mon Sep 17 00:00:00 2001
From: Manav Gupta <guptamanav99@yahoo.com>
Date: Sun, 4 Oct 2020 14:44:18 +0530
Subject: [PATCH 2/3] Added css and js for toggle to dark mode

---
 index.html | 8 +++++++-
 styles.css | 4 ++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 450614a..13ebda9 100644
--- a/index.html
+++ b/index.html
@@ -35,9 +35,15 @@
     <br/>
     <br/>
     <label class="switch">
-      <input type="checkbox">
+      <input onclick="toggleDark()"type="checkbox">
       <span class="slider round"></span>
     </label>
   </div>
+  <script>
+    function toggleDark() {
+       var element = document.body;
+       element.classList.toggle("dark-mode");
+    }
+    </script>
 </body>
 </html>
diff --git a/styles.css b/styles.css
index f5a8ce2..6e748e0 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,7 @@
+.dark-mode {
+  background-color: black;
+  color: white;
+}
 .switch {
     position: relative;
     display: inline-block;

From f6a91b7d00d319e1c2fdff995405cb80fff8fcbb Mon Sep 17 00:00:00 2001
From: Manav Gupta <guptamanav99@yahoo.com>
Date: Sun, 4 Oct 2020 15:31:06 +0530
Subject: [PATCH 3/3] Added dark-mode.css

---
 dark-mode.css | 6 ++++++
 index.html    | 1 +
 styles.css    | 9 +--------
 3 files changed, 8 insertions(+), 8 deletions(-)
 create mode 100644 dark-mode.css

diff --git a/dark-mode.css b/dark-mode.css
new file mode 100644
index 0000000..c3ec538
--- /dev/null
+++ b/dark-mode.css
@@ -0,0 +1,6 @@
+
+.dark-mode {
+    background-color: black;
+    color: white;
+  }
+  
\ No newline at end of file
diff --git a/index.html b/index.html
index 7cc2af4..72a4dee 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Calculator</title>
+  <link href="dark-mode.css" rel="stylesheet" type="text/css" />
   <link href="styles.css" rel="stylesheet" type="text/css" />
   <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
   <script src="script.js"></script>
diff --git a/styles.css b/styles.css
index 0bfec7e..4b2516f 100644
--- a/styles.css
+++ b/styles.css
@@ -58,7 +58,6 @@
   .slider.round:before {
     border-radius: 50%;
   }
-=======
 *, *::before , *::after {
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
@@ -116,10 +115,4 @@ body {
 .output .current-operand {
   color: white;
   font-size: 1.75rem;
-}
-
-.dark-mode {
-  background-color: black;
-  color: white;
-}
-
+}
\ No newline at end of file