docs(theme): improve selector UX

- Show current theme name in toggle title
- Fix copy button title to say Vuetify0
- Add margin-top to popover content

Author: johnleider

apps/docs/src/components/app/AppThemeSelector.vue

@@ -12,7 +12,7 @@
   // Themes
   import type { ThemeId } from '@/themes'
 
-  const { icon, preference, setPreference } = useThemeToggle()
+  const { icon, title, preference, setPreference } = useThemeToggle()
 
   const isOpen = ref(false)
 
@@ -50,13 +50,13 @@
     <Popover.Activator
       aria-label="Select theme"
       class="bg-surface-tint text-on-surface-tint pa-1 inline-flex rounded hover:bg-surface-variant transition-all cursor-pointer"
-      title="Select theme"
+      :title="title"
     >
       <AppIcon :icon />
     </Popover.Activator>
 
     <Popover.Content
-      class="p-3 rounded-lg bg-surface border border-divider shadow-xl min-w-56"
+      class="p-3 rounded-lg bg-surface border border-divider shadow-xl min-w-56 !mt-1"
       position-area="bottom span-left"
       position-try="bottom span-left, bottom span-right, top span-left, top span-right"
     >

apps/docs/src/components/app/settings/AppSettingsTheme.vue

@@ -52,7 +52,7 @@
       <span>Theme</span>
       <button
         class="ml-auto p-1 rounded hover:bg-surface-tint transition-colors inline-flex items-center justify-center shrink-0"
-        title="Copy current theme as Vuetify config"
+        title="Copy theme as Vuetify0 config"
         type="button"
         @click="exportTheme"
       >

apps/docs/src/composables/useThemeToggle.ts

@@ -92,7 +92,7 @@ export function useThemeToggle (): UseThemeToggleReturn {
   }
 
   const icon = toRef(() => PREFERENCE_ICONS[preference.value] ?? 'theme-system')
-  const title = toRef(() => `Toggle Theme (${PREFERENCE_LABELS[preference.value] ?? 'System'})`)
+  const title = toRef(() => `Theme: ${PREFERENCE_LABELS[preference.value] ?? 'System'}`)
 
   function toggle () {
     const currentIndex = PREFERENCE_ORDER.indexOf(preference.value)