Remove non-functional dark/light theme toggle button and update related files

Author: PRASANNA-THE-PRASANN1

assets/css/navbar.css

@@ -11,10 +11,10 @@
 
 }
 
-#themeToggle{
+/* #themeToggle{
   border: none; 
   background-color: transparent;
-}
+} */
 .logox {
   display: flex;
   font-size: 1.5rem;
@@ -63,13 +63,13 @@
     width: 0;
     transition: opacity .5s ease-in-out, width .5s ease-in-out ;
   }
-  #themeToggleWrapper{
+  /* #themeToggleWrapper{
     opacity: 0;
     width: 0;
     padding: 0;
     margin: 0;
     transition: opacity .5s ease-in-out,width .5s ease-in-out, padding .5s ease-in-out, margin .5s ease-in-out;
-  }
+  } */
   .nav-linkss li{
     margin-right: 1rem;
     margin-left: 1rem;
@@ -90,11 +90,11 @@
     width: auto;
     transition: opacity .5s ease-in-out, width .1s ease-in-out ; 
   }
-  #themeToggleWrapper{
+  /* #themeToggleWrapper{ 
     opacity: 1;
     width:40px ;
     transition: opacity .5s ease-in-out,width .5s ease-in-out;
-  }
+  } */
   .nav-linkss li{
     margin-left: 1rem;
     margin-right: 1rem;

assets/js/script.js

@@ -186,81 +186,81 @@ for (let i = 0; i < filterBtn.length; i++) {
 
 // Code for enabling Light-Dark THEME
 
-function toggleTheme() {
-  var slider = document.getElementById("themeToggle");
-  if (slider.checked) {
-    disableDarkTheme();
-    disableChangeColor();
-  } else {
-    enableDarkTheme();
-    changeColor();
-  }
-}
-
-function changeColor() {
-  var contributor = document.getElementById('total-contributors');
-  contributor.style.color = "black";
-}
-
-function disableChangeColor() {
-  var col = document.getElementById('total-contributors');
-  col.style.color = "white";
-}
-
-function enableDarkTheme() {
-  var elements = document.getElementsByTagName("*");
-  for (var i = 0; i < elements.length; i++) {
-    var element = elements[i];
-    if (
-
-      element.tagName !== 'BODY' &&
-      !element.classList.contains('ignore-dark-theme') && //add ignore-dark-theme in classes that you dont want affected by the toggle 
-      !element.classList.contains('project-category') &&
-      !element.classList.contains('footer')&&
-
-      element.tagName !== "BODY" &&
-      !element.classList.contains("ignore-dark-theme") &&
-      !element.classList.contains("project-category") &&
-      !element.classList.contains("footer")
-
-    ) {
-      element.classList.add("dark-theme");
-    }
-  }
+// function toggleTheme() {
+//   var slider = document.getElementById("themeToggle");
+//   if (slider.checked) {
+//     disableDarkTheme();
+//     disableChangeColor();
+//   } else {
+//     enableDarkTheme();
+//     changeColor();
+//   }
+// }
+
+// function changeColor() {
+//   var contributor = document.getElementById('total-contributors');
+//   contributor.style.color = "black";
+// }
+
+// function disableChangeColor() {
+//   var col = document.getElementById('total-contributors');
+//   col.style.color = "white";
+// }
+
+// function enableDarkTheme() {
+//   var elements = document.getElementsByTagName("*");
+//   for (var i = 0; i < elements.length; i++) {
+//     var element = elements[i];
+//     if (
+
+//       element.tagName !== 'BODY' &&
+//       !element.classList.contains('ignore-dark-theme') && //add ignore-dark-theme in classes that you dont want affected by the toggle 
+//       !element.classList.contains('project-category') &&
+//       !element.classList.contains('footer')&&
+
+//       element.tagName !== "BODY" &&
+//       !element.classList.contains("ignore-dark-theme") &&
+//       !element.classList.contains("project-category") &&
+//       !element.classList.contains("footer")
+
+//     ) {
+//       element.classList.add("dark-theme");
+//     }
+//   }
 
   // Adding specific background color for the footer
-  var footer = document.querySelector("footer");
-  if (footer) {
-    footer.classList.add("dark-theme");
-  }
-}
-
-function disableDarkTheme() {
-  var elements = document.getElementsByTagName("*");
-  for (var i = 0; i < elements.length; i++) {
-    var element = elements[i];
-    if (
-      element.tagName !== "BODY" &&
-      !element.classList.contains("ignore-dark-theme") &&
-      !element.classList.contains("project-category")
-    ) {
-      element.classList.remove("dark-theme");
-    }
-  }
-}
-
-window.onscroll = function () {
-  scrollFunction();
-};
-
-function scrollFunction() {
-  var wrapper = document.getElementById("themeToggleWrapper");
-  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-    wrapper.style.opacity = "0";
-  } else {
-    wrapper.style.opacity = "1";
-  }
-}
+//   var footer = document.querySelector("footer");
+//   if (footer) {
+//     footer.classList.add("dark-theme");
+//   }
+// }
+
+// function disableDarkTheme() {
+//   var elements = document.getElementsByTagName("*");
+//   for (var i = 0; i < elements.length; i++) {
+//     var element = elements[i];
+//     if (
+//       element.tagName !== "BODY" &&
+//       !element.classList.contains("ignore-dark-theme") &&
+//       !element.classList.contains("project-category")
+//     ) {
+//       element.classList.remove("dark-theme");
+//     }
+//   }
+// }
+
+// window.onscroll = function () {
+//   scrollFunction();
+// };
+
+// function scrollFunction() {
+//   var wrapper = document.getElementById("themeToggleWrapper");
+//   if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+//     wrapper.style.opacity = "0";
+//   } else {
+//     wrapper.style.opacity = "1";
+//   }
+// }
 
 // contact form variables
 const form = document.querySelector("[data-form]");

index.html

@@ -104,10 +104,10 @@
     <li><a href="#footer">Contact</a></li>
   </ul>
   <!-- Light-Dark theme SWITCH -->
-  <label id="themeToggleWrapper"  class="theme-toggle" for="themeToggle">
+  <!-- <label id="themeToggleWrapper"  class="theme-toggle" for="themeToggle">
     <input type="checkbox" id="themeToggle" onclick="toggleTheme()" checked aria-label="Switch theme mode">
     <span class="slider" style="width: 40px; height: 20px;"></span>
-  </label>
+  </label> -->
 
 </nav>