Add themetoggle

src/components/Footer.astro

@@ -6,6 +6,7 @@ import {
     SPONSOR_URL,
 } from "../scripts/constants";
 import { Icon } from "astro-icon";
+import ThemeToggle from "./ThemeToggle.svelte";
 ---
 
 <footer>
@@ -31,6 +32,10 @@ import { Icon } from "astro-icon";
             <a href="/support" title="Support Vencord's Development">
                 <Icon name="fa-regular:heart" />
             </a>
+            <ThemeToggle client:load>
+                <Icon name="fa-regular:sun" slot="light" title="Switch to Light theme" />
+                <Icon name="fa-regular:moon" slot="dark" title="Switch to Dark theme" />
+            </ThemeToggle>
         </div>
     </div>
 </footer>

src/components/NavBar.astro

@@ -1,5 +1,6 @@
 ---
 const navLinks = {
+    "download": ["Download", "accentPurple"],
     "plugins": ["Plugins", "accentBlue"],
     "faq": ["FAQ", "accentAqua"],
     "docs": ["Docs", "accentGreen"],
@@ -17,13 +18,6 @@ const page = Astro.url.pathname.split("/")[1];
                 <div id="oneko" aria-hidden="true"></div>
             </a>
         </div>
-        <div id="btnsleft" class="p-label-m">
-            <ul>
-                <li>
-                    <a href="/download" style="--accent:var(--accentPurple)" class:list={{ active: page === "download" }}>Download</a>
-                </li>
-            </ul>
-        </div>
         <div id="btns" class="p-label-m">
             <ul id="right">
                 {Object.entries(navLinks).map(([link, [display, color]]) =>

src/components/ThemeToggle.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { writable } from "svelte/store";
+
+    import { IS_SERVER } from "../scripts/constants";
+
+    const options = ["Light", "Dark"] as const;
+
+    const initialValue = IS_SERVER
+        ? "Dark"
+        : (() => {
+              const stored = localStorage.theme;
+              if (stored && options.includes(stored)) return stored;
+
+              if (window.matchMedia("(prefers-color-scheme: light)").matches)
+                  return "Light";
+              else return "Dark";
+          })();
+
+    const selected = writable(initialValue);
+    if (!IS_SERVER) {
+        selected.subscribe(v => {
+            localStorage.theme = v;
+            v = v.toLowerCase();
+            const prev = v === "light" ? "dark" : "light";
+            document.body.classList.remove(prev);
+            document.body.classList.add(v); 
+        });
+    }
+
+    function themeSwitch() {
+        selected.update(x => (x = x === "Light" ? "Dark" : "Light"));
+    }
+</script>
+
+<!-- Probably not the best way to go about this tbh -->
+<button on:click={themeSwitch}>
+    {#if $selected === "Light"}
+        <slot name="dark" />
+    {:else if $selected === "Dark"}
+        <slot name="light" />
+    {/if}
+</button>
+
+<style>
+    button {
+        all: unset;
+        cursor: pointer;
+    }
+    button:focus-visible {
+        /* Should stylize this to be less ugly, 
+           along with other elements - Tyler */
+        outline: auto;
+    }
+    button slot {
+        display: inline-block;
+        width: 1.5em;
+        height: 1.5em;
+        color: var(--fg0);
+    }
+    button slot {
+        color: var(--accent);
+    }
+</style>