Added darkmode

index.html

@@ -7,7 +7,10 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-
+    <link
+      rel="stylesheet"
+      href="./darkmode.css"
+    />
     <!-- Bootstrap CSS -->
     <link
       rel="stylesheet"
@@ -20,9 +23,9 @@
     <link rel="icon" href="./img/favicon.png" />
   </head>
 
-  <body>
+  <body onload="load()" class="couldDark">
     <!--Begin Navbar-->
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light couldDark" id="navbar">
       <div class="container">
         <a class="navbar-brand" href="./"
           ><img
@@ -31,6 +34,7 @@
             class="d-inline-block align-top"
             alt=""
             loading="lazy"
+            id="pfostendynamics"
         /></a>
         <button
           class="navbar-toggler"
@@ -95,6 +99,15 @@
               <a class="nav-link" href="./shop">Shop</a>
             </li>
           </ul>
+          <a class="nav-link" href="#" onclick="darkMode()"
+            ><img
+              id="darkModeImg"
+              class="img-fluid"
+              data-toggle="tooltip"
+              data-placement="top"
+              title="Toggle darkmode"
+              src=""
+          /></a>
         </div>
       </div>
     </nav>
@@ -233,6 +246,15 @@
         <br />
       </div>
     </div>
+    <div class="couldDark">
+      Test
+    </div>
+    <div class="couldDark">
+      Test2
+    </div>
+    <div class="couldDark">
+      Test3
+    </div>
     <!-- Optional JavaScript; choose one of the two! -->
 
     <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
@@ -252,5 +274,11 @@
         <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
         -->
-  </body>
+        <script src="./js/main.js"></script>
+
+        <script>
+          $(function () {
+            $('[data-toggle="tooltip"]').tooltip();
+          });
+        </script>  </body>
 </html>