fix: multiple integration issues (#476)

nuxtjs.org/components/ASelectNative.vue

@@ -2,7 +2,7 @@
   <div class="relative">
     <select
       v-bind="props"
-      class="select-none"
+      class="select-none appearance-none"
       :class="[{ 'pointer-events-none opacity-50': disabled }, selectClass]"
       @input="$emit('input', $event.target.value)"
       @focus="handleFocus(true)"

nuxtjs.org/components/MFooterColorModeSelector.vue

@@ -6,7 +6,7 @@
       { value: 'light', text: 'Light' },
       { value: 'dark', text: 'Dark' }
     ]"
-    select-class="appearance-none block w-full bg-none dark:bg-transparent light:bg-white border light:border-gray-200 dark:border-secondary-dark rounded-md py-2 pl-3 pr-10 text-base light:text-gray-500 dark:text-secondary-surface focus:outline-none light:focus:ring-black dark:focus:ring-white light:focus:border-gray-400 dark:focus:border-secondary-light sm:text-sm"
+    select-class="appearance-none font-sans block w-full d-body-bg border light:border-gray-200 dark:border-secondary-dark rounded-md py-2 pl-3 pr-10 text-base light:text-gray-500 dark:text-secondary-surface focus:outline-none light:focus:ring-black dark:focus:ring-white light:focus:border-gray-400 dark:focus:border-secondary-light sm:text-sm"
   />
 </template>
 

nuxtjs.org/docus.config.ts

@@ -46,7 +46,8 @@ export default {
       'd-prose-code-filename-text': 'text-gray-600 dark:text-secondary-light',
       'd-prose-thead-border': 'border-b border-gray-200 dark:border-secondary-dark',
       'd-prose-tr-border': 'border-b border-gray-100 dark:border-secondary-darker',
-      'd-prose-blockquote-border': 'border-l-2 border-gray-200 dark:border-secondary-darker'
+      'd-prose-blockquote-border': 'border-l-2 border-gray-200 dark:border-secondary-darker',
+      'd-tertiary-text': 'text-gray-400 dark:text-cloud-dark'
     }
   }
 }

src/defaultTheme/components/organisms/PageContent.vue

@@ -79,7 +79,7 @@ export default defineComponent({
   }
 }
 #headline {
-  @apply m-0 flex-1 text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100;
+  @apply m-0 flex-1 text-4xl font-semibold tracking-tight;
 }
 #lead {
   @apply mt-4 mb-0 text-lg font-medium d-secondary-text;

src/defaultTheme/components/organisms/blog/BlogpostToc.vue

@@ -6,13 +6,10 @@
       z-10
       px-4
       text-sm
-      bg-white
       border-b border-gray-100 border-dashed
       top-header
       dark:border-gray-800
-      d-blur-header
-      bg-opacity-80
-      dark:bg-gray-900 dark:bg-opacity-80
+      d-blur-header d-page-mobile-toc-bg
     "
   >
     <button

src/defaultTheme/components/templates/BlogPost.vue

@@ -20,16 +20,12 @@
           <h1 class="flex-1 text-3xl sm:text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">
             {{ page.title }}
           </h1>
-          <p class="my-4 text-base font-medium text-gray-500 dark:text-gray-400">
+          <p class="my-4 text-base font-medium d-secondary-text">
             {{ page.description }}
           </p>
 
           <div class="flex sm:flex-row items-center">
-            <time
-              v-if="page.date"
-              :datetime="page.date"
-              class="font-medium mr-2 text-sm text-gray-400 dark:text-gray-500"
-            >
+            <time v-if="page.date" :datetime="page.date" class="font-medium mr-2 text-sm d-tertiary-text">
               {{ formatDateByLocale($i18n.locale, page.date) }}
             </time>
 
@@ -67,7 +63,7 @@
 
       <div class="max-w-4xl mx-auto">
         <div class="aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-gray-800 mb-8">
-          <NuxtImg :src="imgUrl" width="864" height="378" alt="" class="object-cover" />
+          <NuxtImg :src="imgUrl" :alt="page.title" />
         </div>
       </div>
 

src/defaultTheme/settings.ts

@@ -39,6 +39,7 @@ const defaultThemeSettings = {
     'd-secondary-bg': 'bg-gray-500 dark:bg-gray-400',
     'd-secondary-text': 'text-gray-500 dark:text-gray-400',
     'd-secondary-text-hover': 'text-primary-500 dark:text-primary-400',
+    'd-tertiary-text': 'text-gray-400 dark:text-gray-500',
     'd-primary-text-hover': 'text-gray-600 dark:text-gray-400',
     'd-secondary-text-active': 'text-gray-900 dark:text-gray-300',
     'd-prose-code-inline-bg': 'bg-gray-100 dark:bg-gray-800',