diff --git a/src/client/theme-default/components/VPNavBarSearch.vue b/src/client/theme-default/components/VPNavBarSearch.vue
index 585ba3d5..32950a20 100644
--- a/src/client/theme-default/components/VPNavBarSearch.vue
+++ b/src/client/theme-default/components/VPNavBarSearch.vue
@@ -113,10 +113,19 @@ if (!__ALGOLIA__ && theme.value.offlineSearch) {
     }
   })
 }
+
+const metaKey = ref(`'Meta'`)
+
+onMounted(() => {
+  // meta key detect (same logic as in @docsearch/js)
+  metaKey.value = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
+    ? `'⌘'`
+    : `'Ctrl'`
+})
 </script>
 
 <template>
-  <div class="VPNavBarSearch">
+  <div class="VPNavBarSearch" :style="{ '--vp-meta-key': metaKey }">
     <template v-if="theme.algolia">
       <VPAlgoliaSearchBox v-if="loaded" :algolia="theme.algolia" />
 
diff --git a/src/client/theme-default/components/VPNavBarSearchButton.vue b/src/client/theme-default/components/VPNavBarSearchButton.vue
index 96cf7437..d236acbd 100644
--- a/src/client/theme-default/components/VPNavBarSearchButton.vue
+++ b/src/client/theme-default/components/VPNavBarSearchButton.vue
@@ -1,18 +1,7 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-
 defineProps<{
   placeholder: string
 }>()
-
-const metaKey = ref(`'Meta'`)
-
-onMounted(() => {
-  // meta key detect (same logic as in @docsearch/js)
-  metaKey.value = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
-    ? `'⌘'`
-    : `'Ctrl'`
-})
 </script>
 
 <template>
@@ -210,7 +199,7 @@ onMounted(() => {
 }
 
 .DocSearch-Button .DocSearch-Button-Key:first-child:after {
-  content: v-bind(metaKey);
+  content: var(--vp-meta-key);
   font-size: 12px;
   letter-spacing: normal;
   color: var(--docsearch-muted-color);