docs: improve search styling

docs/src/layouts/App/base.scss

@@ -1,3 +1,9 @@
+:root {
+  --docsearch-primary-color: #{$colorBlack};
+  --docsearch-logo-color: #{rgba($colorBlack, 0.3)};
+  --docsearch-container-background: #{rgba($colorBlack, 0.7)};
+}
+
 *,
 *::before,
 *::after {
@@ -91,11 +97,6 @@ code {
   color: white;
 }
 
-.DocSearch,
-.DocSearch-Container {
-  filter: saturate(0);
-}
-
 .DocSearch-Container {
   position: fixed !important;
   height: 100vh !important;

docs/src/layouts/App/index.vue

@@ -17,7 +17,8 @@
         <div class="app__menu">
           <span class="app__menu-item">
             <icon name="search-line" />
-            Search
+            <span>Search</span>
+            <span class="app__search-shortcut" />
             <div class="app__search-docsearch" />
           </span>
 

docs/src/layouts/App/style.scss

@@ -122,6 +122,26 @@ $menuBreakPoint: 800px;
     position: relative;
   }
 
+  &__search-shortcut {
+    display: inline-flex;
+
+    @media (min-width: $menuBreakPoint) {
+      &::after {
+        content: "⌘K";
+        display: inline-flex;
+        align-items: center;
+        font-weight: 700;
+        text-transform: uppercase;
+        color: $colorGrey;
+        background-color: rgba($colorBlack, 0.05);
+        font-size: 0.75rem;
+        padding: 0 0.4rem;
+        border-radius: 0.4rem;
+        margin-left: 0.4rem;
+      }
+    }
+  }
+
   &__search-docsearch {
     ::v-deep > button {
       position: absolute;