dark/light mode toggle

README.md

@@ -0,0 +1 @@
+Javalsai's website https://javalsai.dynv6.net/

components/header.html

@@ -5,6 +5,13 @@
 	<li><a href="https://git.javalsai.dynv6.net/">gitea</a></li>
 	<li><a href="/tools">tools</a></li>
 	<li><a href="/notes">notes</a></li>
+	<button class="theme-toggle-button" onclick="light_mode()"><img class="theme-toggle-image" height="12px" margin="0px" /></button>
       </ul>
     </nav>
+     <script>
+       function light_mode() {
+	   var element = document.body;
+	   element.classList.toggle("light-mode");
+       }
+    </script>
 </header>

index.html

@@ -96,6 +96,7 @@
       and no, no <i>light</i> mode, I have enough with this
     </p>
   </footer>
+  
 </body>
 
 </html>

style.css

@@ -21,6 +21,26 @@ body {
   color: var(--text);
   caret-color: var(--primary);
 }
+.light-mode {
+  background-color: white;
+  color: black;
+  .theme-toggle-image {
+	  content:url("/assets/moon.png");
+  }
+  button {
+      background-color: white;
+      border: 0px;
+      margin: 0px
+  }
+}
+.theme-toggle-image {
+  content:url("/assets/sun.png");
+}
+button {
+    background-color: black;
+    border: 0px;
+    margin: 0px
+}
 
 *, *::before, *::after {
   transition: all .3s ease-out;