Add themetoggle

src/components/Footer.astro

@@ -6,6 +6,7 @@ import {
     SPONSOR_URL,
 } from "../scripts/constants";
 import { Icon } from "astro-icon";
+import Theme from "./Theme.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>
+            <Theme client:load>
+                <Icon name="fa-regular:sun" slot="light"/>
+                <Icon name="fa-regular:moon" slot="dark"/>
+            </Theme>
         </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/Theme.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 && window.matchMedia('(prefers-color-scheme: light').matches)
+                return "Light";
+            else return "Dark";
+          })();
+
+    const selected = writable(initialValue);
+    let first = true;
+    // Note - Theme switcher does not work on dev mode
+    if (!IS_SERVER) {
+        selected.subscribe(v => {
+            localStorage.theme = v;
+            v = v.toLowerCase();
+            const prev = (v === "light") ? "dark" : "light";
+            if (first) {
+                document.body.classList.add(v);
+                first = false;
+            }
+            else document.body.classList.replace(prev, 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} title="Switch to Dark">
+    {#if $selected === "Light"}
+        <slot name="light"/>
+    {:else if $selected === "Dark"}
+        <slot name="dark"/>
+    {/if}
+</button>
+
+<style>
+    button {
+        all: unset;
+        cursor: pointer;
+    }
+    button slot {
+        display: inline-block;
+        width: 1.5em;
+        height: 1.5em;
+        color: var(--fg0);
+    }
+    button slot {
+        color: var(--accent);
+    }
+</style>