style: rebranch with newly designed logo

apps/stage-web/index.html

@@ -4,8 +4,7 @@
     <meta charset="UTF-8" />
     <title>アイリ</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
-    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any" />
     <link rel="shortcut icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <meta name="apple-mobile-web-app-title" content="アイリ" />

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>

apps/stage-web/vite.config.ts

@@ -19,7 +19,6 @@ import VueDevTools from 'vite-plugin-vue-devtools'
 import Layouts from 'vite-plugin-vue-layouts'
 
 import { exists } from '../../scripts/fs'
-import { appName } from './src/constants'
 
 export default defineConfig({
   optimizeDeps: {
@@ -97,10 +96,28 @@ export default defineConfig({
           registerType: 'autoUpdate',
           includeAssets: ['favicon.svg', 'apple-touch-icon.png'],
           manifest: {
-            name: appName,
-            short_name: appName,
-            theme_color: '#ffffff',
+            name: 'Airi',
+            short_name: 'Airi',
+            theme_color: '#ffc6cb',
             icons: [
+              {
+                purpose: 'maskable',
+                sizes: '192x192',
+                src: '/maskable_icon_x192.png',
+                type: 'image/png',
+              },
+              {
+                purpose: 'maskable',
+                sizes: '512x512',
+                src: '/maskable_icon_x512.png',
+                type: 'image/png',
+              },
+              {
+                purpose: 'maskable',
+                sizes: '1024x1024',
+                src: '/maskable_icon.png',
+                type: 'image/png',
+              },
               {
                 src: '/web-app-manifest-192x192.png',
                 sizes: '192x192',