Added the abilitiy to toggle the theme

Author: Prashoon123

about.css

@@ -1,18 +1,26 @@
+:root {
+  --bg-color: black;
+  --font-color: white;
+}
+.lightMode {
+  --bg-color: white;
+  --font-color: black;
+}
 nav {
   color: white;
   background-color: black;
 }
 
 #para {
   text-align: center;
-  color: black;
+  color: var(--font-color);
 }
 body {
-  background-color: white;
+  background-color: var(--bg-color);
   font-family: "Righteous", cursive;
 }
 h1 {
-  color: black;
+  color: var(--font-color);
   text-align: center;
   margin-top: 90px;
   margin-bottom: 40px;
@@ -38,6 +46,7 @@ h1 {
 
 .itemNav {
   padding: 15px;
+  cursor: pointer;
 }
 .about-title {
   padding-top: 6%;

about.html

@@ -51,6 +51,9 @@
           <li class="nav-item itemNav">
             <a class="nav-link" href="about.html">About</a>
           </li>
+          <li class="nav-item itemNav">
+            <p class="nav-link" id="toggle">🌞</p>
+           </li>
         </ul>
       </div>
     </nav>
@@ -145,9 +148,10 @@ <h5 class="card-title">
       crossorigin="anonymous"
     ></script>
     <script>
-      $('.navbar-nav>li>a').on('click', function() {
-        $('.navbar-collapse').collapse('hide');
+      $(".navbar-nav>li>a").on("click", function () {
+        $(".navbar-collapse").collapse("hide");
       });
     </script>
+    <script src="about.js"></script>
   </body>
 </html>

about.js

@@ -0,0 +1,13 @@
+const toggle = document.querySelector("#toggle");
+toggle.addEventListener("click", modeSwitch);
+
+let isLight = true;
+
+function modeSwitch() {
+  isLight = !isLight;
+  let root = document.body;
+
+  isLight ? (toggle.innerText = "🌞") : (toggle.innerText = "🌚");
+
+  root.classList.toggle("lightMode");
+}

icons/grid-large.png

@@ -1,11 +1,22 @@
+:root {
+  --bg-color: black;
+  --font-color: white;
+}
+.lightMode {
+  --bg-color: white;
+  --font-color: black;
+}
 html {
   scroll-behavior: smooth;
 }
 body {
-  color: black;
+  color: var(--font-color);
+  background-color: var(--bg-color);
   font-family: "Righteous", cursive;
 }
-
+button {
+  color: var(--font-color);
+}
 #header {
   background: url("https://www.wallpaperup.com/uploads/wallpapers/2015/10/27/825565/a8f967ede1e1e41abc91787415e3b9ee.jpg");
 
@@ -19,26 +30,27 @@ body {
 }
 
 /* scale-animation-by-sudo-nick16 */
-.card{
+.card {
   transition: transform 0.2s;
 }
 .card:hover {
-  transform: scale(1.05)
+  transform: scale(1.05);
 }
 
 .backToTop {
   margin-left: 49%;
 
-  color: #000000;
+  color: var(--font-color);
   padding: 0.6%;
   border-radius: 50%;
   margin-bottom: 4%;
 }
 .card {
+  background-color: var(--bg-color);
   height: 100%;
-  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
-  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.25);
+  -moz-box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.25);
+  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.25);
 }
 .card-body.hidden {
   display: none;
@@ -47,7 +59,7 @@ body {
   padding: 2rem;
 }
 
- .btn-sm {
+.btn-sm {
   width: 100%;
   font-size: 15px;
 }
@@ -56,6 +68,7 @@ body {
 }
 .fas fa-chevron-down fa-6x gallery-icon {
   padding-top: 100px;
+  color: var(--font-color);
 }
 
 .gallery-head {
@@ -66,20 +79,21 @@ body {
   text-transform: uppercase;
 }
 .gallery-icon {
-  color: #000000;
+  color: var(--font-color);
   text-align: center;
 }
 .itemNav {
   padding: 15px;
+  cursor: pointer;
 }
 .jumbotron {
   border-radius: 0;
 }
-.info{
+.info {
   display: flex;
   width: 100%;
   justify-content: center;
-  align-items:center;
+  align-items: center;
   flex-direction: column;
 }
 .lead {
@@ -88,21 +102,20 @@ body {
 .search-bar {
   justify-content: center;
 }
-
 .search-button {
   max-height: 38px;
+  margin-left: 10px;
 }
 
 .navbar {
   background-color: black;
-  color: white;
 }
 .navbar ~ * {
   position: relative;
   top: 4.45rem;
 }
 .navTitle {
-  color: #ffffff;
+  color: var(--font-color);
   padding-left: 50px;
   size: 50px;
 }
@@ -117,7 +130,7 @@ body {
   margin: 0 10px;
   border: 1px solid #dddddd;
   border-radius: 3px;
-  background: #ffffff;
+  background: var(--bg-color);
 
   display: flex;
   align-items: center;
@@ -134,13 +147,12 @@ body {
   outline: 1px solid black;
 }
 @media (max-width: 900px) {
-  
   #header {
     width: 100%;
   }
-  .info{
+  .info {
     display: flex;
-    align-items:center;
+    align-items: center;
     justify-content: center;
     flex-direction: column;
     width: 100%;
@@ -160,17 +172,14 @@ body {
   /* #normal-view {
     margin-left: 50%;
   } */
-  .view-div{
+  .view-div {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
   }
 }
 
-
-
-
 @media only screen and (max-width: 600px) {
   .display-3 {
     font-size: 4rem;

icons/grid-large.svg

@@ -34,6 +34,9 @@
         <li class="nav-item itemNav">
           <a class="nav-link" href="about.html">About</a>
         </li>
+        <li class="nav-item itemNav">
+         <p class="nav-link" id="toggle">🌞</p>
+        </li>
       </ul>
     </div>
   </nav>
@@ -66,8 +69,8 @@ <h1 class="gallery-head" id="gallery1">Pokémon gallery</h1>
       </button>
     </div>
     <div class="view-div">
-      <button class="view-button" id="normal-view"><img src="icons/grid-small.png"> Normal</button>
-      <button class="view-button" id="compact-view"><img src="icons/grid-large.png"> Compact</button>
+      <button class="view-button" id="normal-view"><img src="icons/grid-small.svg"> Normal</button>
+      <button class="view-button" id="compact-view"><img src="icons/grid-large.svg"> Compact</button>
     </div>
   </div>
   <section id="gallery">