Update DocSearch configuration

Author: Carlos

.env.development

@@ -3,9 +3,9 @@ VITE_BASE_URL=next.javascriptcheatsheet.org
 VITE_GTAG=G-RETM00X0HZ
 
 VITE_DOCSEARCH_CONTAINER=#docsearch
-VITE_DOCSEARCH_APP_ID=5Y2U5SSBPV
+VITE_DOCSEARCH_APP_ID=HXR64MO8DE
 VITE_DOCSEARCH_INDEX_NAME=javascriptcheatsheet
-VITE_DOCSEARCH_API_KEY=feeb2b112b0775e792655f85233b3979
+VITE_DOCSEARCH_API_KEY=6ffeec200d342ea3a606efec19476e2a
 
 VITE_LOAD_CARBON=true
 VITE_CARBON_SERVE=CVAIKKQM

src/components/layout/TheNavbar.vue

@@ -25,7 +25,7 @@ const route = useRoute()
             </router-link>
           </div>
 
-          <!-- <algolia-doc-search /> -->
+          <algolia-doc-search />
         </div>
 
         <!-- actions -->

src/styles/docsearch.css

@@ -2,50 +2,50 @@
 :root {
   --docsearch-primary-color: red;
   --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-muted-color: theme('colors.slate.500');
-  --docsearch-emphasis-color: theme('colors.slate.900');
+  --docsearch-muted-color: theme('colors.zinc.500');
+  --docsearch-emphasis-color: theme('colors.zinc.900');
   --docsearch-logo-color: #5468ff;
   --docsearch-modal-width: 35rem;
   --docsearch-modal-height: 37.5rem;
   --docsearch-modal-background: theme('colors.white');
   --docsearch-modal-shadow: theme('boxShadow.xl');
   --docsearch-searchbox-height: 3rem;
-  --docsearch-hit-color: theme('colors.slate.700');
-  --docsearch-hit-active-color: theme('colors.sky.600');
-  --docsearch-hit-active-background: theme('colors.slate.100');
+  --docsearch-hit-color: theme('colors.zinc.700');
+  --docsearch-hit-active-color: theme('colors.amber.600');
+  --docsearch-hit-active-background: theme('colors.zinc.100');
   --docsearch-footer-height: 3rem;
-  --docsearch-border-color: theme('colors.slate.200');
-  --docsearch-input-color: theme('colors.slate.900');
-  --docsearch-heading-color: theme('colors.slate.900');
-  --docsearch-key-background: theme('colors.slate.100');
-  --docsearch-key-hover-background: theme('colors.slate.200');
-  --docsearch-key-color: theme('colors.slate.500');
-  --docsearch-action-color: theme('colors.slate.400');
-  --docsearch-action-active-background: theme('colors.slate.200');
-  --docsearch-loading-background: theme('colors.slate.400');
-  --docsearch-loading-foreground: theme('colors.slate.900');
+  --docsearch-border-color: theme('colors.zinc.200');
+  --docsearch-input-color: theme('colors.zinc.900');
+  --docsearch-heading-color: theme('colors.zinc.900');
+  --docsearch-key-background: theme('colors.zinc.100');
+  --docsearch-key-hover-background: theme('colors.zinc.200');
+  --docsearch-key-color: theme('colors.zinc.500');
+  --docsearch-action-color: theme('colors.zinc.400');
+  --docsearch-action-active-background: theme('colors.zinc.200');
+  --docsearch-loading-background: theme('colors.zinc.400');
+  --docsearch-loading-foreground: theme('colors.zinc.900');
 }
 
 .dark {
   --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-muted-color: theme('colors.slate.400');
+  --docsearch-muted-color: theme('colors.zinc.400');
   --docsearch-emphasis-color: theme('colors.white');
-  --docsearch-logo-color: theme('colors.slate.300');
-  --docsearch-modal-background: theme('colors.slate.800');
-  --docsearch-modal-shadow: 0 0 0 1px theme('colors.slate.700'),
+  --docsearch-logo-color: theme('colors.zinc.300');
+  --docsearch-modal-background: theme('colors.zinc.800');
+  --docsearch-modal-shadow: 0 0 0 1px theme('colors.zinc.700'),
     theme('boxShadow.xl');
-  --docsearch-hit-color: theme('colors.slate.300');
-  --docsearch-hit-active-color: theme('colors.sky.400');
+  --docsearch-hit-color: theme('colors.zinc.300');
+  --docsearch-hit-active-color: theme('colors.amber.400');
   --docsearch-hit-active-background: rgb(51 65 85 / 0.3);
   --docsearch-border-color: rgb(148 163 184 / 0.1);
   --docsearch-heading-color: theme('colors.white');
   --docsearch-key-background: rgb(51 65 85 / 0.4);
   --docsearch-key-hover-background: rgb(51 65 85 / 0.8);
-  --docsearch-key-color: theme('colors.slate.400');
+  --docsearch-key-color: theme('colors.zinc.400');
   --docsearch-input-color: theme('colors.white');
-  --docsearch-action-color: theme('colors.slate.500');
-  --docsearch-action-active-background: theme('colors.slate.700');
-  --docsearch-loading-background: theme('colors.slate.500');
+  --docsearch-action-color: theme('colors.zinc.500');
+  --docsearch-action-active-background: theme('colors.zinc.700');
+  --docsearch-loading-background: theme('colors.zinc.500');
   --docsearch-loading-foreground: theme('colors.white');
 }
 
@@ -526,7 +526,7 @@ svg.DocSearch-Hit-Select-Icon {
   box-shadow: var(--docsearch-searchbox-shadow);
   color: #e2e8f0;
   outline: none;
-  border: 1px solid #38bdf8;
+  border: 1px solid #52525b;
 }
 
 .DocSearch-Button:active,
@@ -536,7 +536,7 @@ svg.DocSearch-Hit-Select-Icon {
   box-shadow: var(--docsearch-searchbox-shadow);
   color: var(--docsearch-text-color);
   outline: none;
-  border: 1px solid #38bdf8;
+  border: 1px solid #d4d4d8;
 }
 .DocSearch-Button-Container {
   align-items: center;
@@ -579,12 +579,14 @@ svg.DocSearch-Hit-Select-Icon {
   font-weight: 500;
   border: 0;
   width: 16px;
-  transition: color 0.3s, border-color 0.3s;
+  transition:
+    color 0.3s,
+    border-color 0.3s;
 }
 
 @screen md {
   .dark .DocSearch-Button {
-    background: #1e293b !important;
+    background: #030712 !important;
   }
 }