Update the homepage dark color

frontend/src/components/VFourOhFour.vue

@@ -38,7 +38,7 @@ useHead({
 <template>
   <div class="error grid overflow-x-hidden">
     <VSvg
-      class="z-0 pointer-events-none col-start-1 row-start-1 -mx-[15%] fill-gray-12 opacity-5 lg:mx-15 lg:-mt-20"
+      class="z-0 pointer-events-none col-start-1 row-start-1 -mx-[15%] fill-gray-12 opacity-5 lg:mx-15 lg:-mt-20 dark:fill-gray-8"
       viewBox="0 0 1320 569"
       name="oops"
     />

frontend/src/components/VHeader/VHeader.vue

@@ -36,7 +36,12 @@ const headerComponent = computed(() => {
   }[props.kind]
 })
 
-const bg = computed(() => `bg-${props.color}`)
+const bg = computed(() => {
+  if (props.color === "default") {
+    return "bg-default"
+  }
+  return "bg-complementary dark:bg-default"
+})
 </script>
 
 <template>

frontend/src/components/VHeader/VSearchBar/VSearchButton.vue

@@ -30,7 +30,7 @@ const { doneHydrating } = useHydrating()
         'border-tx bg-secondary hover:bg-primary': route === 'search',
         'border-tx bg-primary text-over-dark hover:!bg-primary-hover':
           route === 'home',
-        'border-black': route === '404',
+        'border-black dark:border-tx': route === '404',
       },
     ]"
   >

frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue

@@ -50,13 +50,13 @@ defineExpose({ focusInput })
   <form
     action="/search"
     role="search"
-    class="search-bar group flex h-14 flex-row items-center rounded-sm border-tx bg-default sm:h-16"
+    class="search-bar group flex h-14 flex-row items-center rounded-sm border-tx bg-default sm:h-16 dark:bg-overlay dark:focus-within:bg-default"
     @submit.prevent="handleSearch"
   >
     <div
       class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm rounded-e-none border border-e-0 p-0.5px pe-2 focus-within:border-1.5 focus-within:border-e-0 focus-within:p-0 focus-within:pe-2"
       :class="[
-        route === 'home' ? 'border-tx' : 'border-black',
+        route === 'home' ? 'border-tx' : 'border-black dark:border-tx',
         hasPopover ? 'focus-within:border-tx' : 'focus-within:border-focus',
       ]"
     >
@@ -66,7 +66,7 @@ defineExpose({ focusInput })
         type="search"
         name="q"
         :placeholder="$t('hero.search.placeholder')"
-        class="paragraph-large md:label-regular ms-4 h-full w-full appearance-none rounded-none bg-tx leading-none text-default placeholder-gray-8 focus-visible:outline-none"
+        class="paragraph-large md:label-regular focus-visible:outline-style-none ms-4 h-full w-full appearance-none rounded-none bg-tx leading-none text-default placeholder-gray-8 dark:placeholder-gray-4"
         :aria-label="
           $t('search.searchBarLabel', {
             openverse: 'Openverse',

frontend/src/layouts/default.vue

@@ -11,12 +11,12 @@ defineOptions({
 
 <template>
   <div
-    class="app h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr] flex-col bg-complementary"
+    class="app h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr] flex-col bg-complementary dark:bg-default"
   >
     <VHeader class="header-el" kind="internal" color="complementary" />
     <div class="main-content flex flex-grow flex-col overflow-y-scroll">
       <slot class="flex-grow" />
-      <VFooter mode="internal" class="bg-complementary" />
+      <VFooter mode="internal" class="bg-complementary dark:bg-default" />
     </div>
   </div>
 </template>
@@ -27,6 +27,11 @@ defineOptions({
   /* This is used by some elements. */
   --color-bg-curr-page: var(--color-bg-complementary);
 }
+@media (prefers-color-scheme: dark) {
+  .app {
+    --color-bg-curr-page: var(--color-bg);
+  }
+}
 .header-el {
   grid-area: header;
 }

frontend/src/pages/index.vue

@@ -85,7 +85,7 @@ const handleSearch = (searchTerm: string) => {
 
 <template>
   <main
-    class="index flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 px-6 sm:px-0 xl:flex-row xl:items-center xl:gap-0"
+    class="index flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 px-6 sm:px-0 xl:flex-row xl:items-center xl:justify-between xl:gap-0"
   >
     <div
       class="flex flex-grow flex-col items-center justify-center gap-6 xl:h-[33rem] xl:flex-grow-0 xl:items-start"