Use proper wordmarks

.env

@@ -16,6 +16,8 @@ VITE_ENABLE_ZAPS=true
 VITE_APP_NAME=Coracle
 VITE_APP_URL=https://app.coracle.social
 VITE_APP_LOGO=/images/logo.png
+VITE_APP_WORDMARK_DARK=/images/wordmark-dark.png
+VITE_APP_WORDMARK_LIGHT=/images/wordmark-light.png
 VITE_APP_DESCRIPTION="A nostr client for regular people"
 VITE_CLIENT_NAME=Coracle
 VITE_CLIENT_ID=31990:97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322:1685968093690

src/app/MenuDesktop.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {toggleTheme, appName} from "src/partials/state"
+  import {toggleTheme, theme, appName} from "src/partials/state"
   import MenuItem from "src/partials/MenuItem.svelte"
   import FlexColumn from "src/partials/FlexColumn.svelte"
   import Anchor from "src/partials/Anchor.svelte"
@@ -51,13 +51,16 @@
 
 <div class="fixed bottom-0 left-0 top-0 z-nav w-72 bg-tinted-700 transition-colors">
   <Anchor
-    class="mb-4 mt-4 flex items-center gap-2 pl-6"
     external
+    class="mb-4 mt-4 flex items-center gap-2 px-6"
     href="https://info.coracle.social">
-    <img alt="App Logo" src={import.meta.env.VITE_APP_LOGO} class="w-12" />
-    <h1 class="staatliches -mb-[0.1em] leading-none" style={`font-size: ${appName.length / 3}em`}>
-      {appName}
-    </h1>
+    <img
+      alt="App Logo"
+      src={
+        $theme === "dark"
+          ? import.meta.env.VITE_APP_WORDMARK_DARK
+          : import.meta.env.VITE_APP_WORDMARK_LIGHT
+      } />
   </Anchor>
   <MenuDesktopItem path="/notes">Feed</MenuDesktopItem>
   {#if !$env.FORCE_GROUP && $env.PLATFORM_RELAYS.length === 0}