Add theme toggle on mobile, change button color for quick links

src/app/components/MenuSettings.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Server from "@assets/icons/server.svg?dataurl"
+  import Moon from "@assets/icons/moon.svg?dataurl"
   import Settings from "@assets/icons/settings-minimalistic.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
   import Exit from "@assets/icons/logout-3.svg?dataurl"
@@ -13,8 +14,11 @@
   import LogOut from "@app/components/LogOut.svelte"
   import {PLATFORM_NAME} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
+  import {theme} from "@app/util/theme"
 
   const logout = () => pushModal(LogOut)
+
+  const toggleTheme = () => theme.set($theme === "dark" ? "light" : "dark")
 </script>
 
 <div class="column menu gap-2">
@@ -83,6 +87,19 @@
       {/snippet}
     </CardButton>
   </Link>
+  <Button onclick={toggleTheme}>
+    <CardButton class="dark:btn-neutral">
+      {#snippet icon()}
+        <div><Icon icon={Moon} size={7} /></div>
+      {/snippet}
+      {#snippet title()}
+        <div>Theme</div>
+      {/snippet}
+      {#snippet info()}
+        <div>Switch between light and dark mode</div>
+      {/snippet}
+    </CardButton>
+  </Button>
   <Link replaceState href="/settings/about">
     <CardButton class="dark:btn-neutral">
       {#snippet icon()}