feat: light theme

unjs · Dec 1, 2023 · 53c6079 · 53c6079
1 parent 2df21d7
commit 53c6079
Show file tree

Hide file tree

Showing 31 changed files with 89 additions and 83 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -6,14 +6,14 @@ export default defineAppConfig({
       base: 'transition ease-in',
       color: {
         gray: {
-          solid: 'dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
+          solid: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
         },
       },
     },
     select: {
       base: 'transition ease-in',
       color: {
-        gray: { outline: 'dark:bg-gray-700/40 dark:hover:bg-gray-700/50' },
+        gray: { outline: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50' },
       },
     },
     buttonGroup: {
@@ -27,7 +27,7 @@ export default defineAppConfig({
       base: 'transition ease-in',
       color: {
         gray: {
-          outline: 'dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
+          outline: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
         },
       },
     },

diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue
@@ -6,17 +6,17 @@ const toggleTheme = function () {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
 }
 
-const uiButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-primary/40' } } }
+const uiButton = { color: { gray: { ghost: 'text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-primary/60 dark:hover:bg-primary/40' } } }
 </script>
 
 <template>
-  <footer class="px-6 pt-20 pb-20 md:pb-30 flex flex-col gap-12 md:gap-20 rounded-lg ring-1 dark:ring-gray-700 dark:bg-gray-700/20">
+  <footer class="px-6 pt-20 pb-20 md:pb-30 flex flex-col gap-12 md:gap-20 rounded-lg ring-1 ring-gray-300 bg-gray-300/20 dark:ring-gray-700 dark:bg-gray-700/20">
     <div class="grid md:grid-cols-2 gap-y-6 gap-x-12 md:gap-x-25">
       <div class="grow flex flex-col gap-6 max-w-sm">
         <NuxtLink to="/" class="block">
           <AppLogo />
         </NuxtLink>
-        <p class="max-w-lg text-sm md:text-base dark:text-zinc-400 italic">
+        <p class="max-w-lg text-sm md:text-base text-gray-500 dark:text-gray-400 italic">
           {{ website.footer.quote }}
         </p>
       </div>
@@ -27,10 +27,10 @@ const uiButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-g
       </ul>
       <nav class="mt-6 md:mt-0 md:justify-self-end md:col-start-2 md:row-start-1 grid grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-6 md:gap-10 text-[1.125rem]">
         <div v-for="list in website.footer.menu" :key="list.title" class="flex flex-col gap-4">
-          <p class="font-bold dark:text-gray-50">
+          <p class="font-bold text-gray-950 dark:text-gray-50">
             {{ list.title }}
           </p>
-          <ul class="flex flex-col gap-3 dark:text-gray-400">
+          <ul class="flex flex-col gap-3 text-gray-500 dark:text-gray-400">
             <li v-for="item in list.items" :key="item.url">
               <NuxtLink :to="item.url" :rel="item.rel" :target="item.target" class="hover:underline underline-offset-8">
                 {{ item.title }}
@@ -50,6 +50,6 @@ const uiButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-g
         </ClientOnly>
       </div>
     </div>
-    <AppFooterLicense class="text-sm dark:text-zinc-400 text-center" />
+    <AppFooterLicense class="text-sm dark:text-gray-400 text-center" />
   </footer>
 </template>
diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
@@ -34,15 +34,16 @@ defineShortcuts({
 
 const { metaSymbol } = useShortcuts()
 
-const uiButton = { font: 'font-semibold', color: { gray: { ghost: 'dark:text-gray-50 dark:hover:bg-primary/40' } } }
+const uiButton = { font: 'font-semibold', color: { gray: { ghost: 'text-gray-950 hover:bg-primary/60 dark:text-gray-50 dark:hover:bg-primary/40' } } }
+const activeClassButton = 'bg-primary bg-opacity-40 dark:bg-opacity-30'
 
 function toDesignKit() {
   navigateTo('/design-kit?utm_source=unjs.io&utm_medium=header-icon')
 }
 </script>
 
 <template>
-  <header class="h-[3.75rem] px-3 md:px-6 py-3 grid grid-cols-2 lg:grid-cols-3 rounded-lg ring-1 dark:ring-gray-700 dark:bg-gray-700/20">
+  <header class="h-[3.75rem] px-3 md:px-6 py-3 grid grid-cols-2 lg:grid-cols-3 rounded-lg ring-1 ring-gray-300 bg-gray-300/20  dark:ring-gray-700 dark:bg-gray-700/20">
     <div class="flex items-center">
       <NuxtLink to="/?utm_source=unjs.io&utm_medium=header-icon" @click.right.prevent="toDesignKit()">
         <AppLogo />
@@ -53,7 +54,7 @@ function toDesignKit() {
       <ol class="text-[1.125rem] flex gap-4 leading-5">
         <li v-for="item in navigation" :key="item._path">
           <UPopover v-if="item.children" mode="hover" :ui="{ width: 'max-w-[18rem]' }">
-            <UButton size="md" variant="ghost" color="gray" :to="item._path" :icon="item.icon" :ui="{ size: { md: 'text-base' }, ...uiButton }" active-class="bg-primary bg-opacity-30">
+            <UButton size="md" variant="ghost" color="gray" :to="item._path" :icon="item.icon" :ui="{ size: { md: 'text-base' }, ...uiButton }" :active-class="activeClassButton">
               {{ item.title }}
             </UButton>
 
@@ -72,7 +73,7 @@ function toDesignKit() {
               </ol>
             </template>
           </UPopover>
-          <UButton v-else size="md" variant="ghost" color="gray" :to="item._path" :icon="item.icon" :ui="{ size: { md: 'text-base' }, ...uiButton }" active-class="bg-primary bg-opacity-30">
+          <UButton v-else size="md" variant="ghost" color="gray" :to="item._path" :icon="item.icon" :ui="{ size: { md: 'text-base' }, ...uiButton }" :active-class="activeClassButton">
             {{ item.title }}
           </UButton>
         </li>

diff --git a/components/app/AppNavigationDialog.vue b/components/app/AppNavigationDialog.vue
@@ -13,7 +13,9 @@ defineEmits<{
 
 const website = useWebsite()
 
-const uiButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-primary/40' } } }
+const uiButton = { font: 'font-semibold', color: { gray: { ghost: 'text-gray-950 hover:bg-primary/60 dark:text-gray-50 dark:hover:bg-primary/40' } } }
+const activeClassButton = 'bg-primary bg-opacity-40 dark:bg-opacity-30'
+const uiSocialButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-primary/40' } } }
 </script>
 
 <template>
@@ -32,7 +34,7 @@ const uiButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-g
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <DialogPanel class="z-20 fixed inset-0 dark:bg-gray-900 flex flex-col justify-between dark:text-50">
+        <DialogPanel class="z-20 fixed inset-0 bg-white dark:bg-gray-900 flex flex-col justify-between text-gray-950 dark:text-gray-50">
           <div class="container mx-auto px-7 pt-4 flex flex-1 flex-col justify-between">
             <div class="h-[3.75rem] flex justify-between items-center">
               <DialogTitle>
@@ -43,27 +45,30 @@ const uiButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-g
             <nav class="mb-40">
               <ul
                 aria-labelledby="Navigation mobile"
-                class="flex flex-col gap-12 text-2xl font-semibold"
+                class="flex flex-col gap-2 text-2xl font-semibold"
               >
                 <li v-for="item in navigation" :key="item._path">
-                  <NuxtLink :to="item._path" class="flex items-center gap-5" active-class="text-primary" @click="$emit('update:open', false)">
-                    <span :class="item.icon" class="w-8 h-8 block" />
-                    <span>
-                      {{ item.title }}
-                    </span>
-                  </NuxtLink>
+                  <UButton
+                    size="xl"
+                    color="gray"
+                    variant="ghost"
+                    :to="item._path" :icon="item.icon" :ui="{ ...uiButton }" :active-class="activeClassButton"
+                    @click="$emit('update:open', false)"
+                  >
+                    {{ item.title }}
+                  </UButton>
                 </li>
               </ul>
             </nav>
             <div class="flex justify-center">
               <ul class="flex gap-2">
                 <li v-for="social in website.socials" :key="social.name">
-                  <UButton :rel="social.rel" :target="social.target" :to="social.url" :icon="social.icon" :aria-label="`Follow us on ${social.name}`" size="xl" variant="ghost" color="gray" :ui="{ icon: { xl: 'md:w-7 md:h-7' }, ...uiButton }" />
+                  <UButton :rel="social.rel" :target="social.target" :to="social.url" :icon="social.icon" :aria-label="`Follow us on ${social.name}`" size="xl" variant="ghost" color="gray" :ui="{ icon: { xl: 'md:w-7 md:h-7' }, ...uiSocialButton }" />
                 </li>
               </ul>
             </div>
           </div>
-          <div class="mt-12 w-full h-2 dark:bg-primary-500" />
+          <div class="mt-12 w-full h-2 bg-primary-500 dark:bg-primary-500" />
         </DialogPanel>
       </TransitionChild>
     </Dialog>

diff --git a/components/app/AppSearchDialog.vue b/components/app/AppSearchDialog.vue
@@ -54,7 +54,7 @@ function navigate() {
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <div class="fixed inset-0 bg-gray-900/70 backdrop-blur-sm" aria-hidden="true" />
+        <div class="fixed inset-0 bg-gray-100/70 dark:bg-gray-900/70 backdrop-blur-sm" aria-hidden="true" />
       </TransitionChild>
 
       <div class="fixed inset-0">
@@ -73,7 +73,7 @@ function navigate() {
                 <div class="relative">
                   <AppSearchInput v-model:query="query" class="w-full" :search-results="results" @validate="navigate" />
 
-                  <button class="absolute right-4 top-0 bottom-0 flex items-center dark:text-gray-400" type="button" @click="$emit('update:open', false)">
+                  <button class="absolute right-4 top-0 bottom-0 flex items-center text-gray-500 dark:text-gray-400" type="button" @click="$emit('update:open', false)">
                     <span class="i-heroicons-x-mark-20-solid w-5 h-5 block" aria-hidden="true" />
                     <span class="sr-only">
                       Close

diff --git a/components/app/search/AppSearchEmpty.vue b/components/app/search/AppSearchEmpty.vue
@@ -1,6 +1,6 @@
 <template>
-  <div p="y-4" flex="~ col items-center" gap-2>
-    <span i="heroicons-magnifying-glass-20-solid" text="gray-400" w-5 h-5 block />
-    <span text="gray-600"> We couldn't find any items with that term. Please try again. </span>
+  <div class="py-4 flex flex-col items-center gap-2">
+    <span class="i-heroicons-magnifying-glass-20-solid w-5 h-5 block text-gray-500 dark:text-gray-400" />
+    <span class="text-gray-400 dark:text-gray-600"> We couldn't find any items with that term. Please try again. </span>
   </div>
 </template>
diff --git a/components/app/search/AppSearchGroup.vue b/components/app/search/AppSearchGroup.vue
@@ -24,7 +24,7 @@ function isLastChildren(children: SearchDisplayItem[] | null, index: number) {
 </script>
 
 <template>
-  <section class="p-4 dark:bg-gray-700/20 ring-1 dark:ring-gray-700 rounded-lg">
+  <section class="p-4 bg-gray-300/20 ring-gray-300 dark:bg-gray-700/20 ring-1 dark:ring-gray-700 rounded-lg">
     <h2 class="dark:text-gray-400 capitalize font-bold mb-2">
       {{ name }}
     </h2>

diff --git a/components/app/search/AppSearchGroupItem.vue b/components/app/search/AppSearchGroupItem.vue
@@ -12,22 +12,22 @@ defineProps<{
 <template>
   <NuxtLink :to="item.id" :class="{ 'pl-5': child, 'dark:bg-primary/30': active }" class="px-2 h-14 rounded-lg flex items-center gap-2 transition ease-in">
     <svg v-if="child && !last" width="11" height="34" viewBox="0 0 11 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M1 1V17M1 17H10.1429M1 17V33" class="dark:stroke-zinc-500" stroke-linecap="round" />
+      <path d="M1 1V17M1 17H10.1429M1 17V33" class="stroke-gray-400 dark:stroke-gray-500" stroke-linecap="round" />
     </svg>
 
     <svg v-if="child && last" width="11" height="33" viewBox="0 0 11 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M1 1V15C1 16.1046 1.89543 17 3 17H10.1429" class="dark:stroke-zinc-500" stroke-linecap="round" />
+      <path d="M1 1V15C1 16.1046 1.89543 17 3 17H10.1429" class="stroke-gray-400 dark:stroke-gray-500" stroke-linecap="round" />
     </svg>
 
     <!-- TODO: update in order to have the correct icon for blog, packages and more -->
-    <span v-if="item.level === 0" class="i-heroicons-document-text-20-solid w-6 h-6 block dark:text-gray-50" />
-    <span v-else class="i-heroicons-hashtag-20-solid h-5 w-5 block dark:text-zinc-400" />
+    <span v-if="item.level === 0" class="i-heroicons-document-text-20-solid w-6 h-6 block text-gray-950 dark:text-gray-50" />
+    <span v-else class="i-heroicons-hashtag-20-solid h-5 w-5 block text-gray-500 dark:text-gray-400" />
 
     <span class="flex flex-col">
-      <span class="dark:text-gray-50 font-semibold">
+      <span class="text-gray-950 dark:text-gray-50 font-semibold">
         {{ item.title }}
       </span>
-      <span v-if="item.level > 0" class="dark:text-zinc-400 text-sm">
+      <span v-if="item.level > 0" class="text-gray-500 dark:text-gray-400 text-sm">
         {{ item.titles[0] }}
       </span>
     </span>

diff --git a/components/app/search/AppSearchInput.vue b/components/app/search/AppSearchInput.vue
@@ -31,15 +31,15 @@ function selectFirstOption() {
 </script>
 
 <template>
-  <ComboboxLabel for="search" class="h-12 px-4 md:py-2 flex items-center gap-4 ring-1 dark:ring-gray-700 dark:bg-gray-700/40 dark:hover:bg-gray-700/50 rounded-lg transition ease-in">
-    <span class="i-heroicons-magnifying-glass-20-solid w-5 h-5 block text-zinc-400" />
+  <ComboboxLabel for="search" class="h-12 px-4 md:py-2 flex items-center gap-4 ring-1 ring-gray-300 bg-gray-300/20 hover:bg-gray-300/40 dark:ring-gray-700 dark:bg-gray-700/40 dark:hover:bg-gray-700/50 rounded-lg transition ease-in">
+    <span class="i-heroicons-magnifying-glass-20-solid w-5 h-5 block text-gray-500 dark:text-gray-400" />
     <ComboboxInput
       id="search"
       ref="comboboxInput"
       type="text"
       name="search"
       placeholder="Search..."
-      class="bg-transparent placeholder:dark:text-zinc-400 dark:text-gray-50 grow focus:outline-none"
+      class="bg-transparent placeholder:text-gray-500 placeholder:dark:text-gray-400 text-gray-950 dark:text-gray-50 grow focus:outline-none"
       autocomplete="off"
       :value="query"
       @change="onChange($event.target.value)"

diff --git a/components/blog/BlogCard.vue b/components/blog/BlogCard.vue
@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <UCard as="article" :ui="{ base: 'h-full relative', background: 'dark:bg-gray-700/40 hover:dark:bg-gray-700/60', divide: '', shadow: 'shadow-none hover:shadow-lg ', ring: 'dark:highlight-white/10', rounded: 'rounded-lg', header: { base: 'flex gap-3 items-center', padding: 'py-0 pt-4 sm:px-4 sm:pt-4' }, body: { padding: 'p-4 sm:p-4' }, footer: { padding: 'py-0 pb-4 sm:px-4 sm:pb-4' } }">
+  <UCard as="article" :ui="{ base: 'h-full relative', background: 'bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 hover:dark:bg-gray-700/60', divide: '', shadow: 'shadow-none hover:dark:shadow-lg ', ring: 'dark:highlight-white/10', rounded: 'rounded-lg', header: { base: 'flex gap-3 items-center', padding: 'py-0 pt-4 sm:px-4 sm:pt-4' }, body: { padding: 'p-4 sm:p-4' }, footer: { padding: 'py-0 pb-4 sm:px-4 sm:pb-4' } }">
     <template #header>
       <h3 class="text-xl font-semibold dark:text-gray-50">
         <NuxtLink :to="path" class="absolute inset-0" />

diff --git a/components/content/AnotherArticle.vue b/components/content/AnotherArticle.vue
@@ -9,19 +9,19 @@ const { data: article } = await useAsyncData(`article:${props.link}`, () => quer
 
 <template>
   <div class="not-prose my-8 flex flex-col gap-2">
-    <p class="dark:text-gray-400">
+    <p class="text-gray-500 dark:text-gray-400">
       {{ text ?? 'Read more:' }}
     </p>
-    <article v-if="article" class="group relative rounded-lg ring-1 dark:ring-gray-700 hover:dark:ring-gray-400 dark:bg-gray-700/20 hover:dark:bg-gray-700/50 transition ease-in">
+    <article v-if="article" class="group relative rounded-lg ring-1 ring-gray-300 bg-gray-300/20 hover:bg-gray-300/40 dark:ring-gray-700 hover:dark:ring-gray-400  dark:bg-gray-700/20 hover:dark:bg-gray-700/50 transition ease-in">
       <!-- TODO: handle image -->
       <div class="p-4">
-        <h1 class="dark:text-gray-200 font-bold">
+        <h1 class="text-gray-800 dark:text-gray-200 font-bold">
           <NuxtLink :to="article._path">
             {{ article.title }}
             <span class="absolute inset-0" />
           </NuxtLink>
         </h1>
-        <p class="mt-2 dark:text-zinc-400 text-nowrap text-ellipsis overflow-hidden">
+        <p class="mt-2 text-gray-500 dark:text-gray-400 text-nowrap text-ellipsis overflow-hidden">
           {{ article.description }}
         </p>
       </div>

diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
@@ -10,8 +10,8 @@ const { copy, copied, isSupported } = useClipboard()
 </script>
 
 <template>
-  <div class="my-8 ring-1 dark:ring-gray-700 rounded-lg overflow-hidden">
-    <div class="group relative p-4 dark:bg-gray-700/20">
+  <div class="my-8 ring-1 ring-gray-300 dark:ring-gray-700 rounded-lg overflow-hidden">
+    <div class="group relative p-4 bg-gray-300/20 dark:bg-gray-700/20">
       <span v-if="filename" class="absolute top-2 right-3 text-xs font-mono">
         {{ filename }}
       </span>

diff --git a/components/content/design-kit/DesignKitLogo.vue b/components/content/design-kit/DesignKitLogo.vue
@@ -23,7 +23,7 @@ function showNotification() {
   <DesignKitGrid>
     <DesignKitGridItem v-for="item in logo" :key="item.name">
       <template #content>
-        <div class=" dark:bg-gray-700/20 h-full flex items-center justify-center p-4">
+        <div class="bg-gray-300/20 dark:bg-gray-700/20 h-full flex items-center justify-center p-4">
           <img :src="item.src.svg" :alt="`${item.name} logo`" class="h-full">
         </div>
       </template>

diff --git a/components/content/design-kit/DesignKitPackageLogos.vue b/components/content/design-kit/DesignKitPackageLogos.vue
@@ -17,7 +17,7 @@ function showNotification(title: string) {
   <DesignKitGrid v-if="data">
     <DesignKitGridItem v-for="pkg in data" :key="pkg.title">
       <template #content>
-        <div class=" dark:bg-gray-700/20 h-full flex items-center justify-center p-4">
+        <div class="bg-gray-300/20 dark:bg-gray-700/20 h-full flex items-center justify-center p-4">
           <img :alt="`Logo of ${pkg.title}`" :src="toPackageLogo(pkg.title)" class="h-full">
         </div>
       </template>

diff --git a/components/content/home/HomeHero.vue b/components/content/home/HomeHero.vue
@@ -20,10 +20,10 @@ const { data } = await useAsyncData(' blog:latest', () => queryContent('/blog').
       <HomeHeroEyeBrow v-if="news" :prefix="news.prefix" :title="news.title" :path="news.path" />
       <HomeHeroEyeBrow v-else-if="data" prefix="What's new" :title="data.title" :path="data._path" />
       <div class="flex flex-col gap-2">
-        <h1 class="dark:text-gray-50 text-[2rem] md:text-4xl lg:text-5xl font-extrabold tracking-wide leading-normal lg:leading-normal">
+        <h1 class="text-gray-950 dark:text-gray-50 text-[2rem] md:text-4xl lg:text-5xl font-extrabold tracking-wide leading-normal lg:leading-normal">
           <ContentSlot :use="$slots.title" unwrap="p" />
         </h1>
-        <p class="dark:text-gray-400 text-2xl md:text-[1.75rem] leading-normal md:leading-normal">
+        <p class="text-gray-500 dark:text-gray-400 text-2xl md:text-[1.75rem] leading-normal md:leading-normal">
           <ContentSlot :use="$slots.subtitle" unwrap="p" />
         </p>
       </div>

diff --git a/components/design-kit/DesignKitGridItem.vue b/components/design-kit/DesignKitGridItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="ring-1 dark:ring-gray-700 rounded-md overflow-hidden h-24">
+    <div class="ring-1 ring-gray-300 dark:ring-gray-700 rounded-md overflow-hidden h-24">
       <slot name="content" />
     </div>
     <div class="mt-1 font-semibold">

diff --git a/components/home/HomeHeroEyeBrow.vue b/components/home/HomeHeroEyeBrow.vue
@@ -8,10 +8,10 @@ defineProps<{
 
 <template>
   <NuxtLink :to="`${path}?utm_source=unjs.io&utm_medium=home-hero`" class="flex items-center gap-4">
-    <span class="px-3 py-1 dark:bg-gray-700/40 ring-1 dark:ring-gray-700 rounded-full text-sm dark:text-gray-50 nowrap font-medium">
+    <span class="px-3 py-1 dark:bg-gray-700/40 ring-1 ring-gray-700 dark:ring-gray-700 rounded-full text-sm text-gray-950 dark:text-gray-50 nowrap font-medium">
       {{ prefix }}
     </span>
-    <span class="flex items-center gap-2 dark:text-gray-400">
+    <span class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
       <span class="text-left">{{ title }}</span>
       <span class="shrink-0 w-5 h-5 i-heroicons-chevron-right-20-solid" />
     </span>

diff --git a/components/home/HomeNoArticles.vue b/components/home/HomeNoArticles.vue
@@ -4,7 +4,7 @@ const { data } = await useAsyncData('no-articles', () => queryContent('/_no-arti
 
 <template>
   <ProseContent v-if="data" class="mx-auto">
-    <ContentRenderer :value="data" class="px-8 py-12 md:py-20 flex flex-col gap-4 dark:text-gray-400 text-center" />
+    <ContentRenderer :value="data" class="px-8 py-12 md:py-20 flex flex-col gap-4 text-gray-500 dark:text-gray-400 text-center" />
   </ProseContent>
 </template>