theme

src/layouts/DefaultLayout.vue

@@ -2,17 +2,17 @@
 import { useRouter } from 'vue-router'
 import { authClient } from '@/lib/auth-client.ts'
 import { computed, ref } from 'vue'
-import { useTheme } from 'vuetify'
 import ProjectMenu from '@/components/ProjectMenu.vue'
 import AppBreadcrumbs from '@/components/AppBreadcrumbs.vue'
 import BackButton from '@/components/BackButton.vue'
+import { useThemeMode } from '@/composables/useThemeMode.ts'
+import { THEME_ICONS } from '@/lib/theme.ts'
 
 const router = useRouter()
 const session = authClient.useSession()
-const theme = useTheme()
+const { mode: themeMode, cycleThemeMode } = useThemeMode()
 
-const title = 'APP'
-const version = '0.0.1'
+const title = 'Ulitka'
 
 const isAuth = computed(() => !!session.value.data)
 
@@ -56,12 +56,6 @@ async function goToSignOut() {
   })
 }
 
-function toggleTheme(e: MouseEvent) {
-  const target = e.target as HTMLElement
-  theme.setTransitionOrigin(target)
-  theme.toggle()
-}
-
 const goToSettings = () => {
   router.push({ name: 'settings' })
 }
@@ -90,8 +84,9 @@ const goToSettings = () => {
       </template>
       <v-divider class="mx-1" vertical />
       <v-app-bar-title>
-        <router-link class="text-decoration-none text-link font-weight-bold" to="/">
-          {{ title }}
+        <router-link class="text-decoration-none text-link font-weight-bold d-flex align-baseline ga-2" to="/">
+          <v-icon icon="mdi-snail" />
+          <div>{{ title }}</div>
         </router-link>
       </v-app-bar-title>
 
@@ -113,7 +108,12 @@ const goToSettings = () => {
       </div>
 
       <v-divider class="mx-2" vertical />
-      <v-btn icon="mdi-brightness-6" density="comfortable" @click="toggleTheme" />
+      <v-btn
+        :icon="THEME_ICONS[themeMode]"
+        :title="`Theme: ${themeMode}`"
+        density="comfortable"
+        @click="cycleThemeMode"
+      />
       <v-divider class="mx-2" vertical />
 
       <div v-if="session.data">