style: rebranch with newly designed logo

Signed-off-by: Neko Ayaka <neko@ayaka.moe>

apps/stage-web/public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/stage-web/src/components/Layouts/Header.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
+import { useDark } from '@vueuse/core'
+
+import LogoDark from '../../assets/logo-dark.svg'
+import Logo from '../../assets/logo.svg'
 import DesktopSettings from '../Widgets/DesktopSettings.vue'
+
+const dark = useDark()
 </script>
 
 <template>
@@ -8,7 +14,12 @@ import DesktopSettings from '../Widgets/DesktopSettings.vue'
       href="https://github.com/moeru-ai/airi" rel="noreferrer noopener" target="_blank" flex="~ 1" w-full items-center
       gap-2 px-2 text-nowrap text-2xl outline-none
     >
-      <div i-solar:cat-outline text="[#ed869d]" />
+      <template v-if="dark">
+        <img :src="LogoDark" h-8 w-8>
+      </template>
+      <template v-else>
+        <img :src="Logo" h-8 w-8>
+      </template>
       <div font-cute>
         <span>アイリ</span>
       </div>