chore: provide `screenMenu` prop

__tests__/e2e/.vitepress/theme/CustomAppearance.vue

@@ -2,7 +2,7 @@
 import { useData } from 'vitepress'
 import VPSwitchAppearance from 'vitepress/dist/client/theme-default/components/VPSwitchAppearance.vue'
 
-defineProps<{ text: string }>()
+defineProps<{ text: string; screenMenu?: boolean }>()
 
 const { site, theme } = useData()
 </script>
@@ -11,6 +11,7 @@ const { site, theme } = useData()
   <div
     v-if="site.appearance && site.appearance !== 'force-dark'"
     class="CustomAppearance"
+    :class="{ mobile: screenMenu }"
   >
     <p class="text">
       {{ text || theme.darkModeSwitchLabel || 'Appearance' }}
@@ -26,9 +27,11 @@ const { site, theme } = useData()
   align-items: center;
   border-radius: 8px;
   padding: 12px 14px 12px 16px;
-  background-color: var(--vp-c-bg-soft);
   min-width: 200px;
 }
+.CustomAppearance.mobile {
+  background-color: var(--vp-c-bg-soft);
+}
 
 .text {
   line-height: 24px;

src/client/theme-default/components/VPNavScreenMenuGroup.vue

@@ -38,7 +38,7 @@ function toggle() {
         </div>
 
         <div v-else-if="'component' in item" :key="item.component" class="item">
-          <component :is="item.component" v-bind="{ text: item.text }" />
+          <component :is="item.component" v-bind="{ text: item.text, screenMenu: true }" />
         </div>
 
         <div v-else class="group">