index.js and style.css

in this project, when i go through the page the toggle swith is in dark mode but the website is in light mode. after one clicking toggle switch it will not change the theme.and again it is in initial position it will change it will become dark mode. i fixed it.
Kritika30032002 · Oct 2, 2023 · 81e33e1 · 81e33e1
1 parent 5314ba2
commit 81e33e1
Show file tree

Hide file tree

Showing 2 changed files with 193 additions and 193 deletions.
diff --git a/index.js b/index.js
@@ -35,12 +35,12 @@ window.onload = () => {
 
 function toggleMode() {
     const body = document.body;
-    if (body.classList.contains('light-mode')) {
-        body.classList.remove('light-mode');
-        body.classList.add('dark-mode');
-    } else {
+    if (body.classList.contains('dark-mode')) {
         body.classList.remove('dark-mode');
         body.classList.add('light-mode');
+    } else {
+        body.classList.remove('light-mode');
+        body.classList.add('dark-mode');
     }
 }
 let editItem = null;

diff --git a/style.css b/style.css
@@ -1,190 +1,190 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    position: relative;
-    width: 100%;
-    background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
-}
-body.light-mode {
-    background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
-    color: #fff;
-}
-/* Dark mode styles */
-body.dark-mode {
-    background: #232323; 
-    color: #fff; 
-}
-.container-xl {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.main {
-    position: relative;
-    width: 48rem;
-    height: 100%;
-    text-align: center;
-    padding: 2rem;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 2em;
-    backdrop-filter: blur(25px);
-    border: 10px solid rgba(255, 255, 255, 0.05);
-    background-clip: padding-box;
-    box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
-}
-
-.main_form {
-    position: relative;
-    width: 100%;
-    align-items: center;
-    background: #fff;
-    border-radius: 5rem;
-    display: flex;
-    height: 4.2rem;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 1rem;
-}
-
-.list-group-item {
-    font-size: 1.3rem;
-    margin-top: .4rem;
-    text-align: left;
-    margin-right: 20px;
-    border-radius: 5rem !important;
-}
-
-.list-group-item button {
-    margin: 0 .2rem;
-    padding: .4rem 1rem;
-    border-radius: 5rem;
-}
-
-.main_form #item {
-    font-size: 1.3rem;
-    width: 100%;
-    background: transparent;
-    border: none;
-    outline: none;
-}
-
-.main_form .form_btn {
-    color: #fff;
-    letter-spacing: .11rem;
-    border: none;
-    background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
-    padding: .6rem 2rem;
-    border-radius: 5rem;
-    cursor: pointer;
-}
-
-.form_btn:hover{
-    opacity:.8;
-    outline: auto;
-    border:3px solid rebeccapurple;
-}
-
-.opacity{
-    opacity:.8;
-    outline: auto;
-}
-
-
-.main_form #item::placeholder {
-    color: #232323;
-    letter-spacing: .11rem;
-    font-size: 1.2rem;
-}
-
-.main h2,
-h3 {
-    width: 12rem;
-    margin: auto;
-    border-bottom: 2px solid #ffffff;
-}
-
-@media screen and (max-width:415px) {
-    .main_form .form_btn {
-        color: #fff;
-        letter-spacing:.05rem;
-        border: none;
-        background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
-        padding:.8rem;
-        border-radius:5rem;
-        cursor: pointer;
-    }
-    .main {
-        width: 100%;
-        height: 380px;
-        padding: 1rem;
-    }
-    .main_form #item {
-        font-size: 1rem;
-        width: 100%;
-        background: transparent;
-        border: none;
-        outline: none;
-    }
-}
-
-@media (max-width: 960px) {
-    .main {
-        width: 100%;
-        height: 350px;
-        padding: 1rem;
-    }
-}
-
-.completed{
-    text-decoration: line-through;
-}
-
-.form-check-input{
-    position: relative;
-    margin-left: 10px;
-    margin-right: 5px;
-}
-
-.hidden {
-    display: none;
-}
-input[type="checkbox"] {
-    position: relative;
-    width: 80px;
-    height: 40px;
-    -webkit-appearance: none;
-    appearance: none;
-    background: black;
-    outline: none;
-    border-radius: 2rem;
-    cursor: pointer;
-    box-shadow: inset 0 0 5px rgb(0 0 0 / 50%);
-  }
-
-  input[type="checkbox"]::before {
-    content: "";
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: #fff;
-    position: absolute;
-    top: 0;
-    left: 0;
-    transition: 0.5s;
-  }
-
-  input[type="checkbox"]:checked::before {
-    transform: translateX(100%);
-    background: #fff;
-  }
-
-  input[type="checkbox"]:checked {
-    background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    position: relative;
+    width: 100%;
+    background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
+}
+body.light-mode {
+    background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
+    color: #fff;
+}
+/* Dark mode styles */
+body.dark-mode {
+    background: #232323; 
+    color: #fff; 
+}
+.container-xl {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.main {
+    position: relative;
+    width: 48rem;
+    height: 100%;
+    text-align: center;
+    padding: 2rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 2em;
+    backdrop-filter: blur(25px);
+    border: 10px solid rgba(255, 255, 255, 0.05);
+    background-clip: padding-box;
+    box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
+}
+
+.main_form {
+    position: relative;
+    width: 100%;
+    align-items: center;
+    background: #fff;
+    border-radius: 5rem;
+    display: flex;
+    height: 4.2rem;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1rem;
+}
+
+.list-group-item {
+    font-size: 1.3rem;
+    margin-top: .4rem;
+    text-align: left;
+    margin-right: 20px;
+    border-radius: 5rem !important;
+}
+
+.list-group-item button {
+    margin: 0 .2rem;
+    padding: .4rem 1rem;
+    border-radius: 5rem;
+}
+
+.main_form #item {
+    font-size: 1.3rem;
+    width: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+}
+
+.main_form .form_btn {
+    color: #fff;
+    letter-spacing: .11rem;
+    border: none;
+    background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
+    padding: .6rem 2rem;
+    border-radius: 5rem;
+    cursor: pointer;
+}
+
+.form_btn:hover{
+    opacity:.8;
+    outline: auto;
+    border:3px solid rebeccapurple;
+}
+
+.opacity{
+    opacity:.8;
+    outline: auto;
+}
+
+
+.main_form #item::placeholder {
+    color: #232323;
+    letter-spacing: .11rem;
+    font-size: 1.2rem;
+}
+
+.main h2,
+h3 {
+    width: 12rem;
+    margin: auto;
+    border-bottom: 2px solid #ffffff;
+}
+
+@media screen and (max-width:415px) {
+    .main_form .form_btn {
+        color: #fff;
+        letter-spacing:.05rem;
+        border: none;
+        background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
+        padding:.8rem;
+        border-radius:5rem;
+        cursor: pointer;
+    }
+    .main {
+        width: 100%;
+        height: 380px;
+        padding: 1rem;
+    }
+    .main_form #item {
+        font-size: 1rem;
+        width: 100%;
+        background: transparent;
+        border: none;
+        outline: none;
+    }
+}
+
+@media (max-width: 960px) {
+    .main {
+        width: 100%;
+        height: 350px;
+        padding: 1rem;
+    }
+}
+
+.completed{
+    text-decoration: line-through;
+}
+
+.form-check-input{
+    position: relative;
+    margin-left: 10px;
+    margin-right: 5px;
+}
+
+.hidden {
+    display: none;
+}
+input[type="checkbox"] {
+    position: relative;
+    width: 80px;
+    height: 40px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
+    outline: none;
+    border-radius: 2rem;
+    cursor: pointer;
+    box-shadow: inset 0 0 5px rgba(114, 80, 121, 0.5);
+  }
+
+  input[type="checkbox"]::before {
+    content: "";
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: #fff;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: 0.5s;
+  }
+
+  input[type="checkbox"]:checked::before {
+    transform: translateX(100%);
+    background: #fff;
+  }
+
+  input[type="checkbox"]:checked {
+    background: rgb(11, 11, 11);
   }