form

frontend/src/lib/components/Footer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { navigate } from "svelte-routing"
-    import { serviceNavigation, sites } from "../stores"
+    import { serviceNavigation, sites, darkMode } from "../stores"
 </script>
 
 <div class="footer">
@@ -37,12 +37,20 @@
         {/each}
     </div>
     <button
+        class="darklight"
         on:click="{() => {
             const body = document.querySelector('body')
-            if (body) body.classList.toggle('darkTheme')
+            if (body) {
+                body.classList.toggle('darkTheme')
+            }
+            $darkMode = !$darkMode
         }}"
     >
-        toggletheme
+        {#if !$darkMode}
+            <img src="/media/dark.svg" alt="darkmode" />
+        {:else}
+            <img src="/media/light.svg" alt="lightmode" />
+        {/if}
     </button>
 </div>
 
@@ -51,6 +59,15 @@
     .social {
         margin-top: 20px;
     }
+    .darklight {
+        width: 36px;
+        height: 36px;
+        object-fit: contain;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
     .footer {
         margin-top: 60px;
         width: 100vw;